자바스크립트와 타입스크립트를 프로젝트에서 사용하는 방법 두가지
1. Declaration Files : 파일 전체를 위한 타입 정의(파일 따로 새성해 타입들 정의하기)
2. JSDoc : 자바스크립트 파일도 타입스크립트로 보호받는 방법(기존 소스 영향 없도록)
아래 포스팅은 노마드코더의 Typescript 강의 내용을 제가 나중에 찾아볼 때를 위해 정리한 내용입니다.
오늘 포스팅은 강의 # 5.3 ~ 5.4 Declaration Files ~ JSDoc
ㅇ 강의 원본 링크 - Typescript로 블록체인 만들기: #5.3
# 5.3 Declaration Files 정의파일
Type Definition 타입 정의,
TypeScript는 내장된 JS코드와 API타입에 대해 기본 타입 정의를 가지고 있어 타입 설명이 가능하다.
누군가 TS에 이미 document 오브젝트 모양, localStorage 구조, argu, return값/타입 등을 이미 입력해뒀기 때문.
타입정의 목적이 곧 TS를 사용하는 이유다. call signature 등으로 프로그램을 보호하기 때문이다.
[ 문제점 ]
대부분 패키지나 프레임웤, lib를 사용하는데 이들은 JS로 만들어져 TS에서 사용하려 해도
TS는 그 타입들을 알 길이 없다. 그래서 개발자가 TS에 사용할 JS 파일/모듈 위한 타입정의를 해줘야 한다.
☞ 자바스크립트 파일과 모듈을 타입스크립트에서 사용하기 위해 '타입 정의' 작성 필요
보통 TS 패키지나 lib가 아닌, JS 패키지와 lib를 사용하게 되므로, TS에게 JS 파일 모양(타입) 설명해줘야 함..
index.ts 파일로 가서 myPackage가 node의 모듈인 것처럼 행동해본다. (아래 오른쪽 캡쳐)
myPackage.js를 GitHub과 npm에 푸시하고,
이걸 설치했다는 가정에서 myPackage가 node_module인 것처럼 취급해 진행해본다.
아래 좌측 캡쳐처럼 init을 import하지만 init 클릭해도 이동안됨. 좌측 캡쳐 4번째 line처럼 init()으로 사용하면 작동함.
typeScript가 제대로 작동하지 않는(보호해주지 못하는) 이유는 strict 모드로 설정되지 않아서임.
☞ tsconfig.json 에서 "strict": ture설정해 활성화. strict 모드는 TS에서 성가시게(엄격히) 제어하면서 오류표기됨
tsconfig.json파일의 strict mode를 ture로 설정하면, 아래 캡쳐처럼 TS가 정의 파일*을 찾을수 없다고 뜸.
*정의파일 : JS 코드 모양을 TS 에 설명해주는 파일. TS에 localStorage와 document모양 설명을 위해 작성해둔 파일.
위의 tsconfig.json 파일 내 "lib": [.. "dom"] 이 있어서 localStorage를 통해 아래처럼 프리뷰(lib.dom.d.ts) 볼수 있는 것.
index.ts 파일에서 'localStorage' 위에서 'command' 나 'ctrl' 버튼 클릭하면
localStorage와 관련된 옵션과 모양을 설명해준 것들이 나온다. (이걸 이용하기만 하면 되는것)
☞ myPackage도 정의파일에 저장된것처럼 사용토록 수동 정의하는 강의.
자동완성도 결국 TS가 '~d.ts'라는 정의 파일이 있기 때문에 불러오기 때문에 ~.d.ts 파일을 수동 생성하는 방법 안내예정.
d.ts 파일 : 이 정의파일에서 타입스크립트가 우리가 사용하는 타입을 찾아낸다.
맨 위 캡쳐에서 보듯, myPackage.js 파일내 두개 함수 존재, 자동완성 이용하려면 myPackage.d.ts에 넣어두면 된다.
~.d.ts 파일에 init 함수 call signatures 정의, argu, return 값 넣어두면
ts파일 입장에선 호출하는 init을 이미 알고 있기에, 아래 우측 캡쳐처럼 오류없이 import 할수 있다.
대부분이 npm이나 github에서 받아온 패키지를 사용하기 때문에 가져오는 원리를 알아본 강의 내용이었다.
이번 강의는 node_modules에 설치된 JS 모듈을 TS 파일에서 어떻게 사용하는지에 대한 강의,
다음 강의는 내가 가진 TS 스크립트를 JS에서 어떻게 만들어볼 수 있는지.
# 5.4 JSDoc
5.3은 타입스크립트에 신규 패키지 타입 정의하는 방법. JS 패키지를 TS프로젝트에 설치할 일은 많기에 필수 학습 필요.
물론 타입정의 파일을 쓸 일은 많진 않을것이나, #5.4 JSDoc는 많이 사용 예정이니 더 학습 필요하다 .
자주 겪을 상황은 프로젝트 안에 JS와 TS파일이 같이 있는 경우. JS파일을 TS 장점 이용키위한 방법. 특히 많음.
1. TS 안에 JS를 허용한다는 의미로 tsconfig.json "allowJs" : true 추가
☞ JS 파일 안에서도 TS처럼 함수 호출 가능.
자바스크립트 소스를 이용하면서 원하는 부분은 타입스크립트 운영 가능. (JS도 검사 해줌)
물론 함수 call signature 추론도 가능
2. 자바스크립트 파일도 타입스크립트가 보호해줄 수 있는 방법 : // @ts-check 추가
타입스크립트 파일에게 자바스크립트 파일을 확인하라는 표시. (TS 문법으로 수정하지 않아도 됨)
JSDoc : 코멘트로 이뤄진 문법
아래 같은 문법은 TS만의 문법이나, JS도 가능함. 아래처럼 js파일 내, 주석 내에 comment만 추가하면 TS에서 적용함.
3. 그냥 JS파일 안에 JSDoc 코멘트만 더하면 TS가 도와줌! /** ~ */
위처럼 주석에 param, return 등의 정보 입력 후, ts파일에서 해당 함수(ex. init) 생성시, 아래처럼 call signature 확인 가능
자바스크립트 코드를 다시 작성하거나 수정할 필요없이, 코멘트만 추가하면 js인데도 ts로 보호받을수 있는 기능!
(참고) 바로 위, init() 함수는 오류가 뜨는데 JSDoc내 return 값을 아래처럼 void로 변경하면 오류 없어짐
강의 하단 참고될만한 좋은 댓글이 있어 추가함. (문제시 알려주시면 삭제하겠습니다..)
끝.
