타입스크립트의 타입 시스템1 - 이펙티브 타입스크립트

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

기능

• 코드 자동 완성
• 명세 검사
• 검색
• 리팩토링

+ js 에서 typeof null 은 “object” 이므로 아래 코드는 오류가 발생한다.

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' 형식에 할당할 수 없습니다.
  }
}

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

• strictNullChecks 여부에 따라 null 과 undefined 는 number 에 해당될 수도 아닐 수도 있다.
• 가장 작은 집합 = 아무것도 포함하지 않는 공집합 = never

유니온 타입

유니온 타입 = union = |
두개 혹은 세개의 타입으로 묶을 때

ex.

type AB = 'A' | 'B';

+ 집한의 관점에서 타입 체커의 주요 역할은 하나의 집합이 다른 집합의 부분 집합인지 검사하는 것

인터섹션

인터섹션 = 교집합 = &
주의할점 : 타입 연산자는 인터페이스의 속성이 아닌 값의 집합(타입의 범위)에 적용됨 추가적인 속성을 가지는 값도 여전히 그 타입에 속함

extends

• & 보다 일반적인 방법은 extends 키워드를 사용하는 것
• extends = ~의 부분 집합
• 서브 타입 = 어떤 집합의 다른 집합의 부분 집합

 

Vector 3D 는 Vector 2D의 서브 타입

+ extends 키워드는 제너릭 타입에서 한정자로도 쓰인다.

+ 할당될 수 없습니다 = 상속될 수 없습니다. = ~의 부분집합이 아닙니다.

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') // 정상
sortBy(pts, 'z') // ~~~ 'z'형식의 인수는 'x' | 'y' 형식의 매개변수에 할당될 수 없습니다.

+ 숫자 배열은 숫자들의 쌍(= 튜플)과는 다른다.
이유 : 타입스크립트는 [number, number] type의 숫자의 쌍을 {0: number, 1: nuber, length: 2}로 길이까지 모델링하기 때문

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

symbol은 타입 공간이나 값 공간 중의 한 곳에 존재합니다. 심벌은 이름이 같더라도 속하는 공간에 따라 다른 것을 나타낼 수 있기 때문에 혼란스러울 수 있습니다.

한 심벌이 타입인지 값인지는 어떤 형태로 쓰이는지 문맥을 살펴 알아낼 수 있습니다.

또는 playground에서 js 로 변환되었을 때 사라지는 심벌은 타입이라고 추론 가능합니다.

class 와 enum은 상황에 따라 타입과 값 두가지 모두 사용 가능한 예약어

양쪽 모두 사용 가능한 연산자 : typeof

class로 생성된 타입과 인스턴스 타입은 InstanceType 제너릭을 이용해서 전환할 수 있습니다.

type C = InstanceType<typeof Cylinder>;

두 공간 사이에서 다른 의미를 가지는 코드 패턴들

• this (this 키워드, 다형성 this타입)
• &, I (비트 연산과 인터섹션-유니온)
• const (변수 선언, 리터럴 또는 리터럴 표현식의 추론된 타입)
• extends (서브 클레스 또는 서브 타입 또는 제너릭 타입의 한정자)
• in (루프 또는 매핑된 타입)

+ 타입 스크립트가 잘 동작하지 않는다면 타입 공간과 값 공간을 혼동했을 때 가능성이 있음

구조 분해 할당을 사용할 때 유의할 점

코드조각

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

타입 단언

const bob = {name : 'nika'} as Person;

타입 선언

const alice: Person = {name: 'Alice'};

타입 단언보다 타입 선언을 사용하는 것이 좋음

이유: 단언은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 것

 

 

 

참고: 이펙티브 타입스크립트

http://www.yes24.com/Product/Goods/102124327

이펙티브 타입스크립트 - YES24

<타입스크립트의 타입 시스템2>

https://dragon-developer.tistory.com/51

타입스크립트의 타입시스템2 - 이펙티브 타입스크립트