Types of TS part One

Typescript에서 명시적 type표기

Typescript에서는 콜론을 사용하여 명시적으로 변수의 타입을 밝혀줄 수 있다.

let a : number = 1;
let b : string = "i1";
let c : boolean = true;

그리고 각각의 데이터타입으로 이루어진 배열 또한 다음과 같이 표현할 수 있었다.

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

하지만 타입스크립트는 이렇게 명시적으로 표기하지 않아도 변수의 타입에 대해서 추론할 수 있으며, 대부분의 경우 타입스크립트가 자체적으로 추론하도록 두는 것이 편리하고 간결한 경우가 많다.

let a = [1, 2];
let b = ["i1", "1"];
let c = [true];

이렇게 명시적 표기가 지워져도, 여전히 타입스크립트는 해당 변수가 어떤 데이터 타입의 요소들로 이루어진 배열인지 추론할 수 있다.

Typescript에서 객체 내부 선택적 속성 표기 방법

const player = {
	name : "allong"
}

이렇게 객체를 정의한다면

player.name = 1

이라고 데이터를 조회하는 즉시 타입스크립트는 오류를 경고하게 된다. player라는 객체의 name이라는 속성은 string타입의 데이터를 갖게 된다고 타입스크립트가 추론하기 때문이다.

그렇다면, player라는 타입의 객체들이 여럿이 있을 때, 모든 player타입의 객체가 name이라는 속성은 가지지만, 일부만 age라는 속성을 가진다면 이것은 어떻게 표현해주어야 할까?

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

이대로 끝내게 되면 타입스크립트는 또 오류를 경고한다. age속성에 대한 값이 존재하지 않기 때문이다. 하지만 지금 원하는 것은 age라는 속성에 대한 값을 선택적으로 가지는 것이기 때문에 이를 위한 표기를 해주어야 할 필요가 있다.

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

이렇게 age뒤에 물음표만 추가해주면, 오류를 사라지게 할 수 있다. age라는 속성이 선택적으로 존재할 수 있음을 명시했기 때문이다.

이 상태에서

if(player.age < 10) {}

라는 조건문만 써도 타입스크립트는 'Object is possibly 'undefined'라는 오류를 경고한다. age라는 속성은 없을 수도 있는 문제이기 때문이다.

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

조건문을 이렇게 처리하면 오류는 사라진다.

Alias(별칭)

const playerAllong : {
  name : string,
  age? : number
} = {
  name : "allong"
}

const playerJaehong : {
  name : string,
  age? : number
} = {
  name : "jaehong"
}

만약 player가 늘어남에 따라서 이렇게 반복해서 명시해주어야 한다면 효율성이 떨어질 것이다. 그래서 Alias(별칭) 타입을 생성하여 이것을 극복할 수 있다.

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

const allong : Player = {
  name : "allong"
}

const jaehong : Player = {
  name : "jaehong"
}

이렇게 코드를 줄일 수 있다. 이러한 방식은 객체에만 유효한 것은 아니기 때문에 다음과 같이 적용할 수도 있다.

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

const allong : Player = {
  name : "allong"
}

const jaehong : Player = {
  name : "jaehong"
}

이렇게 하면 age라는 속성에 대해서도 일괄적으로 number타입의 데이터가 할당될 것임을 명시할 수 있다. 물론 이 경우는 불필요한 경우이다.

함수의 return값의 type 지정 방법

지금까지 const나 let 같은 변수에 type을 할당하는 방법을 알아봤다. 그렇다면 함수에서는 어떻게 적용할까? 함수가 return하는 타입이 무엇인지 알 수 있으면 편리할 것이다.

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

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

이런식으로 player객체를 생성하는 함수를 만들 수 있다.

const allong = playerMaker("allong")

이렇게 함수를 동작시키는 것은 아무런 문제가 없으나

allong.age = 12

이 코드는 오류를 발생시킨다. playerMaker함수는 string인 name이라는 속성만 있는 object를 return하고 있기 때문이다. 이것을 해결하는 방법은 간단하다.

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

이렇게 하면 playerMaker라는 함수가 name이라는 string타입의 데이터를 인수로 받되 age라는 속성을 선택적으로 가질 수 있는 객체를 반환함을 밝힐 수 있다.

type Age = Number;
type Name = string;
type Player = {
	name : Name,
	age? : Age
}
function playerMaker(name : string) : Player {
  return {
    name
  }
}

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

이렇게 되면 오류는 사라진다.