타입스크립트의 없는 타입은 어떻게 하는가?

자바스크립트와 만찬가지로 타입스크립트에서도 Object를 사용하여 다양하게 값을 정의 할 수 있다.

타입스크립트는 엄격한 언어이기에 다음과 같은 문제가 발생한다.

const person = {
  name: "park"
};

person.name = "Kim";
person.age = 10; // error! age는 person 오브젝트에 존재하지않아

자바스크립트에서는 문제 없이 작동했지만 타입스크립트로 실행했을때는 Object person에서 값을 선언과 타입을 정해주지 않았기에 문제가 발생했다. 해당문제는 optional properties를 통해 해당 문제를 해결한다.

선택적 프로퍼티(optional properties )

const person1: {
  name: string;
  age?: number;
} = {
  name: "park"
};

person1.age = 10;

object를 생성할때 : {} 를 통해 어떤 오브젝트 형태인지 명시적으로 선언을 해주고 존재할수 있고 없을 수도 있는 항목은 선택적 프로퍼티 ?: 를 통해 처리해준다.

person1의 age는 number 타입으로 올수있는데 없을수도 있다 라는 의미이다.

그런데 이런 코드 보기 어렵지 않은가? 만약에 person1 , person2 , person3 의 동일한 객체를 만들때도 이렇게 불편한 코드를 계속해서 작성하기에는 가독성도 떨어지고 재사용성도 떨어진다.

이런 이유로 TypeScript에서는 type alias 와 interface 방법을 지원한다.

type Alias

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

const player1: Player = {
  name: "park"
};

const player2: Player = {
  name: "Lee",
  age: 22
};

const player3: Player = {
  name: "Kim",
  age: 23
};

type을 미리 선언하여 오브젝트에 적용하면 코드도 간결해지고 가독성도 높아진다.

함수에서 Type이용하기

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

function playerName(name: string): Human {
  return {
    name
  };
}

const human1 = playerName("park");
console.log(human1); // { name: 'park' }
human1.age = 10;
console.log(human1); // { name: 'park', age: 10 }

const human2 = (name: string): Human => {
  return { name };
};

화살표함수에서 TS사용하기

type functionType1 = (a: number, b: number) => string;

const sum2: functionType1 = (a, b) => {
  return `값은 (${a + b})`;
};