📄 Item06 ~ 10

Item06. 편집기를 사용하여 타입 시스템 탐색하기

• 편집기는 코드를 빌드하고 타입 시스템을 익힐 수 있는 최고의 수단이다.
• 편집기는 타입스크립트가 언제 타입 추론을 수행할 수 있는지에 대한 개념을 잡게 해 주는데, 이 개념을 확실히 잡아야 간결하고 읽기 쉬운 코드를 작성할 수 있다.
• 편집기마다 조금씩 다르지만 보통의 경우 심벌 위에 마우스 커서를 대면 타입스크립트가 그 타입을 어떻게 판단하고 있는지 확인할 수 있다.
• 객체에서는 개별 속성을 살펴봄으로써 타입스크립트가 어떻게 각각의 속성을 추론하는지 살펴볼 수 있다.
• 실제 코드에서 함수 호출이 길게 이어진다면 추론 정보는 디버깅하는데 꼭 필요하다.
• 편집기상의 타입 오류를 살펴보는 것도 타입 시스템의 성향을 파악하는 데 좋은 방법이다.

---

• 오류 파악 예시

function getElement(elOrId: string | HTMLElement | null): HTMLElement {
  if (typeof elOrId === 'object') {
    return elOrId; // 'HTMLElement | null' 형식은 'HTMLElement' 형식에 할당할 수 없습니다.
  } else if (elOrId === null) {
    return document.body;
  } else {
    const el = document.getElementById(elOrId);
    return el; // 'HTMLElement | null' 형식은 'HTMLElement' 형식에 할당할 수 없습니다.
  }
}

• 위 예제에서 첫 번째 분기 처리문에서 오류가 발생한 이유는 typeof null도 "object" 이므로 elOrId는 여전히 해당 분기문 내에서 null 일 가능성이 있다.
  • 그렇기 때문에 처음에 null 체크를 추가해서 바로잡아야 한다.
• 두 번째 오류는 document.getElementById가 여전히 null을 반환할 수 있기 때문에 첫 번째 오류와 동일하게 null 체크를 해줘야 한다.

---

• 타입 선언(d.ts 파일)은 처음에는 이해하기 어렵지만 타입스크립트가 무엇을 하는지, 어떻게 라이브러리가 모델링되었는지, 어떻게 오류를 찾아낼지 살펴볼 수 있는 훌륭한 수단이 된다.

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

• 코드가 실행되기 전, 즉 타입스크립트가 오류를 체크하는 순간에는 '타입'을 가지고 있다.
  • '할당 가능한 값들의 집합'이 타입이라고 생각하면 된다.
  • 이 집합은 타입의 '범위'라고 부르기도 한다.

• 가장 작은 집합은 아무 것도 포함하지 않는 공집합이며, 타입스크립트에서는 never 타입이다.

  • 이 타입으로 선언된 변수의 범위는 공집합이므로 아무런 값도 할당할 수 없다.

• 유닛 타입(리터럴 타입) : never 타입 다음으로 작은 집합인 한 가지 값만 포함하는 타입

• 유니온 타입 : 값 집합들의 합집합을 의미하며 타입들을 |으로 묶어준다.

• '할당 가능한'의 의미

  • 집합의 관점에서, '~의 원소(값과 타입의 관계)' 또는 '~의 부분집합(두 타입의 관계)'을 의미

• 집합의 관점에서, 타입 체커의 주요 역할은 하나의 집합이 다른 집합의 부분 집합인지 검사하는 것이라고 볼 수 있다.

• 인터섹션 타입 : 두 타입의 교집합을 의미하며 & 연산자로 이어준다.

interface Person {
  name: string;
}

interface Lifespan {
  birth: Date;
  death?: Date;
}

type PersonSpan = Person & Lifespan;

const ps: PersonSpan = {
  name: 'abc',
  birth: new Date('1910/01/01'),
  death: new Date('1966/12/21'),
}; // 정상

• 당연히 앞의 세 가지보다 더 많은 속성을 가지는 값도 PersonSpan 타입에 속한다.

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

• 일반적으로는 인터섹션보다 extends 키워드를 사용해서 타입을 선언한다.

interface Person {
  name: string;
}

interface PersonSpan extends Person {
  birth: Date;
  death?: Date;
}

• extends 의 의미는 '~에 할당 가능한'과 비슷하게, '~의 부분 집합'이라는 의미로 받아들일 수 있다.
• extends 키워드는 제네릭 타입에서 한정자로도 쓰이며, 이 문맥에서는 '~의 부분 집합'을 의미하기도 한다.

• keyof를 통해 할당과 상속 관계 살펴보기

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

type PointKeys = keyof Point; // 타입은 "x" | "y"

function sortBy<K extends keyof T, T>(vals: T[], key: K): T[] {
  // ...
}

const pts: Point[] = [
  { x: 1, y: 1 },
  { x: 2, y: 0 },
];

sortBy(pts, 'x'); // 정상, 'x'는 'x' | 'y'를 상속 (즉, keyof T)
sortBy(pts, 'y'); // 정상, 'y'는 'x' | 'y'를 상속
sortBy(pts, Math.randomm() < 0.5 ? 'x' : 'y'); // 정상, 'x' | 'y는 'x' | 'y'를 상속
sortBy(pts, 'z'); // '"z"' 형식의 인수는 '"x" | "y"' 형식의 매개변수에 할당될 수 없습니다.

• 타입이 집합이라는 관점을 배열과 튜플의 관계 역시 명확하게 만든다.

const triple: [number, number, number] = [1, 2, 3];
const double: [number, number] = triple;
// '[number, number, number]' 형식은
// '[number, number]' 형식에 할당할 수 없습니다.
// 'length' 속성의 형식이 호환되지 않습니다.
// '3' 형식은 '2' 형식에 할당할 수 없습니다.

• 쌍에서 길이를 체크하는 것은 합리적이며, 이보다 나은 방법은 없을 것이다.

💡 결론!

타입을 값의 집합으로 생각하면 이해하기 편하고 '상속', '할당 가능', '서브 타입'은 '부분 집합'과 같은 의미로 받아들이면 편하다.

Item08. 타입 공간과 값 공간의 심벌 구분하기

interface Cylinder {
  radius: number;
  height: number;
}

const Cylinder = (radius: number, height: number) => ({ radius, height });

• interface Cylinder에서 Cylinder는 타입으로 쓰이고, const Cylinder에서 Cylinder는 이름은 같지만 값으로 쓰이며, 서로 아무런 관련도 없다.
  • 상황에 따라 Cylinder는 타입으로 쓰일 수도 있고, 값으로 쓰일 수도 있다.

function calculateVolume(shape: unknown) {
  if (shape instanceof Cylinder) {
    console.log(shape.radius); // '{}' 형식에 'radius' 속성이 없습니다.
  }
}

• 하지만 위 코드와 같은 오류가 발생하곤 한다.
  • instanceof를 이용해 shape가 Cylinder 타입인지 체크하려고 하는 구문인데, instancof는 자바스크립트의 런타임 연산자이고, 값에 대해서 연산을 한다.
  • 그래서 instanceof Cylinder는 타입이 아니라 함수를 참조하게 된다.

• class와 enum은 상황에 따라 타입과 값 두 가지 모두 가능한 예약어이다.

class Cylinder {
  radius = 1;
  height = 1;
}

function calculateVolume(shape: unknown) {
  if (shape instanceof Cylinder) {
    console.log(shape); // 정상, 타입은 Cylinder
    console.log(shape.raidus); // 정상, 타입은 number
  }
}

• 클래스가 타입으로 쓰일 때는 형태(속성과 메서드)가 사용되는 반면, 값으로 쓰일 대는 생성자가 사용된다.

• typeof도 타입과 값에서 쓰일 때 서로 다른 기능을 한다.

type T1 = typeof p; // 타입은 Person
type T2 = typeof email; // 타입은 (p: Person, subject: string, body: string) => Response

const v1 = typeof p; // 값은 "object"
const v2 = typeof email; // 값은 "function"

const v = typeof Cylinder; // 값이 "function"
type T = typeof Cylinder; // 타입이 typeof Cylinder(Cylinder가 인스턴스의 타입이 아니라 실제로는 new 키워드를 사용할 때 볼 수 있는 생성자 함수이다.)

• 타입의 관점

  • 값을 읽어서 타입스크립트의 타입을 반환
  • 타입 공간의 typeof는 보다 큰 타입의 일부분으로 사용할 수 있고, type 구문으로 이름을 붙이는 용도로도 사용할 수 있음

• 값의 관점

  • 자바스크립트 런타임의 typeof 연산자가 된다.
  • 대상 심벌의 런타임 타입을 가리키는 문자열을 반환
  • 자바스크립트에는 과거부터 지금까지 단 6개(string, number, boolean, undefined, object, function)의 런타임 타입만이 존재

• InstanceType 이라는 유틸리티 타입을 통해 생성자의 타입과 인스턴스 타입을 전환할 수 있다.

• 속성 접근자인 []는 타입으로 쓰일 때에도 동일하게 동작한다.
  • 그러나 obj['field']와 obj.field는 값이 동일하더라도 타입은 다를 수 있다.
  • 따라서 타입의 속성을 얻을 때에는 반드시 첫 번째 방법인 obj['field']를 사용해야 한다.

const first: Person['first'] = p['first']; // 또는 값 작성시 p.first

• 이 때 인덱스 위치에는 유니온 타입과 기본형 타입을 포함한 어떠한 타입이든 사용할 수 있다.

type PersonEl = Person['first' | 'last']; // 타입은 string
type Tuple = [string, number, Date];
type TupleEl = Tuple[number]; // 타입은 string | number | Date

---

➕ 타입 공간과 값 공간 사이에서 다른 의미를 가지는 코드 패턴

• this 키워드
• &, | 키워드
  • 값으로 쓰이면 AND와 OR 연산
  • 타입으로 쓰이면 인터섹션 타입과 유니온 타입
• const는 새 변수를 선언하지만, as const는 리터럴 또는 리터럴 표현식의 추론된 타입을 바꿈
• extends 키워드
  • 서브 클래스(class A extends B) 또는 서브타입(interface A extends B) 또는 제네릭 타입의 한정자(Generic<T extends number>)를 정의할 수 있음
• in 키워드
  • 값으로 쓰이면 루프(for (key in object))
  • 타입으로 쓰이면 매핑된(mapped) 타입

---

⚠️ 구조 분해 문법 사용시 주의하자

function email(options: {person: Person, subject: string, body: string}) {}

// 자바스크립트에서 구조 분해 문법 사용시
function email({email, subject, body}) {}

// 타입스크립트에서 구조 분해 문법 잘못 사용한 예시
function email({
  person: Person, // 바인딩 요소 'Person'에 암시적으로 'any' 형식이 있습니다.
  subject: string, // 'string' 식별자가 중복되었습니다. 바인딩 요소 'string'에 암시적으로 'any' 형식이 있습니다.
  body: string, // 'string' 식별자가 중복되었습니다. 바인딩 요소 'string'에 암시적으로 'any' 형식이 있습니다.
})

• 값의 관점에서 Person과 string이 해석되었기 때문에 오류가 발생했다.
  • Person이라는 변수명과 string이라는 이름을 가지는 두 개의 변수를 생성하려한 것이다.
  • 문제를 해결하려면 아래와 같이 타입과 값을 구분해야 한다.

// 타입스크립트에서 구조 분해 문법을 올바르게 사용한 예시
function email({person, subject, body}: {person: Person, subject: string, body: string}) {}

---

Item09. 타입 단언보다는 타입 선언을 사용하기

(1) 타입 선언과 타입 단언

interface Person {
  name: string;
}

const alice: Person = { name: 'Alice' }; // 타입 선언
const bob = { name: 'Bob' } as Person; // 타입 단언

• 타입 단언보다는 타입 선언을 사용하는게 낫다.

const alice: Person = {}; // 'Person' 유형에 필요한 'name' 속성이 '{}' 유형에 없습니다.
const bob = {} as Person; // 오류 없음

• 타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다.
• 타입 단언은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 것이다.
• 타입 단언이 꼭 필요한 경우가 아니라면, 안전성 체크도 되는 타입 선언을 사용하는 것이 좋다.

(2) 화살표 함수의 타입 선언

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

• 위 코드에서 소괄호는 매우 중요한 의미를 지닌다.
  • (name): Person은 name의 타입이 없고, 반환 타입이 Person이라고 명시한다.
  • 그러나 (name: Person)은 name의 타입이 Person임을 명시하고 반환 타입은 없기 때문에 오류가 발생한다.

// 원하는 반환 타입까지 명시한 버전
const people: Person[] = ['alice', 'bob', 'jan'].map(
  (name): Person => ({name});
);

단, 함수 호출 체이닝이 연속되는 곳에서는 체이닝 시작에서부터 명명된 타입을 가져야 한다.

그래야 정확한 곳에 오류가 표시된다.

(3) 타입 단언이 필요한 경우

• 타입 체커가 추론한 타입보다 개발자가 직접 판단한 타입이 더 정확할 때 사용한다.

document.querySelector('#myButton').addEventListener('click', e => {
  e.currentTarget; // 타입은 EventTarget
  const button = e.currentTarget as HTMLButtonElement;
  button; // 타입은 HTMLButtonElement
})

• 타입스크립트는 DOM에 접근할 수 없기 때문에 #myButton이 버튼 엘리먼트인지 알지 못한다.
• 그리고 이벤트의 currentTarget이 같은 버튼이어야 하는 것도 알지 못한다.
• 개발자는 타입스크립트가 알지 못하는 정보를 가지고 있으므로 여기서는 타입 단언을 쓰는 것이 타당하다.

(4) non-null assertion

const elNull = document.getElementById('foo'); // 타입은 HTMLElement | null
const el = document.getElementById('foo')!; // 타입은 HTMLElement

• 접미사로 쓰인 !를 통해 타입 체커는 알지 못하지만 그 값이 null이 아니라고 확신할 수 있게 된다.
  • 만약 그렇지 않다면, null인 경우를 체크하는 조건문을 사용해야 한다.

(5) unknown 타입 단언

• A가 B의 부분 집합인 경우에 타입 단언문을 사용해 변환할 수 있다.
• 이러한 rule을 지키지 않는다면 오류가 발생하는데 이 때 unknown 타입으로 해결할 수 있다.
• 모든 타입은 unknown의 서브타입이기 때문에 이 타입이 포함된 단언문을 항상 동작한다.
• unknown 단언은 임의의 타입 간에 변환을 가능케 하지만, unknown을 사용한 이상 적어도 무언가 위험한 동작을 하고 있다는 걸 알 수 있다.

Item10. 객체 래퍼 타입 피하기

• 'primitive'.charAt(3);와 같은 코드에서 charAt은 string의 메서드가 아니면, string을 사용할 때 자바스크립트 내부적으로 많은 동작이 일어난다.
  • string 기본형에는 메서드가 없지만, 자바스크립트에는 메서드를 가지는 String 객체 타입이 정의되어 있다.
  • string 기본형에 charAt 같은 메서드를 사용할 때, 자바스크립트는 기본형을 String 객체로 래핑(wrap)하고, 메서드를 호출하고, 마지막에 래핑한 객체를 버린다.
• 다른 기본형에도 동일하게 객체 래퍼 타입이 존재한다.
  • number에는 Number, boolean에는 Boolean 등...
  • 이 래퍼 타입들 덕분에 기본형 값에 메서드를 사용할 수 있고, 정적 메서드(String.fromCharCode 같은)도 사용할 수 있다.
  • 그러나 보통은 래퍼 객체를 직접 생성할 필요가 없다.
• 타입을 선언할 때 객체 래퍼 타입으로 작성하지 않도록 주의하자.
  • 대부분의 라이브러리와 마찬가지로 타입스크립트가 제공하는 타입 선언은 전부 기본형 타입으로 되어 있다.
• 기본형 타입은 객체 래퍼에 할당할 수 있기 때문에 타입스크립트는 기본형 타입을 객체 래퍼에 할당하는 선언을 허용한다.
  • 그러나 기본형 타입을 객체 래퍼에 할당하는 구문은 오해하기 쉽고, 굳이 그렇게 할 필요도 없다.
  • 그냥 기본형 타입을 사용하자.