[TIL] TypeScript에서 타입을 선언해보자.

1. 선언할 수 있는 타입들.

굉장히 많은 타입들을 선언할 수 있다.

많은 타입을 지정할 수 있으니 다른 것들은 차차 알아가 보기로 하고, JsvaScript를 사용해 보았다면 알만한 number, string, boolean을 먼저 공부해 보았다.

타입을 선언할 때는,

const a: string = "Tom"

이런식으로 타입을 선언 할 수 있다.

또 각각의 타입을 배열로 지정할 수가 있는데 타입명 뒤에 []을 사용하면 가능하다. 예. string[]

 

2. 타입 선언을 한다면 보다 더 컴퓨터와의 대화에 가까워진다.

깊이 들어가보자. 객체로 타입을 선언하고 싶다면

const player : object = {
	name : "pjm"
}
player.name

이 방법을 생각했지만 틀린 방법이었다.

우측 사진과 같이 해당 속성이 없다고 나오는 오류가 발생한다. 이 것은 다음과 같이 수정이 가능하다.

const player : {
    name:string,
}  = {
    name : "pjm",
}
player.name

객체안의 키가 있을수도, 없을수도 있다는 것을 표현하려면 어떻게 해야 할까?

const player : {
    name:string,
    age?:number
}  = {
    name : "pjm",
    age: 1
}
player.name

이런식으로 ?(optional parameter, 선택적 변수)를 사용한다면 가능해진다.

그러나 비슷한 코드가 반복된다면 피곤해질 것이다.

const playerPjm: {
  name: string;
  age?: number;
} = {
  name: "pjm",
};

const playerSsh: {
  name: string;
  age?: number;
} = {
  name: "ssh",
};

 

위 코드는 두가지 변수만 예로 들고 있지만 백만개의 비슷한 코드를 작성한다면 가독성이 나빠질 것이고 코드의 길이도 길어질 것이다.

Alias 타입을 사용하면 아래와 같이 코드가 단축된다.

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

const pjm: Player = {
  name: "pjm",
};

const ssh: Player = {
  name: "ssh",
};

Alias 타입을 좀더 확장하면 이런 것도 가능하다.

type Name = string;
type Age = number;
type Player = {
  name: Name;
  age?: Age;
};

const pjm: Player = {
  name: "pjm",
};

const ssh: Player = {
  name: "ssh",
};

 

그러나 변수에 타입을 지정하는 것은 효용성이 떨어진다.

함수에 적용해보자. 조금 더 활용도가 높아진다.

type Name = string;
type Age = number;
type Player = {
  name: Name;
  age?: Age;
};
function playerMaker(name: string) : Player {
  return {
    name: name,
  };
}
const pjm = playerMaker("pjm")
pjm.age = 12

그리고 당연히 화살표 함수에도 사용이 가능하다.

type Name = string;
type Age = number;
type Player = {
  name: Name;
  age?: Age;
};
const playerMaker = (name: string): Player => ({
  name,
});
const pjm = playerMaker("pjm");
pjm.age = 12;