이번 편에서는 함수에서 받는 인자의 타입이 다양한 경우를 Union, Generic을 활용하여 처리하는 방법에 관해 설명하겠습니다.
Union
Union은 TypeScript에서 지원하는 타입입니다. 데이터에 대한 타입을 정의할 때 한 개 이상의 타입으로 선언할 수 있게 합니다.
Union은 아래와 같은 문법으로 정의합니다.
(type1 | type2 | type3 | .. | typeN)
JavaScript
복사
예시를 하나 들어보겠습니다.
function isNull(value: string | null): boolean {
return !value;
}
JavaScript
복사
isNull 함수에서 value 인자가 string 또는 null 타입으로 들어오는 경우에 string | null 으로 Union 타입의 인자를 선언해 전달받습니다.
Generic
Generic은 모듈이 다양한 타입을 지원하도록 재사용하게 해주는 고급 타입입니다. Java, C# 에서는 native로 지원하고 있습니다.
TypeScript 공식 문서에서 가져온 예시를 하나 들어보겠습니다.
function identity<T>(arg: T): T {
return arg;
}
JavaScript
복사
identity 함수명 옆에 <T> 라고 표기가 되어있는데 이를 타입 변수(type variable)라고 합니다. 타입 변수로 받은 T가 arg 의 타입과 반환하는 값의 타입으로 전달됩니다.
Generic 함수의 호출 예시는 다음과 같습니다.
let output = identity<string>("myString"); // type of output will be 'string'
JavaScript
복사
타입 변수를 string으로 전달하여 반환 타입을 string으로 정의합니다.
Union, Generic in the real world
Union 변수의 특정 타입에만 적용되는 로직을 작성해야 할 때 컴파일 에러가 나는 예제를 Generic으로 해결해보겠습니다.
function getUser(userData: EmailUser | FacebookUser): EmailUser | FacebookUser {
...
return user;
}
function facebookUserLogic(userData: FacebookUser) {
const user = getUser(userData);
const email = getEmail(user.facebook_id); // Property 'facebook_id' does not exist on type 'EmailUser'.ts(2339)
...
}
JavaScript
복사
facebookUserLogic 함수에서 getUser 함수를 호출하여 user를 받아와서 facebook_id property에 접근하니 facebook_id가 EmailUser에는 존재하지 않는다는 에러가 뜹니다. 이 경우에 type guard를 이용해서 타입을 좁혀줄 수도 있지만, 다음과 같이 Generic으로 깔끔하게 해결할 수 있습니다.
function getUser<T>(user: T): T {
...
return user;
}
function facebookUserLogic(user: FacebookUser) {
const user = getUser<FacebookUser>(user);
const email = getEmail(user.facebook_id);
...
}
JavaScript
복사
getUser 함수를 Generic 타입 변수를 받을 수 있게 하여 FacebookUser 로 타입을 넘기니 타입이 FacebookUser로 좁혀졌습니다. 이처럼 Union과 Generic을 쓰면 깔끔하게 다양한 타입에 대해 처리할 수 있습니다.
TypeScript에서 타입을 정의할 때는 불편하더라도 any 타입을 쓰지 말고 위와 같이 TypeScript의 고급 타입들과 유틸리티를 이용하여 최대한 명확하게 정의해놓으면 유지 보수하기 편해지고 컴파일 타임에 버그를 방지할 수 있게 됩니다. 다음 편에서는 새로운 내용으로 또 찾아뵙겠습니다.
참고 문서
작성자
관련된 글 더 보기
