이전에 작성했던 JS코드에 더해 TS코드를 짜고 싶지만 JS코드는 건들고 싶지 않을 때에는
tsconfig.json파일안에
"compilerOptions":{
"allowJs": true
}
를 해줘서 TS안에 JS를 허용해주면 된다.
하지만 이렇게 하면 JS코드는 타입 보호를 받기 어렵기 때문에
코드 유지보수를 할 때 자동완성이라던가 에러 처리에 있어서 어려움이 있을 수 있다.
JS파일은 건드리지 않으면서 TS의 타입 보호도 받고 싶다면 어떻게 해야 할까?
결론부터 말하자면 타입 보호를 받고 싶은 JS파일 위에
//ts-check
을 적어주고 타입 설명하고 싶은 함수 위에
/**
* 설명
* @param {타입} param
* @param {타입} param
...
* @return 타입
*/
을 적어주면 된다.
아래 이미지는 coolPackage.js
에 몇개의 함수와 함께 예시코드를 적은 것이다.
아래 이미지는 index.ts
에서 coolPackage.js
를 불러온 모습이다.
아래 두 이미지는 coolPackage.js
에서 불러온 함수들이 index.ts
에서 타입 보호를 받는 모습이다.
이와 같이 주석을 통해 타입 보호를 받는 코드를 짜면 JS에서 TS코드로 마이그레이션할 때보다 코드가 망가질 수 있다는 부담이 덜 할 수 도 있겠다는 생각이 들었다.
위의 예제는 CodSandBox 에서 확인 할 수 있다.