1. 타입스크립트와 자바스크립트 관계 이해하기 알아보기
(JS ∪ 타입체커 통과한 TS) ⊆ TS
2. 타입스크립트 설정 이해하기
js → ts 중인 코드가 아니라면 noImplicit 사용, strict NullChedcks는 기본으로 가져가는 편이 좋습니다.
3. 코드 생성과 타입이 관계없음을 이해하기
런타임에는 타입 체크가 불가능합니다.
instanceof나 typeof는 컴파일 과정에서 사라져 아무런 역할을 할 수 없습니다. 해결 법은 아래와 같습니다.
// 값 사용하기
if(shape instanceof Rectangle)
// 타입 사용하기
interface Square {
kind: 'square';
width: number;
}
interface Rectangle {
kind: 'rectangle';
height: number;
width: number;
}
type Shape = Square | Rectangle;
...
if(shape.knd === 'rectangle') // 타입이 Rectangle
else // 타입이 Square
// 값 + 타입
class Square {}
class Rectangle extends Square {}
if(shape instanceof Rectangle) // 타입이 Rectangle
JavaScript
복사
런타임 타입은 선언된 타입과 다를 수 있습니다.
// value가 api 요청등으로 넘어오는 값이라면 TS로도 잡을 수 없습니다.
function setLightSwitch(value: boolean){
switch(value){
case true:
turnOn();
break;
case false:
turnOff();
break;
default:
...
}
}
JavaScript
복사
4. 구조적 타이핑에 익숙해지기
JS는 기본적으로 덕타이핑이며, TS는 매개변수 값이 요구사항을 만족한다면 신경쓰지 않는 구조적 타이핑입니다.
덕타이핑의 경우 동적 타이핑에서(실행 시켜야 에러가 나옴), 구조적 타이핑의 경우 정적 타이핑(작성중 에러가 나옴)에서 쓰입니다.
interface Vector2D {
x: number;
y: number;
}
function calculate(v: Vector2D){}
const v: NamedVector = { x: 1, y: 2, name: 'v' };
calculate(v); // 정상
JavaScript
복사
덕타이핑
객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입으로 간주합니다. 다음과 같은 명제를 생각하면 됩니다.
“만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥 거린다면 그 새는 오리라고 부를 것 입니다.”
5. any 타입 지양하기
TS의 이점을 제거해버리기 때문에 지양해야합니다.