4. TypeScript - Types

 

타입스크립트에는 기본형 타입 이외에도 다양한 타입들이 존재한다. 
여기에서는 어떠한 타입들이 있고, 해당 타입들을 어떻게 사용할 수 있는지 알아보자.

 

---

 

Types by Inference

타입스크립트는 JS의 superSet이기 때문에, JS코드를 잘 이해하고 있다. 

따라서, 아래처럼 타입을 명시하지 않고 JS문법으로 작성하더라도 helloWorld:string 타입이라고 추론한다.

물론, 타입추론을 이용 할 수도 있지만 TS의 장점을 최대한 살리기 위해서는,
Type을 명시적으로 정의 해주는 것이 가독성, 유지보수성 등을 높이는데 매우 중요하다. 

 

Function

 

1. 기본 사용법

TS에서는 함수를 선언할 때 다양한 타입을 정할 수 있다. 

function add(a:number, b:number):number{
	return a + b
}

위 코드처럼 파라미터의 타입, 그리고 리턴 값의 타입을 지정 할 수 있다. 

 

 

2. optional Parameter

인자가 전달 될 수도 전달 되지 않을 수도 있는 파라미터가 있을 수 있다. (아래 코드에서는 last)

  function printName(first: string, last?: string) {
    console.log(first);
    console.log(last);
  }

이 경우, 파라미터뒤에 '?' 를 붙여 optional Parameter로 선언해 주자.

 

2. default Parameter

만약, 파라미터에 값이 전달 되지 않았을 때 사용될 값을 미리 정할 수 있다. 

function multiply(a:number, b:number = 1){
	return a * b
}

 

 

원래 두 개의 argument가 전달 되야 하는 함수 multiply이지만, 하나의 값만 전달 되게 될 경우 *1을 하여 return 하도록 만들었다. 

 

---

 

Array

Array를 표현하는 방법은 크게 2가지가 있다.( 참고링크 )

 

[1, 2, 3]을 표현하는 예를 통해 알아보자.

//둘다 같은 의미를 가진다.
let arr: number[] = [1, 2, 3];
let brr: Array<number> = [1, 2, 3]

 

보통 두 방식은 같은 의미를 가지지만, readonly 가능여부라는 차이점을 가지고 있다. 

//가능
function printNumber(num: readonly number[]){
	console.log(num)
}

//불가능
function printNumber(num: readonly Array<number>){
	console.log(num)
}

즉, number[]는 readonly 적용이 가능 하지만, Array<number>는 그렇지 못하다는 것이다.

 

 

Union ( | )

Union Type은 OR을 뜻한다.

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");
// Error
printId({ myID: 22342 });

prinId 의 파라미터인 id는 number 또는 string 타입이라는 것을 의미한다.

 

 

Type Alias

하나의 타입을 미리 정해놓고 여러번 재사용하고 싶을 때가 있다.

그럴 때 사용할 수 있는 것이 type alias(a name for any type)이다.

 

type이라는 syntax를 통해 나만의 타입을 지정할 수 있다. 

type Point = {
  x: number;
  y: number;
};
 
// Exactly the same as the earlier example
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

 

 

Discriminated Union

(참고링크)

discriminated Union이란,

Union 타입이지만 그 Union type들이 서로를 구분(discriminate)할 수 있는 공통적인 property를 가지고 있는 것을 의미한다.

이를 통해 각 타입을 구분하기 편하게 할 수 있다.

 

예를 들어보자.

  type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };
 
function area(s: Shape) {
  if (s.kind === "circle") {
    return Math.PI * s.radius * s.radius;
  } else if (s.kind === "square") {
    return s.x * s.x;
  } else {
    return (s.x * s.y) / 2;
  }
}

위 코드에서 우리는 Shape 이라는 Union Type에 kind라는 공통적인 property를 부여했다. 

그리고 이 공통적으로 가지고 있는 property를 이용하여 각 타입을 쉽게 구분 할 수 있게 했다. 

 

이번에는 실제로 사용 할 법한 예를 들어보자. 

type SuccessState = {
    result: 'success';
    response: {
      data: string;
    };
  };
  type FailState = {
    result: 'fail';
    reason: string;
  };

  type FetchState = SuccessState | FailState;

  printFetchState(state: FetchState):string{
  	if(state.state === 'fail') return state.reason
    else return state.response.data
  }

 

위 코드에서 우리는 data를 받아왔는지 받아오지 못했는지 상태에 따라 다른 값을 손쉽게 return 할 수 있다. 
이는 result라는 공통 property를 부여하고 이들을 unionType으로 선언 했기 때문이다.