[Typescript] 연산자를 이용한 타입 정의

연산자를 이용한 타입 정의에는 유니온 타입과 인터섹션 타입이 있다.

 

1. 유니온 타입

| 를 이용해 A 혹은 B 타입을 받겠다고 명시하는 방법. 하나 이상의 타입을 사용할 수 있다.

// 유니온 타입 ( | )
function logMessage(value: string | number) {
    console.log(value)
}
 
logMessage(100);

logMessage() 에는 숫자나 문자가 들어갈 수 있다.

여러가지 타입을 | 으로 계속 이어서 사용할 수 있다. ( string | number | boolean | ...)

 

유니온타입으로 입력받은 value는 함수 내에서 string과 number가 공통으로 가지고 있는 API만을 사용할 수 있다. TS입장에서는 string이나 number 중 어떤 것이 들어와도 오류가 나지 않는 코드를 작성하기 원하기 때문이다.

number | string 타입의 경우 사용할 수 있는 것은 공통적으로 가진 toLocaleString, valueOf 등등 이다.

https://joshua1988.github.io/ts/guide/operator.html#union-type%EC%9D%84-%EC%93%B8-%EB%95%8C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90

 

아래 코드의 경우, Developer와 Person 두 인터페이스에서 공통적으로 가지고 있는 someone.name만 접근 가능하다.

interface Developer {
    name: string;
    skill: string;
}
 
interface Person {
    name: string;
    age: number;
}
 
// Developer 혹은 Person 속성만 입력받는 함수
function askSomeone(someone: Developer | Person) {
    // someone.name만 자동으로 접근 가능(공통 속성)
};

 

타입에 따라 다른 코드를 실행하기 원한다면 함수 안에서 타입을 확인해줘야 한다. 이것을 타입가드라고 한다.

function logMessage(value: string | number) {
    // 타입가드
    if (typeof value === 'number') {
        value.toLocaleString();
    }
    if (typeof value === "string") {
        value.toString();
    }
    // 정해진 타입 이외의 타입의 변수가 입력되면 에러메시지 출력 가능
    throw new TypeError('value must be string or number')
}
 

if를 통해 들어온 변수의 타입에 따라 다른 행동을 할 수 있고, 타입에 관련된 API도 자동완성으로 쉽게 작성가능하다.

 

 

2. 인터섹션 타입 ( & )

여러 타입을 모두 만족하는 하나의 타입을 말한다. 연결된 타입들이 가진 요소를 모두 가져야 한다.

interface Developer {
    name: string;
    skill: string;
}
 
interface Person {
    name: string;
    age: number;
}
 
// 인터섹션 타입
function askSomeone2(someone: Developer & Person) {
    // someone은 Developer와 Person의 속성을 모두 포함한 타입
    // Developer와 Person의 속성 모두에 접근 가능
    console.log(someone.name);
}
 
const experiencedDeveloper = {
  name: 'Tom',
  skill: 'Typescript',
  age: 45,
};
 
askSomeone2(experiencedDeveloper); // 가능

Developer & Person 의 경우 공통적으로 가지고있는 name, Developer의 skill, Person의 age를 모두 포함하고 있어야 입력가능하다.

 

 

 

참고한 사이트

https://joshua1988.github.io/ts/guide/operator.html#union-type

연산자를 이용한 타입 정의 | 타입스크립트 핸드북

강의

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8/dashboard

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의