let a; // let a:any
a = 10;
a = 'abc'
let b = a // let b:any;
b
의 값을 할당 하기전 변수 a
의 값이 변했지만 b
의 타입은 여전히 any
이다.
그래서 타입을 단언하는 방법은?
let b = a as string;
as
를 사용해 최종적 으로 확실 하게 타입을 단언해준다.
타입 단언은 주로 DOM API를 조작할 때 많이 사용된다. 아래 예제를 보자.
let div = document.querySelector('div')// let div: HTMLDivElement | null
div.innerText;
타입을 지정해주기 전 div는 HTMLDivElement
| null
일수 가 있어 오류가 생길수 있다.
let div = document.querySelector('div') as HTMLDivElement // let div: HTMLDivElement
div.innerText;
as
로 정확하게 타입을 단언해 준다면 비로소 DOM API를 조작할수 있게 된다.
한마디로 타입단언을 하는 것은 '타입스크립트보다 개발자인 내가 더 이 타입에 대해서 자세히 알고 있으니 넌 나만 따라 와라' 라는 의미이다.
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function introduce(): Developer | Person {
return { name: 'Olive', age: 26, skill:'TypeScript'}
}
let Olive = introduce()
console.log(Olive.skill);
위의 코드를 보면 변수 Olive에 introduce()를 할당해 주어 Developer 이거나 Person의 인터페이스를 사용할수 있다. 하지만 Olive.skill
을 살펴봤을때 skill형식이 없다고 나오게 된다. 이러한 오류를 해결해 보자
if((Olive as Developer).skill) {
let skill = (Olive as Developer).skill;
console.log(skill);
} else if ((Olive as Person).age){
let age = (Olive as Person).age;
console.log(age);
}
타입을 단언해서 Developer
에 있는 skill
과 Person
에 있는 age
를 사용할수 있게 되지만 가독성이 떨어지게 된다. 이럴때 사용하는 게 타입 가드 이다.
function isDeveloper(target: Developer | Person): target is Developer {
return ( target as Developer).skill !== undefined
}
if(isDeveloper(Olive)){
Olive.skill
} else {
Olive.age
}
is
라는 키워드를 사용하는데 위의 코드를 해석하면 target
은 Developer
이다.
타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미함.
interface Ironman {
name: string;
}
class Avengers {
name: string;
}
let i: Ironman;
i = new Avengers(); // OK, because of structural typing
위와 같은 코드가 정상적으로 동작하는 이유는 자바스크립트의 작동방식과 관련이 있는데, 기본적으로 자바스크립트는 객체 리터럴이나 익명 함수 등을 사용하기 때문에 명시적으로 타입을 지정하는 것보다는 코드의 구조 관점에서 타입을 지정하는 것이 더 잘 어울린다.
structural typing : 코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단 하는 것.
interface Person {
name: string;
}
let profile: Person;
// 타입스크립트는 olive의 타입을 {name:'string', skill:'string'} 으로 추론하였다.
let olive = {name:'Olive', skill:'TypeScript'};
profile = olive;
olive
가 profile
에 호환될 수 있는 이유는 olive
의 속성중에 name
이 있기 때문이다. Persond
인터페이스에서 name
속성을 갖고 있기 때문에 olive
는 Person
타입에 호환될수 있다.
function introduce(a: Person){
console.log("자기소개를 해보세요", a.name);
}
// 위에서 정의한 olive 변수, 타입은 {name:'string', skill:'string'}
introduce(olive);
olive
변수에 이미 name
속성 뿐만 아니라 skill
속성도 있기 때문에 introduce
함수의 호출 인자로 넘길수 있다.
타입 스크립트는 컴파일 시점에서 타입을 추론할 수 없는 특정 타입에 대해서 일단 안전하다고 보는 특성이 있다. 이걸 'it's said to not be sound" 라고 표현한다.
Enum
은 number
타입과 호환되지만 Enum
타입끼리는 호한 되지 않는다.
enum Status { Ready, Waiting };
enum Color { Red, Blue, Green };
let status = Status.Ready;
status = Color.Green // Error
클래스 타입은 클래스 타입끼리 비교할 때 static member 와 constructor를 제외하고 속성만 비교한다.
class Peter {
stature: number;
constructor(name: string, value: number) { }
}
class Olive {
stature: number;
constructor(value: number) { }
}
let a: Peter;
let s: Olive;
a = s; // OK
s = a; // OK
제네릭은 제네릭 타입 간의 호환 여부를 판단할 때 타입 인자 <T>
가 속성에 할당 되었는지를 기준으로 한다.
interface Empty<T> {
//...
}
let x: Empty<number>;
let y: Empty<string>;
x = y; // OK, because y matches structure of x
y = x
위 인터페이스는 일단 속성이 없기 때문에 x
와 y
는 같은 타입으로 간주된다. 하지만 만약 아래와 같이 인터페이스에 속성이 있어서 제네릭의 타입 인자가 속성에 할당된다면 얘기는 달라지게 된다.
interface NotEmpty<T> {
data: T;
}
let x: NotEmpty<number>;
let y: NotEmpty<string>;
x = y; // Error, because x and y are not compatible
인터페이스 NotEmpty
에 넘긴 제네릭 타입<T>
이 data 속성에 할당되었으므로 x
와 y
는 서로 다른 타입으로 간주된다.
참고