일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- React
- tailwind
- 무한 스크롤
- 인터섹션
- map
- 공변성
- SSR
- RTK Query
- ESlint
- 호이스팅
- Jest
- autosize
- recoil
- webpack
- 결정 알고리즘
- 이분 검색
- 타입 좁히기
- 태그된 유니온
- app router
- CORS
- 반공변성
- 리터럴 타입
- CI/CD
- 투포인터
- Cypress
- async/await
- TS
- Promise
- dfs
- useAppDispatch
- Today
- Total
짧은코딩
TS의 타입 본문
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
Exclude는 2개의 제네릭 타입을 받고 첫 번째 인자에서 두 번째 인자와 겹치는 타입을 제외하고 반환해준다.
'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 |