일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- vuetify
- AI
- property
- C++
- leetcode
- scss
- C#
- machine learning
- git
- 앙상블
- VUE
- webpack
- type
- BOJ
- 보안
- docker
- nginx
- dotenv
- generic
- Python
- JavaScript
- npm
- condition
- security
- vue.js
- bash
- loop
- TypeScript
- Clone
- var
- Today
- Total
ice rabbit programming
[JS][TS] Typescript의 Type Assertion과 Type Compatibility 본문
[JS][TS] Typescript의 Type Assertion과 Type Compatibility
판교토끼 2021. 3. 1. 03:36typescript 강의를 들으면서 정리한 마지막 글에서 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 표현도 상속을 지원하기 때문에, 관계가 있는 타입 간에는 상속을 사용할 것 같다.
'Development > JavaScript' 카테고리의 다른 글
[vue] 컴포넌트 간 통신에 v-model 활용하기 (0) | 2021.03.08 |
---|---|
[Vue] 렌더링에서 key의 역할 (0) | 2021.03.03 |
[vue] VS Code에서 ESLint 적용하기 (2) | 2021.02.05 |
[JS] Javascript에서 base64 인코딩/디코딩하기 (0) | 2021.01.24 |
[JS][TS] Typescript의 Decorator와 Type Guard (0) | 2020.12.31 |