jquery만 쓰다가 typescript 한 번 따라하기 (3)
많이 왔습니다;
저는 몇년간 jquery만 쓰다가 어느날 갑자기 React로 개발을 하게 되었는데요, 그 때 무척 고생했었습니다. 그래서 한 번 typescript까지 소프트 랜딩을 할 수 있는 문서를 만들어보고 싶었습니다.
저도 배우는 입장이라 부족한 부분은 말씀해주시면 많이 감사합니다. 🥰
vscode와 함께 typescript의 여러 좋은 기능을 한 번 사용해 보겠습니다.
설치해 주세요!
이번 목표: typescript의 좋은 기능을 느껴보기
정적 타입 체크
지난번에 하던 프로젝트에서 계속해 보겠습니다.
webpack.config.js에 아래와 같이 resolve를 추가합니다.resolve: { extensions: [‘.tsx’, ‘.ts’, ‘.js’] }index.ts의import mymodule을 아래와 같이 수정합니다.import mymodule = require(‘./mymodule’);
1을 했기 때문에 이제 확장자를 생략할 수 있습니다.
이제 vscode에서 typescript의 정적 타입 체크를 이용할 수 있습니다.
한 번 var test2의 타입을 number로 바꿔주세요.
이제 yarn build까지 가지 않아도 vscode에서 타입 에러를 바로 확인할 수 있습니다. 편리하네요.
자동 완성
먼저 이전에 만들어둔 tsconfig.json 파일을 아래와 같이 수정해주세요.{ “compilerOptions”: { “noImplicitAny”: true } }그리고 yarn build를 해보면 에러가 발생합니다.
ERROR in /.../index.ts(1,20)TS7016: Could not find a declaration file for module 'jquery'. '/.../node_modules/jquery/dist/jquery.js' implicitly has an 'any' type.
“noImplicitAny”: true 때문인데요, javascript 패키지의 타입스크립트 정의 파일을 엄격하게 요구하는 옵션입니다. 권장되는 옵션이므로 이대로 두고, jquery 모듈의 정의 파일을 추가해 줍시다.
yarn add @types/jquery
이후 다시 yarn build를 해보면 정상적으로 번들링과 컴파일이 잘 됩니다.
그리고 이제 vscode에서 jquery의 자동 완성을 지원합니다.
편하다.. 정적 타입 언어의 장점이네요. 다른 패키지들도 이렇게 타입스크립트 정의 파일을 제공해주고 있습니다.
JSDoc
JSDoc도 지원합니다. mymodule.test2()에 간단히 주석을 추가해 봅시다.
/**
* JSDoc을 한 번 사용해 봅니다.
* @return 테스트 문장
*/
export function test2(): string {
return 'hello, world. this is mymodule.test2()';
}
툴팁으로 JSDoc을 바로 확인할 수 있습니다. 좋네요.
vscode를 함께 사용하면 typescript를 더 편리하게 사용할 수 있다는 것을 알아보았습니다. 다음에는 실제로 웹페이지 하나를 만들어 보겠습니다. html, jquery, mustache, 그리고 typescript를 써서 전통적인(?) 방식으로 진행해보려 합니다.
전체 코드는 아래에서 확인하실 수 있습니다.
https://github.com/eungook/webpack-test-03
