[우아한 타입스크립트 with 리액트] 타입의 세계 : 타입스크립트만의 독자적 타입 시스템

type vs interface

1) type : 정적으로 결정되어 있는 것 / union, intersection 타입 

2) interface : 확장될 수 있는 basis 정의하거나 어떤 object 구성을 설명하는 요소 / extends, implements 사용

 

any 타입

- 어떤 타입이든 any 타입에 할당 가능, any 타입은 어떤 타입으로도 할당 가능 (never 제외)

- noImplicitAny 옵션 활성화해서 타입이 명시되지 않은 변수의 암묵적인 any 타입에 대한 경고를 발생시킬 수 있음

어쩔 수 없이 사용해야 할 때 (런타임 오류를 방지하고 싶다면 쓰지 말자)

1) 개발 단계에서 임시로 값을 지정해야 할 때

2) 어떤 값을 받아올지 또는 넘겨줄지 정할 수 없을 때

3) 값을 예측할 수 없을 때

 

unknown 타입

-어떤 타입이든 unknown 타입에 할당 가능, unknown 타입은 any 타입 외에 다른 타입으로 할당 불가능

- 값을 가져오거나 내부 속성에 접근할 수 없음

- 강제 타입 캐스팅을 통해 타입을 전환할 때 사용 

 

void 타입

- 함수가 어떤 값을 반환하지 않는 경우 

- 변수에 void 를 할당하는 경우 undefined 또는 null 값만 할당할 수 있음

단, strictNullChecks 옵션이 설정된 경우 null 값을 할당할 수 없음 

 

never 타입

- 값을 반환할 수 없는 타입

- never 타입 이외의 어떤 타입도 never 타입에 할당될 수 없음  

 

1) 에러를 던지는 경우 : 자바스크립트에서 런타임에 의도적으로 에러를 발생시키고 캐치할 수 있음 

function generateError(res: Response): never {
	throw new Error(res.getMessage());
}

 

2) 무한히 함수가 실행되는 경우 

function checkStatus(): never {
	while (true) {
    	// ...
    }
}

 

Array 타입

- Object.prototype.toString.call(...) : 객체의 타입, 인스턴스를 알아내는 데 사용하는 함수

자바스크립트에서는 어떤 값이든 배열의 원소로 허용하여 하나의 배열로 선언된 변수에 다양한 자료형을 담을 수 있다

하지만, 타입스크립트의 정적 타입 사상이랑 맞지 않다

만약 다양한 자료형의 원소를 함께 다루는 배열을 사용하려면 유니온 타입을 사용할 수 있다

const array1: Array<number | string> = [1, "string"];
const array2: number[] | string[] = [1, "string"];

// 후자의 방식은 아래와 같이 선언할 수 있다
const array3: (number|string)[] = [1, "string"];

 

 

튜플을 사용해서 배열의 특정 인덱스에 정해진 타입을 선언할 수 있다

let tuple: [number] = [1];
tuple = [1, 2]; // 불가능
tuple = [1, "string"]; // 불가능

let tuple: [number, string, boolean] = [1, "string", true];

 

 

리액트 훅 요소 중, useState는 튜플 타입을 반환한다

const [value, setValue] = useState<string>("");

const httpStatus : [number, string, ...string[]] = [
400,
"Bad Request",
"/",
"/user"];

 

enum

이전 맴버 값의 숫자를 기준으로 1씩 늘려가며 자동 할당

 

- const enum 사용

- 문자열 상수 방식으로 열거형 사용하기 

- 열거형은 타입공간과 값 공간에서 모두 사용되기 때문에 열거형은 즉시 실행 함수 형식으로 변환된다

- 일부 번들러에서 트리쉐이킹 과정 중 즉시 실행 함수로 변환된 값을 사용하지 않는 코드로 인식하지 못하는 경우가 발생할 수 있다. 따라서, 불필요한 코드의 크기가 증가하는 결과를 초래할 수 있다

따라서, const enum 또는 as const assertion을 사용해서 유니온 타입으로 열거형과 동일한 효과를 얻을 수 있다