[우아한 타입스크립트] 2.2 타입 시스템

타입 시스템

구조적 서브타이핑
객체가 가지고 있는 속성을 바탕으로 타입을 구분
이름이 다른 객체라도 가진 속성이 동일하다면 서로 호환이 가능한 동일 타입으로 여김
-> 서로 다른 두 타입 간의 호환성은 오로지 타입 내부 구조에 의해 결정됨

값 vs 타입

타입스크립트 문업인 type은 자바스크립트 런타임에서 제거되기 때문에 값 공간과 타입 공간은 충돌하지 않음

type Developer = { isWorking: true };
const Developer = { isWorking: true }; //OK

클래스
타입 애너테이션(변수의 타입을 명시적으로 지정), 런타임에서의 객체로 변환되어 값으로 사용 가능

enum
런타임에 실제 객체로 존재하며, 함수로 표현 가능

// enum
enum WeekDays {
	MON = 'Mon',
	TUES = 'Tues',
	WEDNES = 'Wednes',
	THURS = 'Thurs',
	FRI = 'Fri'
}

type WeekDaysKey = keyof typeof WeekDays;

function printDay(key:WeekDaysKey, message:string) {
	const day = WeekDays[key];
	
	if(day <= WeekDays.WEDNES) {
		console.log(`It's still ${day}day, ${message}`);
	}
}

printDay('TUES', 'wanna go home'); // It's still Tuesday, wanna go home	

** enum은 런타임에 객체가 생성되어 트리쉐이킹(불필요 코드 제거)이 어렵고, 번들 사이즈가 커짐
-> as const 기반으로 작성하면 JS 일반 객체(변수에 할당된 값)로 존재함

// as const
const WeekDays = {
	MON: 'Mon',
	TUES: 'Tues',
	WEDNES: 'Wednes',
	THURS: 'Thurs',
	FRI: 'Fri'
} as const;

type WeekDaysKey = keyof typeof WeekDays;

타입을 확인하는 방법

• 값 공간의 typeof 는 런타임 타입을 가리키는 문자열을 반환
• 타입 공간의 typeof는 해당 타입을 반환

interface Person {
	first: string;
	last: string;
}

const person: Person = { first: 'zig', last: 'song' };
function email(options: { persion: Person }) {}

// 값에서 사용된 typeof => 자바스크립트 런타임의 typeof 연산자가 됨
const v1 = typeof person; // object
const v2 = typeof email; // function

// 타입에서 사용된 typeof => 값을 읽고 타입스크립트의 타입스크립트의 타입 반환
type T1 = typeof person; // Person
type T2 = typeof email; // (options: { person: Person }) => void

• 클래스는 생성자 함수로, 인스턴스 생성 여부에 따라 생성자 함수 타입 또는 인스턴스 타입을 반환

class Developer {
	name: string;
	sleepingTime: number;

	constructor(name: string; sleepingTime: number) {
		this.name = name;
		this.sleepingTime = sleepingTime;
	}
}

const d = typeof Developer; // function
type T = typeof Developer; // (name: string; sleepingTime: number) => Developer;

const zig: Developer = new Developer('zig', 7);
type ZigType = typeof zig; // Developer