[TypeScript]이펙티브 타입스크립트 Item 11~15

item11

타입이 명시된 변수에 객체 리터럴 할당할 때 타입 속성 체크함 =>

interface Menu {
	price: number;
}

const a: Menu = {
	price: 100,
	name: 'a 세트'
};
// 에러 발생


const obj = {
	price: 100,
	name: 'a 세트'
};
const a: Menu = obj; 
// 정상


const a: Menu = {
	price: 100,
	name: 'a 세트'
} as Menu;
// 정상

1번째는 속성체크를 통해 오류를 잡아낸 모습

2번째는 앞서 나온 구조적 타이핑, 즉 obj가 Menu 타입의 부분 집합을 포함하므로 a에 할당 가능하고 타입 체커도 통과 즉 오류 없다 판정

3번째는 단언문을 사용해서 속성 체크를 피해간 모습 => 단언문 보다 선언문을 사용해야하는 이유 중 하나

 

item12

JS(JavaScript)와 TS(TypeScript)는 함수 문장과 함수 표현식을 다르게 인식  

함수 표현식을 사용하는 것이 좋음

=> 재사용할 수 있다는 장점 존재

// 문장(statement)
function test1(temp: number): number { ... }

// 표현식(expression)
const test2 = function(temp: number): number { ... };
const test3 = (temp: number): number => { ... };

// 재사용 예시
type ReUse = (a: number, b: number) => number;
const add: ReUse = (a, b) => a + b;
const sub: ReUse = (a, b) => a - b;

 

함수의 매개변수에 타입 선언을 하는 것 보단 함수 표현식 전체에 타입 구문을 적용하는 것이 좋음

declare function fetch(
	input: RequestInfo,
	init?: RequestInit
): Promise<Response>;

//매개 변수에 타입선언 
async function checkedFetch(
	input: Request,
	init?: RequestInit
){
	return await fetch(input, init);
}

// 함수 표현식, 함수 전체에 타입 적용 => input,init의 타입 추론 가능 
const checkedFetch: typeof fetch = async (input, init) => {
	return await fetch(input, init);
}

 

 

item13

타입 vs 인터페이스

 

타입은 유니온 가능, 인터페이스는X

type a = { ... };
type b = { ... };
interface test {
	[name:string]: a | b;
}

//이 타입은 인터페이스로 표현 불가
type test2 = (a | b) & { name: string };

 

인터페이스는 보강이 가능함, 타입은 X

interface a{
	name: string;
}
interface a{
	value: number;
}
const test: a = {
	name: 'test',
	value: 100,
};
//위의 인터페이스 a 2개가 병합되어서 정상 판정

 

item14

코드 중복을 줄이자, 코드 중복 만큼이나 타입 중복도 많이 발생 

타입에 이름 붙이기

extends 활용해서 인터페이스 필드의 반복 피하기

타입 반복하는 것 대신 제네릭 타입 사용하여 타입들간 매핑하는 것이 좋음

 

item15

런타임 때까지 객체의속성 모를 때만 인덱스 시그니처를 사용

인덱스 시그니처의 값 타입에는 undefinded 추가하는 것 고려해야 (안전한 접근 위해)

인터페이스, Record, 맵핑된 타입 보단 정확한 타입을 인덱스 시그니처 타입으로 사용하는 것이 좋음

 

type test {[property: string]: string};
const t:test = {
	name: 'testS',
    value: '100',
};

에서 [property: string]: string 이 인덱스 시그니처

키의 이름(property): 키의 위치만 표시하는 용도

키의 타입(첫번째 string): string, number 혹은 symbol의 조합

값의 타입: 어떤 것 가능