연산자를 이용한 타입 정의

김동현·2022년 3월 21일
0

TypeScript

목록 보기
8/18
post-thumbnail

유니온 타입(Union Type)

유니온 타입은 | 타입 연산자를 사용하여 값 집합들의 "합집합"을 표현할 수 있습니다. 이는 "포함 가능한 서브 타입을 확장"하는 의미로 받아들일 수 있습니다.

주의할 점으로 합집합이 각 속성이 아닌 "값의 집합, 타입의 범위"에 적용됩니다. 즉, 각 타입 범위에 해당되는 "모든 서브 타입들을 허용"하는 것으로 볼 수 있습니다..

위 코드에서 stringNumber 타입은 string 타입과 number 타입을 합집합으로 갖습니다. 그러므로 string 타입의 모든 서브 타입과 number 타입의 모든 서브 타입을 모두 허용하게 됩니다.

위 코드에서는 stringNumber 타입을 갖는 변수 a가 가질 수 있는 타입은 string, number, number enum, string literal, number literal, any 타입 모두 허용됩니다.

포함 관계 : unknown, any > "string | number" > string 서브 타입, number 서브 타입


객체의 경우 타입 범위에 적용된다는 점을 명확하게 확인할 수 있습니다.

위 코드에서는 Person 인터페이스와 Students 인터페이스를 유니온 타입으로 갖는 변수 p를 선언하여 사용하고 있습니다.

변수 p는 Person 인터페이스의 모든 서브 타입과 Students 인터페이스의 모든 서브 타입을 허용하게 됩니다.

포함 관계 : unknown, any > object > "Person | Students" > Person 서브 타입, Students 서브 타입

인터섹션 타입(Intersection Type)

인터섹션 타입의 경우 & 타입 연산자를 사용합니다. 인터섹션 타입 값 집합들의 "교집합"을 표현할 때 사용됩니다. 이는 "포함 가능한 서브 타입을 제한"하는 의미로 받아들일 수 있습니다.

동일하게 교집합은 각 속성이 아닌 값의 집합, 타입의 범위에 적용됩니다. 즉, 인터섹션 타입은 각 타입이 나타내는 범위를 교집합으로 반드시 모두 갖는 타입을 의미합니다.

위 코드에서 number와 string을 인터섹션 타입으로 사용하고 있습니다. 하지만 number와 string 타입을 동시에 포함하는 타입은 존재하지 않기 때문에 never 타입을 의미하게 됩니다.

포함 관계 : unknown, any > "string & number" > string 타입과 number 타입을 동시에 만족하는 타입(never)


객체 타입의 경우 명확하게 확인할 수 있습니다.

Person 인터페이스와 Students 인터페이스를 인터섹션 타입으로 갖는 변수 a는 Person 인터페이스와 Students 인터페이스 값의 범위를 교집합으로 모두 갖는 타입의 값을 할당 받을 수 있습니다.

즉, 서브 타입을 Person interface + Students interface 로 "제한"하는 것으로 볼 수 있습니다.

포함 관계 : unknown, any > object > "Person & Students" > Person 인터페이스와 Students 인터페이스를 동시에 만족하는 타입

keyof 타입 연산자

keyof 타입 연산자는 객체 타입 앞에 작성하며, 객체들의 "키 값들을 유니온 타입"으로 생성합니다.

즉, "keyof 객체타입" 형태로 사용합니다.

매핑된 타입

in 타입 연산자를 사용하여 각 프로퍼티 키와 값의 타입을 매핑시켜 객체 타입을 생성할 수 있습니다.

매핑된 타입은 객체 리터럴 형태의 객체 타입에서 인덱스 시그니처를 사용합니다.

참고로 매핑된 타입은 인터페이스에서는 사용할 수 없습니다.

in 타입 연산자는 자바스크립트의 for...in 문 처럼 유니온 타입을 차례대로 순회하면서 유니온 타입의 각 타입을 키 이름에 전달합니다.

즉, "[키이름 in 유니온타입]: 값 타입;" 형식으로 사용됩니다.

유니온 타입의 각 타입이 순차적으로 키 이름에 전달되고, 키 이름 또한 타입으로 사용할 수도 있습니다.

위 코드에서는 Info 인터페이스를 keyof 연산자로 사용하여 키 값을 유니온 타입 생성하고, in 연산자를 통해 키 값을 순차적으로 key에 전달합니다.

key 또한 타입으로 사용가능하므로 Info 인터페이스의 프로퍼티 타입을 key로 인덱싱하여 타입으로 사용할 수 있습니다.

이렇게 매핑된 타입을 사용하는 경우 객체의 프로퍼티 키와 키에 대한 값의 타입이 정확하게 설정됩니다.

profile
Frontend Dev

0개의 댓글