[TS] ts프로젝트 생성하기

터미널에서 npm init -y를 한다. 

 

 

package.json에서 main은 지우고 script는 비워두기

 

tsconfig.json 파일 만들어준다. (직접 만들어주면 된다) 

 

include 배열에는 우리가 자바스크립트로 컴파일하고 싶은 모든 디렉토리를 넣어줄 것이다. 

compilerOptions를 만들어주고 이 안에는 outDir을 넣어줄 것인데 얘는 자바스크립트 파일이 생성될 디렉터리를 지정한다. -> 타입스크립트에게 자바 스크립트 파일을 어디에 만들지 알려줘야 한다. 

 

다시 package.json으로 돌아가서 scripts에 "build":"tsc" 추가 

 

터미널에 npm run build하면 tsc가 작동하는 것을 볼 수 있다

그러면 ts코드가 js코드로 바뀐다!!

 

target

tsconfig.json에서 "target" :"ES3"를 넣어준다. target은 어떤 버전의 자바스크립트로 내가 타입스크립트를 컴파일 하고 싶은지를 나타낸다. 하지만 ES3에는 const가 존재하지 않는다. 오직 var만 존재할뿐..!

그래서 const 써주기 위해 ES6로 바꿔준다. 

 

Lib Configuration

자바스크립트 코드가 어디서 동작할지, 어떤 환경에서 실행될지를 알려준다.

 

DOM을 lib에 포함시켜두면 타입스크립트에서 document. 머시기머시기를 인식한다.

그래서 자동완성을 제공한다!! 이는 타입스크립트가 브라우저와 API타입을 인식하기 때문이다. 

 

Declaration Files

자바스크립트 파일과 모듈을 위한 타입정의를 어떻게 할까? 

즉, 자바스크립트로 만들어진 패키지를 설치했을 때 타입스크립트에 그 패키지의 타입을 정의하는 방법에 대해서 알아보자. 

 

src 폴더 하위에 myPackage.js를 만들어준다. 

myPackage.js에 적는다.

 

그리고 타입스크립트가 우릴 보호해주기 위해서 tsconfig.json에서 strict:true로 설정해서 모드를 활성화 시켜준다.

 

이렇게하면 index.ts에서 init을 호출할 때

에러가 뜬다...!

에러를 해결하기 위해서는 모듈이 필요하다. 왜냐면 얘가 src 소속이지만 node-moudles 처럼 쓰일 것 이기 때문에..!

그래서 src 안에 myPackage.d.ts라는 모듈을 하나 선언할 것이다. 

이 안에는 구현을 적는게 아니라 call signature만 적어줄 것이다. 

 

이러면 에러도 사라지고, 타입스크립트가 init의 타입을 이해하게 된다.

 

 

Js Doc

 

타입스크립트를 자바스크립트 프로젝트에 도입할 때 , 어떤 일이 일어나는지 알아보자.