TypeScript의 Type(1)

1. 기본 타입

number: 숫자

string: 문자열

boolean: 참/거짓

-> 뒤에 []을 붙여주면 배열이 됨 ex) number[]: 숫자 배열, string[]: 문자열 배열, boolean[]: 참/거짓 배열

 

2. 옵션 타입

1) player라는 타입 선언 및 실제 객체 만들기

const player: {
   name: string,
   age: number,
} = {
   name: "hy",
   age: 13,
}

 

2) ? 사용: player 타입이지만, 객체 내에 일부 내용이 undefined도 허용되도록 하기

 

원래는 age가 없어서 오류가 발생하지만, ?를 사용하였기 때문에 오류가 발생하지 않는다.
age는 현재 number 또는 undefined 형식을 가질 수 있다.

const player: {
   name: string,
   age?: number,
} = {
   name: "hy"
   //원래는 age가 없어서 오류가 발생하지만, ?를 사용하였기 때문에 오류가 발생하지 않는다.
}

 

3) ? 사용 후 조건문 작성 시 발생하는 문제 및 해결

 

현재 age는 숫자일 수도 있고, undefined일 수도 있다.

따라서 TS에서는 age의 현 상태를 확인하지 않으면 오류를 발생시킨다.

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

if (player.age < 10){ //오류 발생

}

 

따라서 아래처럼 코드를 작성하면 해결된다.

age가 숫자로 선언 됐는지를 확인하는 코드를 조건문에 추가해준 것이다.

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

if (player.age && player.age < 10){

}

 

3. Alias

어떤 타입을 갖는 많은 변수를 만들어야 할 때 type 을 이용하여 타입을 선언한 뒤, 이를 재사용하면 된다.

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

const hy: Player={
   name:"hy",
   age: 23,
}

const gy: Player={
   name: "ty",
   age: 23,
}

 

4. 함수의 return 값에 type 명시하기

함수를 정의할 때 parameter를 적는 괄호 옆에 타입을 명시해줄 수 있다.

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

function playerMaker(username: string):Player{ 
//:Player를 작성해줌으로써 이 함수가 Player 타입을 반환함을 알려준다.
   return {
    name: username,
   }
}

const newPlayer:Player = playerMaker("ay"); //newPlayer의 타입이 Player임을 알려준다.
newPlayer.age=23;