📚 이펙티브 타입스크립트 독서 기록

타입스크립트와 자바스크립트의 관계

• 타입스크립트는 자바스크립트의 상위집합 (Superset)
• 즉 모든 자바스크립트는 타입스크립트 (하지만 반대는 성립하지 않음)

타입스크립트를 사용하는 이유

• 타입스크립트의 타입 시스템은 런타임에 오류를 발생시킬 코드를 미리 찾아낸다.

코드 생성과 타입이 관계 없음을 이해하기

• 타입스크립트가 자바스크립트로 변환 될 때, 코드 내의 타입에는 영향을 미치지 않는다.
• 자바스크립트 실행 시점에도 타입은 영향을 미치지 않는다.

런타임에는 타입 체크가 불가능하다.

interface Rectangle {
   height: number;
   width: number;
}

if(shape instanceof Rectangle) // 오류!

• 타입은 런타임 시점에 아무런 역할을 할 수 없다.
• 타입스크립트의 타입은 제거 가능하기 때문에, 실제로 자바스크립트로 컴파일 되는 과정에서 모든 인터페이스, 타입, 타입 구문은 그냥 제거되어 버린다.

런타임 타입은 선언된 타입과 다를 수 있다.

• 어느경우? API 호출로 받아온 값의 경우

구조적 타이핑

interface Vector2D {
  x: number;
  y: number;
}

interface Vector3D {
  x: number;
  y: number;
  z: number;
}

function calculateLength(v: Vector2D) {
  return Math.sqrt(v.x * v.x + v.y * v.y);
}

• 위에 Vector3D 에는 Vector2D 타입에 있는 x , y 속성이 있기 때문에 calculateLength 함수의 매개변수로 들어갈 수 있다.
• 즉, Vector3D 의 구조가 Vector2D의 구조와 호환되기 때문에, calculateLength 호출이 가능해진다.

봉인된, 정확한 타입

• 함수를 작성할 때, 호출에 사용되는 매개변수의 속성들이 매개변수의 타입에 선언된 속성만을 가질거라 생각한다. 하지만 위에서 보았듯 , Vector3D 타입이 매개변수로 들어오면 Vector2D 타입에는 없는 x 속성이 추가로 들어온다.
• 이러한 타입을 봉인된,정확한 타입이라고 한다.
• 이는 타입스크립트에서 표현할 수 없다.
• 따라서 아래와 같은 예시가 있다.

function calculateL1(v: Vector3D) {
  let length = 0;
  for (const axis of Object.keys(v)) {
    const coord = v[axis]; //  'string' 은 'Vector3D'의 인덱스로 사용할수 없기에 엘리먼트는 암시적으로 'any' 타입입니다.
  }
}

• 왜 ? x,y,z 중 하나니까 string 타입이 아니지 않은가?
  • 구조적타이핑으로 인해 v 는 x,y,z 외에도 다른 속성을 가질 수 있다. 따라서 axis 타입은 string 이 될 수도 있다.
  • 즉, v[axis] 가 정확히 어떤 속성이 될 지 알 수 없으므로 number 라고 확정할 수 없다.
  • 이러는 경우 루프보다 모든 속성을 각각 참조하는 구현이 더 낫다.

구조적 타이핑과 덕타이핑의 차이점

• 덕타이핑과 구조적타이핑의 차이점은 덕타이핑은 런타임 시, 구조적타이핑은 컴파일 시 일어난다는 것이다.

any 타입 지양하기

1. any 타입은 안정성이 없다.
2. any는 함수 시그너쳐를 무시해버린다.
3. any 는 언어 서비스가 적용되지 않는다.
4. any 는 코드 리팩터링 때 버그를 감춘다.
5. any 는 타입 설계를 감춘다.
6. any 는 타입시스템의 신뢰도를 떨어뜨린다.

타입이 값들의 집합이라고 생각하기

type K = keyof (Person | Lifespan); // 타입이 never

• 위의 타입이 never 인 이유는 아래와 같다.

keyof (A|B) = (keyof A)& (keyof B)
keyof (A&B) = (keyof A) | (keyof B)

타입 단언보다 타입 선언 사용하기

const people = ['alice', 'bob', 'jan'].map((name) => ({ name }));
// Person[] 을 원했지만 결과는 { name: string; } []

// 타입 단언을 쓰면
const people = ['alice', 'bob', 'jan'].map((name) => ({ name } as Person));

// 선언하기 1번
const people = ['alice', 'bob', 'jan'].map((name) => {
  const person: Person = { name };
  return person;
}); // 타입은 Person[]

// 선언하기 2번 (리팩터링)

const people = ['alice', 'bob', 'jan'].map((name): Person => ({ name }));
// 타입은 Person[]

• 2번이 어떻게 가능한가.. (name):Person 은 name 의 타입이 없고 반환 타입이 Person 이라고 명시한다.

선언보다 단언이 유리한 경우

• 타입 체커의 추론보다 나의 판단이 더 정확할 때
• DOM element 에 대해서..
• 타입스크립트는 DOM에 접근 할 수 없기 때문에 DOM 타입을 모른다.

const el = document.body as Person; // 에러
const el = (document.body as unknown) as Person; // 성공

• 첫번째의 경우 HTMLElement 와 Person 이 서로의 서브타입이 아니기 때문에 변환이 불가능하다.
• unknown 을 사용하면, 동작하는데 그 이유는 unknown이 모든 타입의 서브타입이기 때문이다.

객체 래퍼 타입 피하기

• string 은 String 타입에 할당 할 수 있지만, String 은 string 타입에 할당 할 수 없다.
• 기본형 타입은 객체 래퍼에 할당 할 수 있기 때문에, 타입스크립트는 기본형 타입을 객체 래퍼에 할당하는 선언을 허용한다.

잉여 속성 체크의 한계 인지하기

interface Room {
  numDoors: number;
  ceilingHeightFt: number;
}

const r:Room {
  numDoors:1,
  ceilingHeightFt:10,
  elephant: 'present'
}
// 개체 리터럴은 알려진 속성만 지정할 수 있으며, Room 형식에 elephant 가 없습니다.

• 구조적 타입시스템에서 발생 할 수 잇는 중요한 종류의 오류(다른 타입이 추가되는 것)를 잡을 수 있도록 ‘잉여 속성 체크’라는 과정이 수행되었다.
• 하지만 이러한 잉여속성 체크는 매번 이루어지는 것은 아니다.

잉여 속성 체크가 일어나는 경우

1. 타입이 선언되어 있을 때, 객체 리터럴로 값을 할당 할 때
2. 타입이 선언되어 있는 매개변수에, 객체 리터럴로 매개변수를 전달할 때

잉여 속성 체크가 일어나지 않는 경우

1. 타입 선언대신 타입 단언을 사용 할 때
2. 타입이 선언된 값 혹은 매개변수에 객체 리터럴이 아니라 변수로 값을 할당하는 경우

잉여 속성 체크가 필요한 단적인 예시

interface Option {
  title: string;
  darkMode?: boolean;
}

const o1: Option = document;
const o2: Option = new HTMLAnchorElement();
// 에러 없음

• 왜 o1. 과 o2 의 경우 에러가 없을까?

• 일단 잉여속성 체크를 하지 못했고 (객체 리터럴로 값을 할당한게 아니므로), 그에 따라서 document 와 HTMLAnchorElement 에는 string 타입인 title 속성이 있기 때문에!

• 따라서 위의 할당문은 정상이다.

• 잉여 속성을 체크함으로써, 기본적으로 타입 시스템의 구조적 본질을 해치지 않으면서 객체 리터럴에 알 수 없는 속성을 허용하지 않아서 앞에서 다룬 문제점들을 해결 할 수 있다.

함수 표현식에 타입 적용하기

• 타입스크립트에서는 함수 표현식을 사용하는 것이 좋다.
• 왜? 함수의 매개변수 부터 반환값까지 전체를 함수 타입으로 선언하여, 함수 표현식에 재사용 할 수 있기 때문이다.

type BinaryFn = (a: number, b: number) => number;
const add: BinaryFun = (a, b) => a + b;

타입과 인터페이스의 차이점 알기

공통점

1. 타입 선언된 변수에 객체리터럴 할당 시 잉여속성을 체크해준다.
2. 인덱스 시그니쳐를 사용 할 수 있다.
3. 함수 타입도 정의 할 수 있다. (그런데 이 경우는 대부분 타입 alias 를 쓰는게 좋다.)
4. 제네릭이 가능하다.
5. 인터페이스는 타입을 확장할 수 있으며, 타입은 인터페이스를 확장 할 수 있다.

// 인터페이스가 타입 확장
interface IStateWithPop extends TState {
  population: number;
}

// 타입이 인터페이스 확장
type TStateWithPop = IState & { population: number };

6. 클래스 구현(implements) 시, 타입과 인터페이스 둘다 사용 가능

차이점

1. 유니온 타입은 있지만 유니온 인터페이스는 없다.
2. 인터페이스는 타입을 확장(extends) 할 수 있지만 타입은 불가능하다.

유니온 타입을 확장해야하는경우

type Input = {};
type Output = {};

interface VariableMap {
  [name: string]: Input | Output;
}

유니온 타입에 name 속성을 붙인 타입 만들기

type NamedVariabel = (Input | Output) & { name: string };

3. 튜플과 배열타입도 type 키워드로 더 간결하게 표현 가능

type Pair = [number, number];
type StringList = string[];
type NamedNums = [string, ...number[]];

4. 인터페이스는 보강(agument) 이 가능하다. (선언 병합! declaration merging)

interface IState {
  name: string;
  capital: string;
}

interface IState{
  population:number;
}

const newyork : IState{
  name: 'NewYork',
  capital: 'NewYork',
  population: 500_00
}

• 위와 같은 선언 병합은 주로 타입 선언 파일에서 사용된다.
• 따라서 선언 합을 지원하기 위해서는 무조건 interface 를 사용해야한다.
• 타입스크립트는 여러 버전의 자바스크립트 표준 라이브러리에서 여러 타입을 모아 병합한다. 병합을 통해서 Array 인터페이스에 여러 메서드가 추가된다.
• 따라서 프로퍼티가 추가되는 것을 원치 않는다면, 인터페이스 대신 타입을 사용해야한다.

타입 연산과 제너릭 사용으로 반복 줄이기

매핑된 타입 사용하기

interface State {
  userId: string;
  pageTitle: string;
  recentFiles: string[];
  pageContents: string;
}

interface TopNavState {
  userId: string;
  pageTitle: string;
  recentFiles: string[];
}

• 위와 같은 경우가 있을 때 어떻게 중복된 타입을 제거할까?
• 첫번째 아이디어로는 TopNavState 를 확장하여 State 를 만드는게 있다. 하지만 그게 옳바른 방법일까? 왜냐하면 TopNavState 는 결국 State 의 부분집합이기 때문이다!

interface TopNavState {
  userId: State[userId];
  pageTitle: State[pageTitle];
  recentFiles: State[RecentFiles];
}

• 이렇게 하면 되지 않을까?
• 더 좋은 방법은 매핑된 타입을 이용하는 것!

type TopNavState = {
  [k in 'userId' | 'pageTitle' | 'recentFiles']: State[k];
};

• 위와 같은 매핑된 타입은 배열 필드를 루프 도는것과 같은 방식이다.
• 사실 위는 아래의 타스의 유틸리티타입으로 구현 가능하다.

type TopNavState = Pick<State, 'userId' | 'pageTitle' | 'recentFiles'>;

제네릭 타입

• 제네릭 타입은.. 타입을 위한 함수라고 생각하면 쉽다.
• 그런데..제네릭 타입에서 매개변수를 제한 할 수 있는 방법은..?!
• 바로 extends 를 사용하는 것이다.
• extends 를 이용하면 제네릭 매개변수가 특정 타입을 확장한다고 선언하는 것 이다.

type Pick<T, K> = {
  [k in K]: T[k];
};
// K 타입은 'string | number | symbol ' 타입에 할당 할 수 없습니다.

• K는 T 타입과 무관하고 범위가 너무 넓다.
• K 는 인덱스로 사용될 수 있는 string | number | symbol 이 되어야하며, 실제로 범위를 더 좁힐 수 있어야 한다.

type Pick<T, K extends keyof T> = {
  [k in K]: T[k];
};

동적 데이터에 인덱스 시그니쳐 사용하기

인덱스 시그니쳐의 문제점

1. 잘못된 키를 포함해 모든 키를 허용한다.
2. 특정 키가 필요하지 않다.
3. 키마다 다른 타입을 가질 수 없다.
4. 타입스크립트 자동완성 기능이 지원되지 않는다.

인덱스 시그니쳐를 사용 해야 하는경우

• 런타임 때 까지, 객체의 속성을 알 수 없을 경우.
• 이 때사용하게 된다면, 안전한 접근을 위해 인덱스 시그니쳐 값 타입에 undefined 를 추가하도록 하자.
• 인덱스 시그니쳐의 대안은 Record, 매핑된 타입
• 하지만 위 역시 위험은 따르기 때문에 왠만하면 정확한 타입을 사용하자.

number 인덱스 시그니쳐 보다는 Array, 튜플, ArrayLike 사용하기

• 자바스크립트는 number 타입을 객체의 키로 허용하지 않는다.
• 배열의 경우도 마찬가지로… 키는 무조건 문자열이다.
• 하지만 타입스크립트는 숫자 키를 허용하고 문자열 키와 다른 것으로 이용하도록 구현되어 있다.

interface Array<T> {
  // ...
  [n: number]: T;
}

이렇게 말이다.

• 하지만 런타임에는 에크마스크립트 표준이 서술하는 것 처럼 문자열 키로 인식하므로, 이 코드는 완전히 가상의 코드라고 할 수 있지만 타입체크 시점에 오류를 잡을 수 있어서 유용하다.
• 인덱스 시그니쳐가 number 로 표기되어있다면 입력한 값이 number 여야 한다는 것을 의미하지만, 실제 런타임에 사용되는 key 의 타입은 string 이 된다…!!
• 따라서 왠만하면 number 인덱스 시그니쳐는 사용하지 말자.

ArrayLike

interface ArrayLike<T> {
  readonly length: number;
  readonly [n: number]: T;
}

• 배열 메서드 (push, concat) 과 같은 타입은 정의되어 있지 않아서 사용할 수 없다.
• 튜플 처럼 사용할 수 있으며 인덱스로의 접근과 length 접근만 허용한다.

변경 관련된 오류를 방지하기 위해 readonly 사용하기

Readonly 배열의 특징

• 배열의 요소를 읽을 수 있지만, 쓸 수는 없다.

• length를 읽을 수 있지만, 바꿀 수 없다.

• 배열을 변경하는 pop을 비롯한 다른 메서드를 호출 할 수 없다.

• number[] 는 readonly number[] 보다 기능이 많기 때문에, readonly number[] 의 서브타입이 된다.

• 따라서 변경 가능한 배열을 readonly 배열에 할당 가능하다. (하지만 그 반대는 불가능!)

얕게 (shallow) 동작하는 readonly

readonly string[][]; // 1번

(readonly string[])[]; //2번

• 1번 : 변경 가능한 배열의 readonly 배열

• 2번 : readonly 배열의 변경 가능한 배열

• Readonly 제네릭도 얕게 동작한다.

const 와 readonly 의 차이

• const 는 참조타입의 경우 메서드를 통해서 수정가능 할 수 있다.
• 명시적으로 readonly 타입을 지정해줄 경우, 참조타입의 수정 가능한 메서드들을 사용 할 수 없게 되어서 지역변수로서 나타나는 버그들을 해결 해줄 수 있다.

추론 가능한 타입을 사용해 장황한 코드 방지하기

타입스크립트는 타입추론을 잘 해준다. 하지만 타입 추론을 잘해줌에도 불구하고, 명시적으로 타입핑을 해야할 때는 언제일까?

1. 객체 리터럴을 정의할 떄

why

• 잉여 속성 체크를 해준다.
• 변수가 사용되는 순간이 아닌, 할당하는 시점에 오류가 표시되도록 해준다.

2. 함수의 반환값을 정의 할 때

why

• 리턴 타입을 명시해주지 않으면, 함수 내부에서 잘못된 return error 를 잡아주지 못한다. 즉, 구현부에서 에러가 나는게 아니라 실행부, 해당 함수를 사용하는 곳에서 에러가 난다.
• 함수에 대해 더 명확하게 알 수 있다.
• 명명된 타입을 사용 하기 위해서.

다른 타입에는 다른 변수를 사용하기

why?

1. 서로 관련이 없는 두 개의 값을 분리한다.
2. 변수명을 더 구체적으로 지을 수 있다.
3. 타입 추론을 향상시키며, 타입 구문이 불필요해진다.
4. 타입이 좀 더 간결해진다.
5. let 대신 const 로 변수를 선언할 수 있다.

• 타입이 바뀌는 변수는 되도록 피해야 하며, 목적이 다른 곳에는 별도의 변수명을 사용하자.

타입 넓히기

• 런타임에 모든 변수는 유일한 값을 가진다.
• 하지만, 타입스크립트가 작성된 코드를 체크하는 정적 분석 시점에 변수는 (런타임 시 가질 수 있는 ) 가능 한 값들의 집합인 타입을 가진다.
• 상수를 사용해서 변수를 초기화 할 때, 타입을 명시하지 않으면 타입 체커는 타입을 결정해야 한다.
• 즉, 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추해야 한다는 뜻이다. => 넓히기(widening)

interface Vector3 {
  x: number;
  y: number;
  z: number;
}
function getComponent(vector: Vector3, axis: 'x' | 'y' | 'z') {
  return vector[axis];
}

let x = 'x';
let vec = { x: 10, y: 20, z: 30 };
getComponent(vec, x);
// 런타임시 동작은 잘 되는데 편집기에서 아래와 같은 오류 나옴
// ~ 'string' 형식의 인수는 "x" | "y" | "z" 형식의 매개변수에 할당될 수 없습니다.

• getComponent 함수는 두번째 매개변수에 “x” | “y” | “z” 타입을 기대했지만 x 의 타입은 할당 시점에 넓히기가 동작해서 string 으로 추론되었다.
• 따라서 string 타입은 “x” | “y” | “z” 타입에 할당이 불가능하므로 오류가 난다.

넓히기의 과정 제어하기

• const 사용하기. (let 대신 const 를 사용하면 더 좁은 타입이 된다.)
• 하지만 const 역시 참조형의 경우 ..특히 배열의 경우 배열에 튜플 타입을 추론해야 할지, 요소들은 어떤 타입을 추론할지 알수없다. 객체도 마가지.
• 객체의 경우 타입스크립트의 넓히기 알고리즘은 각 요소를 let 으로 할당 된 것 처럼 다룬다.

타입스크립트의 기본 동작(추론)을 재정의 하기

1. 명시적 타입 구문 제공하기
2. 타입 체커에 추가적인 문맥을 제공하는 것. (함수의 매개변수로 값을 전달하기.)
3. const 단언문 사용하기.

const v2 = {
  x: 1 as const,
  y: 2,
};
// 타입은 { x: 1 ; y: number; }

const v3 = {
  x: 1,
  y: 2,
} as const;

// 타입은 { readonly x:1, readonly y:2 };

타입 좁히기

• 타입 넓히기의 반대
• 타입스크립트가 넓은 타입으로부터 좁은 타입으로 진행하는 과정

const el = document.getElementById('foo');
if (el) {
  el;
  el.innerHTML = ' wow '.blikc();
} else {
  el;
  alert('No Element');
}

• 만약 el 이 null 이면 분기문의 첫 번째 블록이 실행되지 않는다. 즉, 첫번째 블록에서 HTMLElement | null 타입의 null 타입을 제외하므로 더 좁은 타입이 되어 작업이 훨씬 쉬워진다.
• 타입 체커는 일반적으로 이러한 조건문에서 타입 좁히기를 잘해내지만, 타입 별칭이 존재한다면 그러지 않을 수 있다. -> 왜일까?! 타입별칭에 대한건 나중에 다룬다.

타입 좁히는 방법

1. 분기문에서 예외를 던지거나 함수를 반환하여 블록의 나머지 부분에서 변수의 타입을 좁힐 수도 있다.
2. instanceof 를 통해서 타입을 좁힌다. (분기문)
3. 속성 체크로 타입 체크한다. a in ab
4. Array.isArray 같은 내장함수로 타입 좁힌다.
5. 태그 붙여서 ‘태그된 유니온 or 구별된 유니온 or 서로소 유니온’ 만들기

• 서로소 유니온 타입을 사용하면, 서로 겹치지 않는 여러 경우 중 하나인 타입을 표현할 수 있다.
• 언제 유용할까..??

네트워크 요청: 요청은 성공하거나 실패하겠지만, 성공한 동시에 실패할 수는 없다.
데이터베이스에서 특정 아이디를 갖는 컬럼을 쿼리: 해당 컬럼이 있거나 없지만, 있으면서 없을 수는 없다.
어떤 파일명을 갖는 파일 내용을 읽어오는 경우: 해당 파일이 있거나 없지만, 있으면서 없을 수는 없다.

• 서로소 유니온 타입에서는 서로 겹치는게 없다. 따라서 switch 문을 사용해서 특정 타입이면 ~ 어떤 동작을 하도록 유도할 수 있다. https://ahnheejong.gitbook.io/ts-for-jsdev/06-type-system-deepdive/disjoint-union-type

// 사용자 정의 타입가드!

function isInputElement (el: HTMLElement): el is HTMLInputElement {
    return 'value' in el;
}

function getElementContent(el: HTMLElement){
     if(isInputElement(el){
          return el.value;
     }
}

function isDefined<T>(x: T | undefined): x is T {
  return x !== undefined;
}

• 주의해야할것… 자바스크립트에서 typeof null === 'object'

한꺼번에 객체 생성하기

• 속성을 객체에 각각 추가하지 말고 한꺼번에 객체로 만들어야 타입추론이 잘된다.

조건부로 객체에 속성 추가하기

function addOptional<T extends object, U extends object>(a: T, b: U | null): T & Partial<U> {
  return { ...a, ...b };
}

const pharaoh = addOptional(nameTItle, hasDates ? { start: -2589, end: -2566 } : null);

일관성 있는 별칭 사용하기

• 별칭..?! 아래와 같은 예시!

const state = { location: 1 };
const loc = state.location; // 요게 별칭!

• 별칭을 사용하면 타입스크립트가 타입을 좁히는 것을 방해한다
• 별칭의 값을 바꾸면 원본 객체의 값도 변경되기 때문이다.

비동기 코드에는 콜백 대신 async 함수 사용하기

콜백보다는 프로미스 사용하기

• 콜백보다 프로미스가 코드를 작성하기 쉽다.
• 콜백보다 프로미스가 타입 추론이 쉽다.
• 타입스크립트는 프로미스를 잘 추론한다!

프로미스를 생성하기 보다 async/await 생성하기

• 일반적으로 더 간결하고 직관적인 코드가 된다.
• async 함수는 항상 프로미스를 반환하도록 강제한다.
• async 함수에서 프로미스를 반환하면, 또 다른 프로미스로 래핑되지 않는다. 즉 반환타입이 Promise<Promise<T>> 가 아니라, Promise<T> 가 된다.

타입 추론에 문맥이 어떻게 사용되는지 이해하기

• 타입스크립트는 타입을 추론할 때, 단순히 값만 고려하지 않는다! 값이 존재하는 곳의 문맥까지 살핀다.

type Language = 'JavaScript' | 'TypeScript';

function setLanguage(language: Language) {}

setLanguage('JavaScript'); // 정상

let language = 'JavaScript';
setLanguage(language); // Error
// 'string' 형식의 인수는 'Language' 형식의 매개변수에 할당 될 수 없습니다.

• why?
• 타입스크립트는 할당 시점에 타입을 추론한다.
• 따라서 string 으로 추론된것…

해결방법

1. 타입선언하기

let language: Language = 'JavaScript';

2. 상수로 만들기

const language = 'JavaScript';

• 타입체커에게 language 변수는 변할 수 없다고 알려줘서 타입을 좁힌다.

튜플 사용

function panTo(where:[number,number]){}

panTo([10,20]); // 정상

conset loc = [10,20];
panTo(loc);
// number[] 형식의 인수는
// [number,number] 형식의 매개변수에 할당될 수 없습니다.

• const 도 안먹힌다. 왜? 당연히 참조타입이기 때문에!

해결하기 as const

function panTo(where: [number, number]) {}

const loc = [10, 20] as const;
panTo(loc);
// Error: readonly[10,20] 형식은
// 변경가능한 형식 [number,number] 에 할당 할 수 없습니다.

• panTo 의 매개변수 타입을 readonly 로 바꿔야함.
• as const 는 위와같이 문맥 손실과 관련된 문제를 깔끔하게 해결하지만, 단점이있음.
• 타입 정의에 실수가 있다면 오류는 타입 정의가 아니라 호출되는 곳에서 발생한다는 것.

유효한 상태만 표현하는 타입을 지향하기

interface State {
  pageText: string;
  isLoading: boolean;
  error?: string;
}

위와 같은 타입이 있다면..

• isLoading 이 true 이고 동시에 error 값이 존재하는 상태..를 우리는 위의 타입으로 알 수 없다.
• 즉 위의 타입은 isLoading 이 true 이면서 error 값이 설정되는 무효한 상태를 허용해버린다!

interface RequestPending {
  state: 'pending';
}

interface RequestError {
  state: 'error';
  error: string;
}

interface RequestSuccess {
  state: 'ok';
  pageText: string;
}

type RequestState = RequestPending | RequestError | RequestSuccess;

interface State {
  currentPage: string;
  requests: { [page: string]: RequestState };
}

사용할 때는 너그럽게, 생성할 때는 엄격하게

• 함수의 매개변수 타입은 타입의 범위가 넓어도 된다. (사용 시)
• 반환되는 결과의 타입은 범위가 더 구체적이어야 한다. (생성 시)

문서에 타입 정보를 쓰지 않기

• 주석과 변수명에 타입 정보명을 적는 것은 피하기.

타입 주변에 null 값 배치하기

• B 변수가 A 변수의 값으로부터 비롯되는 값이라면, A 가 null 이 될 수 없을때 B 역시 null 이 될 수 없고, 그 반대로 A 가 null 이 될 수 있다면 B 역시 null 이 될 수 있다.
• 값이 전부 null 이거나 전부 null 이 아닌 경우로 분명히 구분된다면, 값이 섞여 있을 때 보다 다루기 쉽다.
• 타입에 null 을 추가하는 방식으로 이러한 경우를 모델링 할 수 있다.

function extent(nums: number[]) {
  let min, max;
  for (const num of nums) {
    if (!min) {
      min = num;
      max = num;
    } else {
      min = Math.min(min, num);
      max = Math.max(max, num);
      // 'number' | 'undefined' 형식의 인수는 'number' 형식의 매개변수에 할당 될 수 없습니다.
    }
  }
  return [min, max];
}

• nums 배열이 0 으로 시작하면..제대로 된 동작이 안된다. (0이 Nullish 하므로)
• nums 배열이 비어있다면 함수는 [undefined,undefined] 를 반환한다.
• 위에서 undefined 를 min 에서만 제외했고, max 는 제외하지 않아서 오류가 발생한다. 그렇다고 max 에 대한 체크를 추가하면…버그가 또 발생한다!!
• 더 나은 해법을 찾아보기

function extent(nums: number[]) {
  let result: [number, number] | null = null;
  for (const num of nums) {
    if (!result) {
      result = [num, num];
    } else {
      result = [Math.min(result[0], num), Math.max(result[1], num)];
    }
  }
  return result;
}

• extent 의 결괏값으로 단일 객체를 사용함으로써 설계 개선

• 따라서 타입스크립트가 null 값 사이의 관계 (min이 null 이면 max 도 null , vice versa)를 안다.

• 즉 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 설계하지 말기

• API 작성 시에는 반환 타입을 큰 객체로 만들고 반환 타입 전체가 null 이거나 null 이 아니게 만들어야 한다.

• 클래스를 만들 때는, 필요한 모든 값이 준비 되었을 때 생성하여 null 이 존재하지 않도록 하자.

유니온의 인터페이스 보다는 인터페이스의 유니온 사용하기

interface Layer {
  layout: FillLayout | LineLayout | PointLayout;
  paint: FillPaint | LinePaint | PointPaint;
}

• 위의 타입의 경우..
• layout 이 FillLayout 이면서 paint 가 LinePaint 인건 말이 되지 않는데 이러한 조합을 허용하게 된다!
• 아래와 같이 타입 계층을 분리하자. 서로소 유니온 타입으로 만들 수 있다.

interface FillLayer {
  layout: FillLayout;
  paint: FillPaint;
}

interface LineLayer {
  layout: LineLayout;
  paint: LinePaint;
}

interface PointLayer {
  layout: PointLayout;
  paint: PointPaint;
}

type Layer = FillLayer | LineLayer | PointLayer;

• 더 나아가서 태그된 유니온 타입으로 리팩터링하자

interface FillLayer {
  type: 'fill';
  layout: FillLayout;
  paint: FillPaint;
}

interface LineLayer {
  type: 'line';
  layout: LineLayout;
  paint: LinePaint;
}

interface PointLayer {
  type: 'point';
  layout: PointLayout;
  paint: PointPaint;
}

type Layer = FillLayer | LineLayer | PointLayer;

• 태그된 유니온.. 태그란? 런타임에 어떤 타입의 Layer 가 사용되는지 판단하는데 쓰인다.
• 위의 예시에서 태그는 type 이 된다!

예시 2

interface Person {
  name: string;
  placeOfBirth?: string;
  dateOfBirth?: number;
}

• placeOfBirth 속성과 dateOfBirth 속성이 둘 다 동시에 있거나 없어야 하는데, 하나만 존재하는 조합이 생성 가능하다

interface Person {
  name: string;
  birth?: {
    place: string;
    date: number;
  };
}

• 위처럼 두개의 속성을 하나의 객체로 모으자.
• null 값을 경계로 두는것과 비슷하구만!

string 타입보다 더 구체적인 타입 사용하기

1. 변수의 범위를 보다 정확하게 표현하고 싶다면 string 타입 보다는 문자열 리터럴 타입의 유니온 타입을 사용합시다.
2. 객체 속성 이름을 함수 매개변수로 받을 때는 string 보다 keyof T 를 사용합시다.

function pluck(records: any[], key: string): any[] {
  return records.map((r) => r[key]);
}

타입시그니처 개선 1 번

function pluck<T>(records: T[], key: string): any[] {
  return records.map((r) => r[key]);
}

• 에러남
• key 타입이 string 이라서 너무 넓어서.

개선 3번

function pluck<T>(records: T[], key: keyof T): T[keyof T][] {
  return records.map((r) => r[key]);
}

• 하지만.. 만약 T[‘date’] 는 타입이 Date 이구.. T[‘title’] 타입이 String 이라면.. 위의 T[keyof T][] 타입은 (string | Date) [] 이 된다.
• 그런데… key 값이 하나만 들어가면, 즉 매개변수로 만약 ‘date’ 만 들어가는데 반환타입이 (string | Date) [] 인거면 너무 넓다!
• 따라서 개선하기 위해서 keyof T 의 부분집합으로 두번째 제너릭 매개변수를 넣자

개선 2번

function pluck<T, K extends keyof T>(records: T[], key: K): T[K][] {
  return records.map((r) => r[key]);
}

부정확한 타입보다는 미완성의 타입 사용하기

• 타입이 없는 것 보다 부정확한게 더 나쁘다.
• 정확하게 타입을 모델링 할 수 없다면, 부정확하게도 모델링하지말자.

데이터가 아닌, API 와 명세를 보고 타입 만들기

• 예시 데이터를 참고해 타입을 생성하면 눈앞에 있는 데이터들만 고려하게 되므로 예기치 않은 곳에서 오류가 발생 할 수 있다.
• 데이터에 드러나지 않는 예외적인 경우들이 문제가 될 수 있으므로, 데이터보다는 명세로부터 코드를 생성하자.

해당분야의 용어로 타입 이름 짓기

• 자체적으로 용어를 만들어 내려고 하지 말고, 해당 분야에 이미 존재하는 용어를 사용하자.
• 동일한 의미를 나타낼 때는 같은 용어를 사용하자.
• data, info, thing, item, object, entity 와 같은 모호하고 의미 없는 이름은 피하자.
• 이름을 지을 때는 포함된 내용이나, 계산 방식이 아니라 데이터 자체가 무엇인지 고려하자. INodeList 보다 Directory 가 더 의미있는 이름이다.
  • 왜? Directory 는 구현의 측면이 아니라 개념적인 측면에서 디렉터리를 생각하게 한다.
  • 좋은 이름은 추상화의 수준을 높이고, 의도치 않은 충돌의 위험성을 낮춘다.

공식 명칭에는 상표를 붙이기

• 구조적 타이핑의 특성 때문에 코드가 이상한 결과를 낼 수 있다.

interface Vector2D {
  x: number;
  y: number;
}

function calculateNorm(p: Vector2D) {}

const vec3D = { x: 3, y: 4, z: 1 };
calculateNorm(vec3D); // 정상!!

• 수학적으로는 2차원 벡터를 사용해야 이치에 맞는다.
• calculateNorm 함수가 3차원 벡터를 허용하지 않게 하려면 공식 명칭(Nominal typing) 을 사용하자
• 공식 명칭을 사용한다는 것은, 타입이 아니라 값의 관점에서 Vector2D 라고 말하는 것!

interface Vector2D {
  _brand: '2D';
  x: number;
  y: number;
}

function calculateNorm(p: Vector2D) {}

const vec3D = { x: 3, y: 4, z: 1 };
calculateNorm(vec3D); // _brand 속성이 형식에 없습니다.

• 브랜딩 기법은 타입 시스템에서 동작하지만, 런타임에 브랜드를 검사하는 것과 동일한 효과를 얻을 수 있다.
• 타입시스템이기 때문에 런타임 오버헤드를 줄일 수 있고, 추가속성을 붙일 수 없는 string 이나 number와 같은 내장 타입도 상표화할수 있다.

type AbsoultePath = string & { _brand: 'abs' };

function listAbsolutePath(path: AbsoultePath) {
  // ..
}

function isAbsolutePath(path: string): path is AbsoultePath {
  return path.startsWith('/');
}

function f(path: string) {
  if (isAbsolutePath(path)) {
    listAbsolutePath(path);
  }
  listAbsolutePath(path); // error
}

• 이런 식으로 상표(brand)를 붙여서, 타입이 특정한 성격을 가졌는지 구분할 수 있다.
• 이는, 런타임에 if 문으로 체크하는 것과 같은 효과를 내지만, 런타임이 아니라 타입시스템으로 작동하기 때문에 런타임 오버헤드가 없다!

any 타입은 가능한 한 좁은 범위에서만 사용하기

type Bar = 'example';
function processBar(b: Bar) {}

function f1() {
  const x: any = 'foo';
  processBar(x); // 이렇게 하지마시오
}

function f2() {
  const x = 'foo';
  processBar(x as any); // 이게 낫다.
}

• 왜 2번이 낫는가..?
• 2번에서 any 타입은 processBar 함수의 매개변수에서만 사용된 표현식이므로 다른 코드에 영향을 미치지 않기 때문이다.
• 즉, f1 에서 함수의 마지막까지 x 의 타입이 any 인 반면, f2 에서는 processBar 호출 이후 x 가 다시 원래 타입으로 돌아간다.
• 또한 f1 에서 설상가상 x 를 리턴한다면..?! -> 해당 함수를 사용하는 모든 곳에서 any 타입이 전염병처럼 퍼진다.
• 비슷한 관점에서 타입스크립트가 함수의 반환 타입을 추론 할 수 있는 경우에도 함수의 반환 타입을 명시해야 한다. 함수의 반환 타입을 명시하여 any 타입이 함수 바깥으로 영향을 미치는 것을 방지 할 수 있기 때문이다.

any 를 구체적으로 변형해서 사용하기

• any 를 사용 할 때는 정말 모든 값이 허용되어야 하는지 검토하고 사용하기.
• any 보다 정확하게 모델링 할 수 있도록 any[] 또는 {[id:string]:any} 를 사용하자

{[key: string]: any} 와 object 타입의 차이점

• object 타입은 객체의 키를 열거할 수 있지만, 속성에 접근 할 수 없다.

함수 안으로 타입 단언문 감추기

• 외부로 드러난 타입 정의는 간단하지만, 내부 로직이 복잡해서 안전한 타입으로 구현하기 어려운 경우가 많다.
• 함수 내부에는 타입 단언을 사용하고, 함수 외부로 드러나는 타입 정의를 정확히 명시하는 정도로 타협을 봐도 괜찮다.
• 프로젝트 전반에 위험한 타입 단언문이 드러나 있는 것 보다, 제대로 타입이 정의된 함수 안으로 타입 단언문을 감추는게 더 좋은 설계이다.

any 의 진화를 이해하기

• any 가 진화한다는 것은, 원래 any 타입이 코드에 따라서 특정 타입으로 좁혀지는 현상!

any 진화되는 경우

• 암시적 any 타입에 어떤 값을 할당 할 때 any 가 특정 타입으로 좁혀져서 진화한다.

• 하지만, 어떤 변수가 암시적 any 상태일 때 값을 읽으려고 하면 오류가 발생한다.

• 명시적으로 any 를 선언한 경우 any 진화가 일어나지 않는다.

• 암시적 any 타입은 함수를 호출해도 진화하지 않는다. 오로지 값 할당으로 진화한다.

• any 를 진화시키는 방식 보다 명시적 타입 구문을 사용하는 것이 안전한 타입을 유지하는 방법이다!

모르는 타입의 값에는 any 대신 unknown 을 사용하기

any 타입

• 어떠한 타입이든 any 타입에 할당 가능하다.
• any 타입은 어떠한 타입으로도 할당 가능하다. (never 예외)

unknown 타입

• 어떠한 타입이든 unknown 타입에 할당 가능하다.
• unknown 은 오로지 unknown 과 any 에만 할당 가능하다.

any, unknown, never 차이

• unknown 은 타입스크립트의 최상위 타입이다. 따라서 타입스크립트에 존재하는 모든 타입을 할당 할 수 있다. 다시 말해서 모든 타입의 공통적인 연산 밖에 할 수 없고, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 해당 타입에만 존재하는 프로퍼티 접근 혹은 연산을 할 수 없습니다.
  • 따라서 unknown 은 타입가드를 필요로 하여 런타임에러를 방지하기 때문에 unknown 을 더 선호합니다.
• any 는 타입 검사를 항상 만족한다. 따라서 모든 타입의 연산을 할 수 있고, unknown 처럼 존재하지 않는 프로퍼티에 접근해도 컴파일러는 아무런 에러를 띄워주지 않느고 런타임에러를 띄운다.
• never 는 모든 타입의 하위 타입이다. 따라서, 그 어떤 값도 never 타입에 할당 할 수 없다.
  • 그러면 never 를 언제 사용하냐? 함수가 아무것도 반환하지 않아야 할 때, never 를 반환타입으로 지정하여 타입추론 예외를 제거한다.
  • 반환 타입을 void 로 했을 때와 차이점은 void 는 null 혹은 undefined 값의 반환을 허용한다는 것이고, never 는 그렇지 않다는 것이다.

몽키 패치 보다는 안전한 타입을 사용하기

• 몽키패치란, 자바스크립트에서 객체와 클래스에 임의의 속성을 추가 할 수 있는 자바스크립트의 기능!

document.monkey = 'Hey';
// Error

// 좋지 못한 해결방법1 any 단언문 사용하기
(document as any).monkey = 'Hey';

• 하지만 최선의 해결책은 document 혹은 DOM 으로부터 데이터를 분리하는 것이다.
• 분리할 수 없을 경우 두가지 해결책이 존재한다.

1. interface 특수 기능인 ‘보강’ 사용하기

interface Document {
  monkey: string;
}

• 타입이 더 안전하다.
• 몽키패치가 어떤 부분에 적용되었는지 정확한 기록이 남는다.
• 속성에 자동완성을 사용 할 수 있다.
• 모듈 관점에서 제대로 동작하게 하려면 global 선언을 추가해야한다.

declare global {
  interface Document {
    monkey: string;
  }
}

• 하지만 위와 같이 보강을 전역적으로 적용하면 코드의 다른 부분이나 라이브러리로부터 분리할 수 없다.
• 그리고 애플리케이션이 실행되는 동안 속성을 할당하면 실행 시점에서 보강을 적용할 방법이 없다 ㅠㅠ
• 특히 웹 페이지 내 HTML 엘리먼트를 조작할 때, 어떤 엘리먼트는 속성이 있고, 어떤 엘리먼트는 속성이 없는 문제가 있다.

2. 더 구체적인 타입 단언문 사용하기

interface MonkeyDocument extends Document {
  monkey: string;
}

(document as MonkeyDocument).monkey = 'hey';

devDependencies 에 typescript 와 @types 추가하기

dependencies

• 현재 프로젝트를 실행하는데 필수적인 라이브러리들

devDependencies

• 현재 프로젝트를 개발하고 테스트하는 데 사용되지만, 런타임에는 필요 없는 라이브러리들

peerDependencies

• 런타임에 필요하긴 하지만, 의존성을 직접 관리하지 않는 라이브러리들
• 대표적인 예로 플로그인. 제이쿼리의 플러그인은 다양한 버전의 제이쿼리와 호환되므로 제이쿼리의 버전을 플러그인에서 직접 선택하지 않고 플러그인이 사용되는 실제 프로젝트에서 선택하도록 만들때 사용한다.

타입스크립트를 시스템 레벨로 설치하지 않는 이유

• 팀원들 모두가 항상 동일한 버전을 설치한다는 보장이 없다.
• 프로젝트를 셋업 할 때 별도의 단계가 추가된다.

타입 선언과 관련된 세 가지 버전 이해하기

세가지 버전

1. 라이브러리의 버전
2. 타입 선언(@types)의 버전
3. 타입스크립트의 버전

TsDocs 사용하기

• 타입 정의에 주석처럼 사용하기!
• 너무 장황하게 쓰지 말기
• 익스포트 된 함수, 클래스, 타입에 주석을 달 때는 TSDocs 형태를 사용하기
• 주석에 타입 정보 포함하지 않기

콜백에서 this 에 대한 타입 제공하기

• 자바스크립트에서 let 이나 const 로 선언된 변수는 렉시컬 스코프이지만, this 는 동적 스코프이다.
• 즉, 동적 스코프의 값은 ‘정의된 방식’이 아니라 ‘호출된 방식’에 따라 달라진다!

class C {
  vals = [1, 2, 3];
  logSquares() {
    for (const val of this.vals) {
      console.log(vals * vals);
    }
  }
}

const c = new C();
const method = c.logSquares;
method(); // error

그리서 아래와 같이 명시적으로 this 를 바인딩 해주어야 한다.

class C {
  vals = [1, 2, 3];
  logSquares() {
    for (const val of this.vals) {
      console.log(vals * vals);
    }
  }
}

const c = new C();
const method = c.logSquares;
method.call(c); // 바인딩 ㅎㅎ

콜백 함수에서 this 를 사용해야 한다면 타입 명시해주기

function addKeyListener{
  el: HTMLElement,
    fn: (this: HTMLElement, e: (KeyboardEvent)=>void )
}

오버로딩 타입 보다는 조건부 타입을 사용하기.

function double(x: number | string): number | string;
function double(x: any) {
  return x + x;
}

• double 함수에 string 또는 number 타입의 매개변수가 들어올 수 있다.
• 그래서 아래와 같이 오버로딩을 사용해서 유니온 타입을 추가했다.
• 하지만..문제점이 있다.
• string 타입을 매개변수로 넣으면 반환은 string 이 된다. vice versa
• but.. 위의 예제에 따르면 string 타입을 넣어도 number 반환타입이 되는 경우도 포함되어 있다.
• 제네릭을 사용해서 해결해보쟝!!

function double<T extends number | string>(x: T): T;
function double(x: any) {
  return x + x;
}

const num = double(12); // 타입이 12
const str = double('x'); // 타입이 "x"

• 타입이 너무 과하게 구체적이다.
• 그러면 여러가지 타입 선언으로 분리해보쟈!!

function double(x: number): number;
function double(x: string): string;
function double(x: any) {
  return x + x;
}

const num = double(12); // 타입이 number
const str = double('x'); // 타입이 string

• 아주 잘 동작한다.
• 근데 아직도 문제가 있다. string 이나 number 타입의 값으로는 잘 동작하지만, 유니온 타입 관련해서 문제가 생긴다.

function double(x: number): number;
function double(x: string): string;
function double(x: any) {
  return x + x;
}

const num = double(12); // 타입이 12
const str = double('x'); // 타입이 "x"

function f(x: number | string) {
  return double(x); // Error 'string' | 'number' 형식의 인수는
  // 'string' 형식의 매개변수에 할당될 수 없습니다!!
}

• 왜..?!
• 타입스크립트는 오버로딩 타입 중에서 일치하는 타입을 찾을 때 까지 순차적으로 검색한다.
• 그래서 오버로딩 타입의 마지막 선언(string 버전)까지 검색했을 때, string| number 타입은 string 에 할당될 수 없는 것이다..ㅎㅎ
• 그러면 세번째에 오버로딩 타입에 유니온타입을 추가하면 되지 않을까?! -> 맨 처음 문제.. string 인수 -> number 반환 (vice versa) 가 남아있음
• 이를 해결하기 위한 좋은 방법은 바로 조건부 타입을 사용하는 것!

조건부 타입 사용하기

function double<T extends number | string>(x: T): T extends string ? string : number;
function double(x: any) {
  return x + x;
}

• T 가 string 의 부분집합이면 반환 타입이 string 이다
• 그 외의 경우는 반환 타입이 number 이다.