-
오탈자나 타입 오류가 있을 때, 코드를 작성하는 시점에서는 알 수 없고 브라우저 화면상으로 확인해야만 오류를 발견할 수 있다.
-
자바스크립트에 타입이 있으면 다음의 장점이 있다.
- 에러의 사전 방지
- 코드 가이드 및 자동 완성(개발 생산성 향상)
/**
*
* @typedef {object} User
* @property {string} name
* @property {string} email
* @property {string} adress
*
*/
- jsdoc으로 타입을 미리 definition하면, 이 값들을 사용하려고 할 때 vscode 상에서 ★이 붙은 자동완성 키워드가 뜬다.
- 따라서 해당 타입에 대한 API를 미리보기로 확인하고, tab으로 빠르고 정확하게 작성할 수 있다.
- 또한, 오탈자가 발생하면 빨간줄로 미리 알려주기 때문에 브라우저로 실행해서 결과를 확인하기 전에 실수를 방지할 수 있다.
/*
*
* @param {number} a 첫 번째 숫자
* @param {number} b 두 번째 숫자
*/
function sum(a, b) {
return a + b;
}
- 이렇게
jsdoc
으로 파라미터의 타입을 정의해두면 해당 파라미터를 사용할 때 타입에 대한 프리뷰가 제공되고, 해당 함수의 반환타입까지 제공한다. - 심지어
a
파라미터에 대한 설명(첫 번째 숫자)까지 덧붙이면 그 설명까지 프리뷰로 제공된다. - 그러나 타입스크립트와 달리, 자바스크립트에서는 정의한 타입에 어긋나게 사용했을 때 빨간줄을 그어서 알림을 주는 기능이 없다.
- 이러한 기능을 사용하고 싶을 때는
//@ts-check
를 사용하면 된다.// @ts-check sum(10, "20");
- ts 파일을 생성하고 사용할 때 이 파일을 브라우저가 인식할 수 있도록 컴파일을 해야 한다.
npm i typescript -g
설치tsc 변환할파일.ts
tsconfig.json
파일을 생성하여 컴파일 기본 설정을 넣어주자.
{
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"noImplicitAny": true
}
}
- js 파일을 허용하고,
//@ts-check
가 자동으로 생성되도록 하고, 타입을 any라도 꼭 명시해야한다는 설정