일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- CI/CD
- 투포인터
- tailwind
- map
- Cypress
- autosize
- ESlint
- 공변성
- 무한 스크롤
- 결정 알고리즘
- dfs
- useAppDispatch
- TS
- 호이스팅
- recoil
- 반공변성
- RTK Query
- 태그된 유니온
- async/await
- 리터럴 타입
- app router
- webpack
- React
- 타입 좁히기
- CORS
- Jest
- 인터섹션
- SSR
- 이분 검색
- Promise
- Today
- Total
짧은코딩
타입을 집합으로 생각하자 본문
타입스크립트에는 자바스크립트에는 없던 연산자들이 있다. 처음 봤을 땐, 나름 쉬워 보여서 그냥 넘어갈 수도 있지만 타입스크립트를 지속적으로 사용하다 보면 은근히 헷갈릴 때가 있었다. 그렇기에 이 글을 통해 정리하고자 한다.
연산자
- 유니언(|): 유니언 타입은 OR의 역할을 한다. 즉, 합집합의 역할을 한다.
- 인터섹션(&): 인터섹션 연산자는 AND의 역할을 한다. 즉, 교집합의 역할을 한다.
공집합(never)
type nev = string & number; // never
인터섹션 연산자를 이용하여 위 코드를 작성하면 nev의 타입은 never가 된다.
즉, 타입스크립트에서 가장 좁은 타입이다.
전체집합(unknown)
전체집합은 unknown이며, 타입스크립트에서 가장 넓은 타입이다.
대입 원칙
타입스크립트에서는 좁은 타입을 넓은 타입에 대입할 수 있다. 하지만 넓은 타입은 좁은 타입에 대입할 수 없다.
즉, never는 unknown에 대입이 가능하지만, unknown은 never에 대입할 수 없다.
any를 사용하지 않아야 하는 이유
any 타입은 집합 관계를 무시한다. 따라서 &, | 연산자를 any에 하지 않는 것이 좋다.
만약 사용한다면, 일관성이 없어서 예측하기 쉽지 않다.
예시
위에서 설명한 것들을 기반으로 예시 코드를 보겠다.
type A = string | boolean;
type B = boolean | number;
이런 기본적인 타이핑이 되어있다.
-문제1
type C = A & B;
C의 타입은?
답은 boolean
-문제2
type D = {} & (string | null);
D의 타입은?
답은 string
왜냐하면 {}의 타입은 null과 undefined를 제외한 모든 타입이기 때문
-문제3
type E = string & boolean;
E의 타입은?
답은 never
-문제4
type F = unknown | {};
F의 타입은?
답은 unknown
-문제 5
type G = never & {};
G의 타입은?
답은 never
unknown과의 | 연산은 무조건 unknown이고 never와의 & 연산은 무조건 never
예외 사항
예외 사항이 존재하는데, 그것은 unll/undefined를 제외한 원시 자료형과 비어 있지 않은 객체를 & 연산하면 never가 되지 않는다.
-문제1
type H = {a: 'b'} & never;
H의 타입은?
답은 {a: 'b'} & never
원래는 never가 되는 것이 원칙이지만 예외 사항이다. 브랜딩이라는 기법을 사용했기 때문이다.
-문제2
type I = null & {a: 'b'};
I의 타입은?
답은 never
-문제3
type J = {} & string;
J의 타입은?
답은 string
{}은 null과 undefined를 제외한 모든 값을 의미하는 타입
출처
'TS > TS(with ZeroCho)' 카테고리의 다른 글
공변성과 반공변성(함수) (1) | 2023.10.02 |
---|---|
오버로딩(any를 써야하는 경우!) (0) | 2023.09.28 |
React with TS (0) | 2022.09.12 |
Axios 만들어보기 (0) | 2022.09.07 |
axios 분석 (0) | 2022.09.05 |