[Typescript] 타입 - 1

Type part 1

 

Object 타입 설정하는 방법

let a : number[] = [1, 2];
let b : string[] = ["12"];
let c : boolean[] = [true];

위와같이 array안에 type도 설정해 줄 수 있다.

 

그런데 Objcet는 조금 다르다.

const player : objcet = {
	name:"kim"
}

player.name

이렇게 하면 오류가 뜬다. name이 없다고 

그럼 어떻게 해야할까 ? 

 

const player : {
    name : string,
    age?: number
} = {
	name : "kim"
}

if(player.age < 10) {
	console.log("hi")
}

이렇게 만들면 된다.

age에  물음표를 붙이면 선택적으로 data를 넣어도 되고 넣지 않아도 된다. 

만약 저 물음표가 없다면 age를 무조건 할당해줘야한다. 그렇지 않으면 player에 빨간 밑줄이 생기면서  age를 빼먹었다고 불평한다.

 

단 위와 같이 if절을 사용하면 안된다.  age가 선택적이기 때문에 undefined일 수가 있다. 

따라서 저렇게만 쓴다면 또 에러가 뜰 것이다. 

if(player.age && player.age < 10) {
	console.log("hi")
}

따라서 이렇게 player.age가 있다면 if문이 실행되도록 조건을 추가해주면 된다.

 

 

여러개의 Object에 type 적용하는 방법 (Alias type)

 

자 그럼 이제 만약 player를 여러개 만든다고 한다면 어떻게 할까?

 

const player1 : {
    name : string,
    age?: number
} = {
	name : "kim"
}

const player2:{
    name : string,
    age?: number
} = {
	name : "Pack"
}

이렇게 해줘야할까???  

아니다

 

더 쉽게하는 방법이 존재한다.

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

const player1 : Player {
	name : "kim"
}

const player2: Player{
	name : "Pack"
}

이렇게만 해주면 된다.

이것을 우린 Alias type이라고 부른다. 

 

함수에 type을 적용하는 방법

 

자 이번에는 return값의 타입을 지정하는 방법을 배워보자

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

function playerMaker(name:string) : Player{
	return {
    	name       // name : name 은   name으로 축약가능 (이름이 같으면 이렇게 하나만 써도 됨)
    }
}

const kim = playerMaker("kim")
kim.age = 12


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


function playerMaker(name:string){
	return {
    	name       
    }
}

const kim = playerMaker("kim")
kim.age = 12

 

첫 번째 kim하고 두 번째 kim은 정상적으로 작동한다. 

but  함수뒤에 type을 적어주지 않으면  kim.age = 12는 할당할 수 없다.

이런식으로 에러가 뜬다. 

따라서 age를 kim에다 할당하려면 함수 옆에다 type을 써줘야한다. 

이런식으로 말이다. 

 

위 함수를 화살표 함수로 만들면 아래와 같다.

const playerMaker = (name:string) : Player => ({name})