[TypeScript] union(|), intersection(&) 그리고 상속 (extends)

 

union과 intersection

---

union(|)과 intersection(&)

function add(x: string | number, y: string | number): string | number { return x + y }
add(1, 2)
add('1', '2')
add(1, '2')

type A = {
    a: string;
}
type B = {
    b: string;
}

const aa: A | B = { a: 'hello', b: 'world' };
const bb: A & B = { a: 'hello', b: 'world' };

 union은 또는 (or)의 성질을 지닌다. 근데 string | number는 문제가 있다. return값이 number일수도 string일수도 있는데 return값에 문자열 메서드, 숫자 메서드를 사용했을 때 에러가 날 수 있다. 이것부터 문제가 생기기 때문에 그 이후에 연달아 문제가 생긴다. 타입스크립트는 처음 타입을 잘 잡아놔야 한다. 
 intersection은 그리고(and)의 성질을 지닌다. 단순하게 생각하면 2개의 타입을 동시에 가진다는 게 말이 되나? 싶겠지만 객체타입을 생각하면 이해가 된다.

type A = { hello: "world" } & { lim: "hwihoon" };
const a: A = { hello: "world", lim: "hwihoon" };

두 객체를 포함해야만 타입이 된다. 변수 a의 값에서 하나라도 사라지면 A타입의 맞지 않아 에러가 발생한다. 따라서 모든 속성이 다 있어야 한다.

 

type A = { hello: "world" } | { lim: "hwihoon" };
const a: A = { hello: "world", lim: "hwihoon" };

union으로 해도 에러 없이 정상작동하지만 intersection 상황과는 의미가 다르게 정상작동하는 것이다. union 상태에서는 둘 중 하나라도 포함되어 있으면 에러 없이 된다. 따라서 여러 개 중에 하나만 있으면 된다.

 

상속(extends)

type Animal = { breath: true };
type Mammal = Animal & { breed: true };
type Human = Mammal & { think: true };

interface A {
  breath: true
}

interface B extends A {
  breed: true
}

const hwihoon: Human = { breath: true, breed: true, think: true}

 intersection은 타입 에일리어스 형식으로 타입을 정의할 때 상속의 개념으로도 사용할 수 있다. interface를 사용할 땐 extends를 사용해서 상속을 하면 된다. 객체지향 프로그래밍을 할 땐 interface를 사용하는 게 좋고, 타입은 간단하게 사용될 때 좋다.

 interface가 타입을 extends 할 수도 있고 그 반대가 될 수도 있다. 같은 interface를 여러번 선언할 때마다 합쳐진다. 최신화가 되는 것이 아니라 그 전의 interface에서 확장 되는 것이다. 그래서 라이브러리들이 대부분 interface로 만들었다. 다른 사람의 인터페이스를 확장하기 편하기 때문이다.