타입스크립트 - 고급타입

유니언 타입

유니언 타입은 타입스크립트 1.4에 추가된 특징입니다. 유니언타입은 2개 이상의 타입을 하나의 타입으로 정의한 타입입니다.
유니언 타입을 선언 할 때는 파이프(|)를 타입명 사이에 넣습니다.

타입A | 타입B | 타입C …

유니언 타입으로 선언된 변수는 나열된 타입 중 하나의 타입에 속한 값만 할당 받습니다.

타입 가드

유니언 타입은 여러 타입을 받을 수 있다는 장점이 있습니다. 그런데 유니언 타입은 여러 타입을 받음으로써 타입을 활신할 수 없다는 문제가 있다.
매개변수가 유니언 타입일 때 안전한 값을 할당하려면 타입 검사를 거쳐 매개변수 값을 답아야 한다.
유니언 타입에 대한 타입 검사를 통해 타입 안전성을 주는 방법을 ‘타입가드(type guards)’라고 합니다.

타입 가드는 유니언 타입으로 지정된 변수에 대해 typeof나 insranceof 연산자를 활용해 타입 질의를 한 후 명시된 타입과 일치하는지 검사 합니다.

typeof를 이용한 타입 검사
1
2
3
if (typeof x === 'string') {
return x.indexOf(y);
}

클래스도 유니언 타입 형태로 지정할 수 있습니다. 클래스에 대한 타입을 확신할 수 있으려면 instanceof 연산자를 통해 같은 클래스인지 확인 해야합니다.

instanceof를 이용한 타입 검사
1
2
3
4
if (x instanceof Dog) {
console.log(x.name);
console.log(x.leg);
}

조건 검사가 이뤄지지 않은 영역에서는 오류가 발생합니다.

문자열 리터럴 타입

문자열 리터럴 타입은 타입에 정의한 문자열만 할당받을 수 있게 하는 타입입니다. 사용자 정의 타입이므로 사용자가 정의해 사용합니다.
타입 에일리어스를 이용하면 좀 더 일관성 있게 타입을 관리 할 수 있습니다. type 키워드를 이용해 ‘keyup’만 할당받을 수 있는 문자열 리터럴 타입인 EventType은 다음과 같은 형태로 선언합니다.

1
2
3
4
5
6
7
8
// 문자열 리터럴 타입
let event: 'keyup' = 'keyup';

// 타입 에일리어스
type EventType = 'keyup'

// 유니언 타입과 결합
type EventType = 'keyup' | 'mouseover';
  • 유니언 타입과 결합해 사용하면 허용할 문자열을 여러 개 지정할 수 있습니다.

룩업 타입

룩업(lookup)타입은 타입스크립트 2.1에 추가된 타입입니다. 룩업 타입은 인덱스 접근타입으로 불리는데, keyof를 통해 타입T의 하위 타입을 생성해 내기 때문입니다.
여기서 타입T는 여러 타입으로 이뤄진 유니언이나 인터페이스 타입을 가리킵니다.

1
let testUnion: 'name' | 'gennder' | 'age' = 'name';

유니언 타입을 다음과 같이 인터페이스 구조로 바꿀 수 있습니다.

1
2
3
4
5
interface Profile {
name: String;
gender: String;
age: number;
}

이 인터페이스를 keyof를 이용해 룩업 타입으로 선언하면 다음과 같습니다.

룩업타입
1
type Profile1 = keyof Profile;

non-nullable 타입

타입스크립트 2.0에 추가된 특징으로 non-nullable 타입은 컴파일러가 null이나 undefined를 엄격하게 제한합니다.

타입스크립트 2.0 전에는 null이나 undefined를 모든 타입의 변수에 할당할 수 있었으나 null이나 undefined를 할당하면 타입이 명확하지 않아서
타입스크립트 2.0에서 strictNullChecks 라는 옵션이 추가되었습니다.

strictNullChecks 옵션을 true 로 설정하면 특정 타입으로 선언된 변수에 null과 undefined 가 할당되지 않아 타입 사용이 명확해집니다.

strictNullChecks 가 true일 때 null이나 undefined를 할당하려면 유니언타입으로 만들면 됩니다.

네버타입

타입스크립트 2.0에 내장 타입으로 네버(naver)이 추가 됐습니다. 네버는 모든 타입의 하위 타입으로 사용할 수 있지만, any 타입을 never 타입에 할당 할 수는 없습니다.

  1. 함수에 닿을 수 없는 코드 영역이 있어 반환값이 존재하지 않을 때
  2. 함수에 Throw 객체가 반환돼 오류가 발생할 때

닿을 수 없는 코드

함수를 실행하다 보면 ‘닿을 수 없는 코드(unreachable code)’가 발생할 때가 있습니다. 한 예로는 무한루프가 있습니다.
닿을 수 없는 코드가 포함된 함수를 변수에 할당하려면 할당 받을 변수도 never 타입이 돼야 합니다.
닿을 수 없는 코드를 없애려면 조건 검사에서 예외 상황이 없게끔 수정하면 됩니다.

예외 객체가 반활될 때

오류를 발생시키려면 throw new Error(…)구문을 사용합니다. 오류 객체를 생성하고 던지면 함수가 반환값을 줄 수 없으므로 네버 타입이 됩니다.

this 타입

this 타입은 인터페이스와 클래스의 하위 타입이면서 이들을 참조할 수도 있는 타입입니다. this 타입은 this 키워드를 이용해 선언합니다.
this 타입은 다형적 this 타입(polymorphic this type)이라고도 하는데, 선언 위치에 따라 참조하는 대상이 달라지기 때문입니다.
클래스 멤버 변수나 생성자에서 this 타입을 사용하면 가장 가까운 클래스의 인스턴스를 참조합니다. 인터페이스 멤버에 this 타입을 사용하면 this 타입은 인터페이스를 참조합니다.

1
2
3
4
interface ListItem {
getHead(): this;
getTail(): this;
}

각 인터페이스의 멤버는 인터페이스 자신을 참조합니다. 인터페이스는 구현 클래스의 객체를 통해 getHead() 라고 호출하면 자신을 호출하므로 재귀 타입이 됩니다.

이처럼 자기 자신을 반환하는 인스턴스 메서드를 활용해 체이닝 형태로 사용하면 마치 데이터가 흐르는 듯이 표현할 수 있는데 이러한 패턴을 프루언트 인터페이스패턴이라 하고 줄여서 플루언트 패턴이라고 합니다.
플루언트 패턴을 구현할 때는 매세드가 인스터스 자신을 가리키는 this 타입을 반환하게 합니다.

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×