[JS][TS] Typescript의 Type Assertion과 Type Compatibility

typescript 강의를 들으면서 정리한 마지막 글에서 Type Guard를 다루었다. 이후에 또 다른 기초 강좌를 수강할 기회가 있었고, 이미 들었던 내용이 대부분이었지만 좀 더 익숙해지고자 수강했는데, 다른 부분은 이전에 정리한 내용과 비슷했지만 Type Assertion과 Type Compatibility 관련 내용은 이전에 정리한 내용에 없어서, 추가로 포스팅하게 되었다.

Type Assertion

Type Assertion은 명시적 타입 캐스팅과 비슷하게 사용할 수 있다. 다만, 실제로 타입이 변경되는 것은 아니고 이런 타입이 들어올 것이라는 것을 프로그래머가 명시해주는 것이다. 다음처럼 사용할 수 있다.

let a;
let b = a as string; // 강제로 들어오는 type 지정

// DOM API 조작
let div = document.querySelector('div') as HTMLDivElement
if (div) {
    // ...
}

 

보통 위처럼 DOM API를 조작할 때, 어떤 selector가 들어올지 프로그래머는 알 수 있기 때문에 속성 등을 사용하고자 지정해주는 식으로 많이 사용된다.

Type Assertion을 사용하는 것이 간편할 때도 있지만, 여러 군데에서 지정해주어야 할 때에는 Type Guard를 더 많이 사용한다.

Type Compatibility

Type Compatibility는 호환성에 관련된 내용인데, 사실 이렇게 쓸 일이 있을지는 모르겠다. interface나 class간에 서로 type이 호환되는지를 판별해주는 것인데, 이 때 type alias를 통해서 판단하지 않고 type의 내용을 보고 판단한다. 아래 예시를 보면서 확인해보자.

// interface 간의 호환
interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
}

let developer: Developer
let person: Person

developer = person; // 이건 person에 없는 속성(skill)이 있으므로 안 됨.
person = developer // 이건 person의 모든 속성을 가지고 있으므로 가능

 

위 주석에 달아두기도 했지만, Developer는 Person의 모든 속성을 가지고 있으므로 호환이 되고, 거꾸로는 되지 않는다.

함수와 제네릭에서도 가능하다. 아래를 보고 포스팅을 마치겠다.

 

// 함수
let add = ((a: number) => {
    // ...
})

let sum = ((a: number, b: number) => {
    // ...
})

add = sum // 인자가 부족하므로 안 된다.
sum = add // 인자를 모두 가지고 있으므로 가능

// Generic
interface Empty<T> {

}

let empty: Empty<string>
let empty2: Empty<number>
// 내용이 비어 있으므로 둘 간에 호환 가능
empty = empty2
empty2 = empty

interface NotEmpty<T> {
    data: T;
}

let notEmpty: NotEmpty<string>
let notEmpty2: NotEmpty<number>

// 내용에 generic의 사용이 있으므로 구조가 달라 호환 불가능
notEmpty = notEmpty2
notEmpty2 = notEmpty

 

위에서 쓴 것처럼 사실 실제로 어떻게 사용할지는 아직 감이 오지 않는다. typescript의 class나 interface 표현도 상속을 지원하기 때문에, 관계가 있는 타입 간에는 상속을 사용할 것 같다.