일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 |
- 이분 검색
- useAppDispatch
- 태그된 유니온
- RTK Query
- async/await
- autosize
- TS
- 투포인터
- Jest
- 타입 좁히기
- 결정 알고리즘
- recoil
- Cypress
- app router
- CI/CD
- dfs
- 호이스팅
- webpack
- tailwind
- React
- Promise
- 반공변성
- 무한 스크롤
- SSR
- 인터섹션
- 공변성
- CORS
- ESlint
- map
- 리터럴 타입
- 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를 제외한 모든 값을 의미하는 타입
출처
타입스크립트 교과서 - 예스24
타입스크립트 문법은 실전에서 어떻게 쓰이는가?타입 정의를 분석하고, 직접 타입을 만들 수 있는가?실전을 위한 기본기, 실제 라이브러리 타입 분석, 실무/실용적인 조언을 모두 담았다! (All in
www.yes24.com
'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 분석 (1) | 2022.09.05 |