타입 스크립트를 사용해야하는 2가지 중요한 이유가 있다.
- JS의 동적 타이핑으로 발생하는 여러 문제들을 예방할 수 있다.
- 앞으로 반영될 JS 문법을 당장 사용할 수 있다. (ES Next)
JS 동적 타이핑으로 발생하는 문제를 예방하는 코딩은 매우 귀찮기때문에 방치되는 경우가 많다.
JS 최신 문법은 간편한 기능을 제공하는 경우가 많고, 여러 오류들이 수정되어있다.
JS 동적 타이핑이란
1
2
3
| let box;
box = "hello";
box = 100;
|
1
2
3
4
5
6
7
8
| let box;
console.log(typeof(box)); // undefined
box = "Hello";
console.log(typeof(box)); // string
box = 100;
console.log(typeof(box)); // number
|
동적 타이핑은 할당 코드 수행 시점에 해석하여 자료형을 결정한다.
이로 인해 코드가 간결해지고, 로직을 명확하게 보여줄 수 있지만. 할당 될 때 마다 자료형을 결정하는 과정으로 인해 정적 타이핑보다 상대적으로 느리고, 변수를 여러 유형 값을 사용할 여지를 만들어 코드에 혼란을 준다.
동적 타이핑의 문제
1
2
3
4
5
6
7
| function getProduct(id){
return {
id: id,
name: `Awesome Gadget ${id}`,
price: 99.5
}
}
|
1
2
3
4
5
| const product = getProduct(1);
console.log(`The product ${product.Name} costs $${product.price}`);
// result
// The product undefined costs $99.5
|
1
2
3
| const showProduct = (name, price) => {
console.log(`The product ${name} costs ${price}$.`);
};
|
1
2
3
4
5
| const product = getProduct(1);
showProduct(product.price, product.name);
// result
// The product 99.5 costs $Awesome Gadget 1
|
- 인자 순서 실수로 인해 다른 의도로 출력되었다.
타입스크립트는 어떤 방식으로 동적 타이핑 문제를 해결했을까?
interface
1
2
3
4
5
| interface Product{
id: number,
name: string,
price: number
};
|
interface를 통해 Product객체의 형태를 정의했다.
1
2
3
4
5
6
7
| function getProduct(id) : Product{
return {
id: id,
name: `Awesome Gadget ${id}`,
price: 99.5
}
}
|
getProduct함수를 Product타입을 반환하도록 선언할 수 있다.
1
2
| const product = getProduct(1);
console.log(`The product ${product.Name} costs $${product.price}`);
|
함수에 반환 인터페이스를 설정하여 입력이 미리 정의한 타입이 아닐 경우 코드 에디터에서 잘못된 코드임을 표시한다.
1
2
3
| const showProduct = (name: string, price:number) => {
console.log(`The product ${name} costs ${price}$.`);
};
|
1
2
| const product = getProduct(1);
showProduct(product.price, product.name);
|
결론
- 자바스크립트는 동적 타이핑을 지원하여 유연하지만 그로 인해 많은 문제들이 발생한다.
- 타입스크립트는 타입을 통해 동적 타이핑에서 발생하는 문제들을 예방한다.
