반응형
250x250
Notice
Recent Posts
Recent Comments
Link
관리 메뉴

짧은코딩

TS의 타입 본문

TS/이펙티브 타입스크립트

TS의 타입

5_hyun 2023. 1. 21. 02:51

never 타입

const x: never = 12;

never는 공집합이라는 의미라서 아무런 값도 할당할 수 없다. 따라서 x에 12를 넣을 수 없다.

유닛(unit) 타입/리터럴(literal) 타입

type A = 'A';
type B = 'B';
type Twelve = 12;

유닛 타입은 never 다음으로 작은 집합이며 한 가지 값만 포함하는 타입이다.

유니온(union) 타입

type AB = 'A' | 'B';
type AB12 = 'A' | 'B' | 12;

유니온 타입은 값 집합들의 합집합이다. "|"을 사용해서 타입을 묶어줄 수 있다.

 

-예시

const a: AB = "A"; // 정상
const c: AB = "C"; // "C"는 'AB' 형식에 할당할 수 없다.

"C"는 유닛 타입이다.

인터섹션(intersection, 교집합)

interface Person {
    name: string;
}

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

type PersonSpan = Person & Lifespan;

const ps: PersonSpan = {
    name: 'Alan Turing',
    birth: new Date('1912/06/23'),
    death: new Date('1954/06/07'),
}; // 정상

인터섹션는 "&" 연산자를 사용한다. Person과 Lifespan에 공통 속성이 없어서 PersonSpan을 공집합(never)으로 생각할 수 있다. 하지만 타입 연산자는 인터페이스의 속성이 아닌 값의 집합(타입의 범위)에 적용된다. 따라서 Person과 Lifespan의 모든 속성이 인터섹션에 속하고 ps는 정상이다.

합집합

interface Person {
    name: string;
}

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

type PersonSpan = Person | Lifespan; // never

PersonSpan은 유니온 타입에 속하는 키가 없어서, 유니온에 대한 keyof는 공집합(never)이다.

 

-올바른 등식

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

이 등식은 TS를 이해하는데 도움이 되는 등식이다.

 

-일반적으로 사용하는 extends

interface Person {
    name: string;
}

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

extends"~의 부분 집합" 이라는 의미로 받아들일 수 있다. 따라서 이런식으로 합집합을 표현할 수 있다.

부분 집합

-예시1

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'를 상속
sortBy(pts, 'y'); // 정상, 'y'는 'x'|'y'를 상속
sortBy(pts, 'z'); // 비정상, 'z'는 'x'|'y' 형식의 매개변수에 할당할 수 없다.

pts에서 제네릭 T는 "x" | "y"이다. 따라서 제네릭 k는 "x" | "y"을 상속 받는다.

 

-예시2

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

이 코드는 에러가 발생한다. 이상하게도 "length"가 나오게 된다. triple과 double의 길이가 다르기 때문에 에러가 발생했다. 길이를 체크하는 것은 좋은 방법이다.

 

-Exclude

type T = Exclude<string|Date, string|number>; // 타입은 Date
type NonZeroNums = Exclude<number, 0>; // 타입은 number

Exclude2개의 제네릭 타입을 받고 첫 번째 인자에서 두 번째 인자와 겹치는 타입을 제외하고 반환해준다.

728x90
반응형

'TS > 이펙티브 타입스크립트' 카테고리의 다른 글

타입 선언문과 단언문  (0) 2023.02.10
타입과 값 구분하기  (0) 2023.02.10
구조적 타이핑  (0) 2023.01.17
ts와 타입의 관계 이해  (0) 2023.01.04
TS와 JS, TS 설정  (0) 2023.01.02
Comments