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

짧은코딩

타입을 집합으로 생각하자 본문

TS/TS(with ZeroCho)

타입을 집합으로 생각하자

5_hyun 2023. 9. 15. 21:41

타입스크립트에는 자바스크립트에는 없던 연산자들이 있다. 처음 봤을 땐, 나름 쉬워 보여서 그냥 넘어갈 수도 있지만 타입스크립트를 지속적으로 사용하다 보면 은근히 헷갈릴 때가 있었다. 그렇기에 이 글을 통해 정리하고자 한다.

연산자

  • 유니언(|): 유니언 타입은 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를 제외한 모든 값을 의미하는 타입

출처

https://www.yes24.com/Product/Goods/121208343?pid=123487&cosemkid=go16922596216031192&gclid=CjwKCAjwgZCoBhBnEiwAz35RwkmEI7K4Nghy3ssdfNvsMHfFRHYPa5sUFE9-mO4MkWpf5CxvYjnOoRoCW-IQAvD_BwE 

 

타입스크립트 교과서 - 예스24

타입스크립트 문법은 실전에서 어떻게 쓰이는가?타입 정의를 분석하고, 직접 타입을 만들 수 있는가?실전을 위한 기본기, 실제 라이브러리 타입 분석, 실무/실용적인 조언을 모두 담았다! (All in

www.yes24.com

 

728x90
반응형

'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
Comments