정리
Union Type에서의 교집합, 합집합과 구조적 타입에서의 교집합, 합집합의 개념은 다르다.
구조적 타이핑은 객체가 어떤 타입에 부합하는 최소한의 특징을 가지고 있다면, 그 타입에 해당하는 것으로 간주한다.
Union Type
여러 타입 중 하나를 가질 수 있다.
개념은 너무 쉬워서 넘어가고,
값을 넣을 때는 합친 타입 중 아무거나 넣으면 되고,
사용할 때는 어떤 타입을 사용할 것인지 확인 후 사용. 즉, Narrowing해서 사용
단, 사용할 로직이 어느 타입이든 상관없다면 Narrowing 할 필요는 없음
function printId(id: number | string) {
if (typeof id === 'number') {
console.log(`${id} is number`)
}
else if (typeof id === 'string') {
console.log(id.toUpperCase())
}
}
printId(1)
printId('hello world')
**구조적 타이핑 관점에서 바라보는 Union Type
합집합을 교집합으로 생각해라 / Bird에 속하거나 Fish에 속하거나
두 집합과 각각의 집합에 대한 특성이 주어졌을 때, 두집합의 합집합에는 각각의 특성들의 교집합만이 적용된다.
typescript에서는 반환된 타입이 어떤것인지 알 수 없기 때문이다.
interface Bird {
fly(): void;
layEggs(): void;
}
interface Fish {
swim(): void;
layEggs(): void;
}
declare function getSmallPet(): Fish | Bird;
const pet = getSmallPet()
pet.layEggs()
pet.swim() // error
교집합을 합집합으로
둘다 가지는 값은 인터섹션 타입이 속함. 이유는 교집합이 되려면 어느쪽으로 간주해도 무리가 없어야 한다. 타입 관점에서는 양 쪽 모두 속해야 교집합 (구조적 타이핑 개념 때문에...)
declare function getSmallPet(): Fish | Bird;
const pet = getSmallPet()
pet.layEggs()
pet.swim()
Intersection Type
여러 타입을 모두 만족하는 새로운 타입을 생성.
type Person = { name: string };
type Employee = { employeeId: number };
type EmployeeDetails = Person & Employee;
const employee: EmployeeDetails = {
name: "John",
employeeId: 12345
};
https://blog.hwahae.co.kr/all/tech/9954
집합의 관점에서 타입스크립트 바라보기 – 화해 블로그 | 기술 블로그
타입스크립트 유니온타입 프론트엔드에서 타입스크립트를 쓰는 것은 필수로 자리 잡고 있습니다. 타입을 작성하는 데 시간을 많이 쏟고 사용할 때에는 타입을 집합의 관점에서 바라보고 사용
blog-wp.hwahae.co.kr
Documentation - Everyday Types
언어의 원시 타입들.
www.typescriptlang.org
https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html
Handbook - Unions and Intersection Types
How to use unions and intersection types in TypeScript
www.typescriptlang.org
'IT > typescript' 카테고리의 다른 글
[typescript] as const (0) | 2024.06.03 |
---|---|
[clean code] 놓치기 쉬운 것들 (0) | 2024.04.22 |
[Typescript] Type Assertion (1) | 2024.03.16 |
[typescript] Array가 Record type에 호환이 된다고? (0) | 2024.03.13 |
[Typescript] Complier Options - suppressImplicitAnyIndexErrors (0) | 2024.03.12 |