[TS] 01 문법 / object, 함수 return의 타입지정

기본 문법

// 변수명 뒤에 ': 타입이름' 을 적어준다
let a : number = 1;
let b : string = 'string';
let c : boolean = true;

//array로 바꾸기
let aa : number[] = [1, 2];
let bb : string[] = ['string', 'hello'];
let cc : boolean[] = [true];

// 타입은 자동으로 추론하는게 좋다. 굳이 명시할 필요 없음.

 

 

오브젝트 타입지정방법 & 옵셔널

// (1) 문제상황: age의 타입을 지정해줬지만 player안에 age가 없다면? -> age뒤에 '?'를 추가해서 옵셔널로 준다.
const player : {
  name: string,
  age?: number
} = {
  name: 'Tom',
}

// (2) 문제상황: player의 age가 없어 오류가 난다면?
if(player.age < 10){

}
// -> &&를 사용하여 age가 있을때 동작하도록 한다.
if(player.age && player.age < 10){

}

//(3) 문제상황: 내용이 같은 오브젝트가(otherPlayer) 하나 더 생겼다면?
const player : {
  name: string,
  age?: number
} = {
  name: 'Tom',
}

const otherPlayer : {
  name: string,
  age?: number
} = {
  name: 'Jack',
}

// -> Alias(별칭) 타입을 생성하면 된다.

// Alias(별칭) 사용법 
//1.type을 적고 뒤에오는 타입명은 대문자로 시작해야한다.
type Player = {
  name: string,
  age?: number
}
//2. 변수명 뒤에 새로만든 Alias의 타입명을 적어준다.
const player : Player = {
  name: 'Tom',
}
const otherPlayer : Player = {
  name: 'Jack',
}
// 쪼개서 사용가능(과하게 재사용하지 않도록 주의)
type Name = string; //요렇게 만든것을

type Player = {
  name: Name, // 이렇게 사용.
  age?: number
}

 

 

함수 return타입 지정

type Player = {
  name: Name,
  age?: number
}

-------------

function playerMaker(name:string) : Player{ // 뒤에 오는 Player은 위에 만들어줬던 Alias이며 return타입을 지정해준다.
  return{
    name //(name:name은 생략해서 name만 적을 수 있다.)
  }
}
const amy = playerMaker('Amy')
amy.age = 12 //-> Player(Alias)를 지정했기때문에 없던 age를 적어도 오류가 나지 않는다.

---------------
// 화살표함수일땐 이렇게 표기
const playerMaker = (name:string) : Player => ({name})