JS => TS

성준영·2022년 7월 2일
0

이전에 작성했던 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 에서 확인 할 수 있다.

profile
기록해버리기

0개의 댓글