[타입스크립트] 타입스크립트 설정파일 설명 (tsconfig.json)

tsconfig.json파일이 있으면 vs code는 프로젝트가 타입스크립트를 사용한다는 것을 알게 되고 타입스크립트 자동완성 기능을 제공해준다.

 

tsconfig.json

{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build",
    "target": "es5",
    "lib": ["ES6", "DOM"],
    "strict": true,
    "allowJs": true, // 타입스크립트 파일에 자바스크립트 import 가능하게 하기
    "esModuleInterop": true,
    "module": "CommonJS"
  }
}

1. include

타입스크립트 파일이 어디에 위치하는지

배열 안에는 자바스크립트로 컴파일하고 싶은 모든 디렉토리를 명시

타입스크립트가 src 폴더 안에 있는 모든 파일을 자바스크립트로 컴파일시켜준다

2. compilerOptions

outDir

자바스크립트 파일이 생성될 디렉토리 지정

target

어떤 버전의 자바스크립트로 컴파일하고 싶은지를 명시

lib (라이브러리)

목표로 하는 실행 환경을 나타낸다 즉 자바스크립트 코드가 어디에서 동작할지 알려준다

자바스크립트의 어떤 버전이 그 환경에서 사용되는지를 나타냄으로 타입스크립트에서 사용할 API의 자동완성 기능을 제공해준다

lib에 명시된 실행 환경에 따라 타입스크립트는 해당 환경에의 API 타입을 알려준다

d.ts 확장자를 가진 정의파일(declaration file)을 타입스크립트가 가지고 있기 때문에 타입을 찾아낼 수 있다

JSDoc

타입스크립트 설정 파일에 allowJs를 true로 바꿔주면 타입스크립트 파일에 자바스크립트 파일을 불러올 수 있다. 이때 불러온 자바스크립트 파일은 타입이 없기 때문에 타입스크립트가 해당 자바스크립트의 타입을 추측한다. 

패키지나 라이브러리처럼 코드가 엄청 많을때는 코드를 변경, 삭제하는 것보다 원본을 유지하는 것이 더 좋다. 패키지나 라이브러리는 대부분 자바스크립트로 만들어졌다. 타입스크립트 프로젝트에서 자바스크립트로 된 패키지나 라이브러리를 사용할때 타입스크립트의 보호를 받고싶다면 어떻게 해야할까?

타입스크립트 파일이 자바스크립트 파일을 확인하게 하고 싶지만 자바스크립트를 타입스크립트로 변환하고 싶지는 않다면 코멘트를 사용해 자바스크립트 코드에 부분적으로 타입을 추가해준다.

JSDoc은 코멘트로 이루어진 문법이다. 자바스크립트 함수 위에 코멘트를 적어주면 타입스크립트가 적용된다.

esModuleInterop

 

 

package.json

아래의 코드를 package.json에 추가하면 npm run build 명령어를 입력했을때 타입스크립트 파일이 자바스크립트로 변환된다. build폴더 안에 변환된 자바스크립트 파일을 찾을 수 있다.

{
  "scripts": {
    "build": "tsc"
  }
}

 

lib, declaration file

타입스크립트는 내장된 자바스크립트 API를 위한 기본적인 타입 정의를 가지고 있다

*타입정의는 타입스크립트에게 자바스크립트 코드와 API 타입을 설명할 수 있도록 해준다

프로젝트에서 사용하는 패키지, 프레임워크, 라이브러리는 타입스크립트가 아닌 자바스크립트로 만들어졌다. 그래서 자바스크립트로 만들어진 패키지를 타입스크립트 프로젝트에서 쓰려고 한다면 타입스크립트는 해당 패키지에 있는 데이터의 타입에 대해 알 수가 없다.

패키지에서 불러온 자바스크립트 함수의 몽야을 설명하려면 타입 정의가 필요하다

자바스크립트 파일과 모듈에 어떻게 타입정의를 작성할까? declaration 파일을 사용한다 

하지만 declaration 파일을 만들어주는 것보다 자바스크립트 파일에 간단히 타입을 추가해주는 JSDoc 문법을 주로 사용한다

myPackage.js

npm으로 설치한 myPackage라는 패키지가 있다고 가정을 해보자 (node_modules 안에 있는 패키지중 하나인 myPcakge.js)

export function init(config) {
  return true;
}

export function exit(code){
  return code + 1;
}

index.ts

타입스크립트 설정파일에서 strict이 true일경우 정의 파일을 찾을 수 없다는 에러가 발생한다

import {init} from "myPackage"

init()

myPackage.d.ts

declaration file(정의파일): 자바스크립트 코드의 모양을 타입스크립트에 설명해주는 파일

// 모듈 선언
interface Config {
  url: string;
}

declare module "myPackage" {
  function init(config:Config):boolean;
  function exit(code:number):number;
}

에러가 사라진다

import { init, exit } from "myPackage"

init({
  url: "true"
})

exit(1)

 

JSDoc

타입스크립트 프로젝트에서 자바스크립트로 된 패키지나 라이브러리를 사용할때 타입을 추가하고 싶다면 JSDoc 문법을 사용해준다. 자바스크립트로 된 코드에 JSDoc 문법으로 코멘트를 달아 타입만 더해줄 수 있어 브라우저에 렌더링될 수 있게 한다. JSDoc 문법을 사용하면 자바스크립트 코드를 수정하지 않고도 타입스크립트의 보호를 받을 수 있게 되는 장점이 있다.

myPackage.js

자바스크립트 파일에 // @ts-check이라는 코멘트를 달아 자바스크립트 코드에 타입을 추가해준다.

@ts-check: 타입스크립트가 자바스크립트 코드를 체크해줄 수 있게 한다.

// @ts-check
/**
  * Initializes the project
  * @param {object} config
  * @param {boolean} config.debug
  * @param {string} config.url
  * @returns {boolean}
*/
export function init(config) {
  return true;
}

/**
  * Exits the program
  * @param {number} code
  * @returns {number}
*/
export function exit(code){
  return code + 1;
}

index.ts

타입스크립트 설정 파일에 allowJs를 true로 바꿔주면 타입스크립트 파일에 자바스크립트 파일을 불러올 수 있다. 아래 예제에서는 myPackage라는 자바스크립트 파일을 index.ts로 불러왔다.

import { init, exit } from "./myPackage"

 

Definitely Typed

타입스크립트로 만들어진 index에 자바스크립트로 작성된 패키지를 import하면 타입에러가 발생한다. 이때 자바스크립트로 만들어진 패키지 안의 함수를 타입스크립트한테 설명해줄 파일이 필요하다. 하지만 d.ts와 같은 정의 파일을 만드는 것은 시간이 오래 걸리므로 효율적이지 못하다. 

 

패키지가 타입스크립트의 보호 장치를 사용할 수 있게 하고싶지만 d.ts와 같은 정의 파일을 만들거나 타입을 하나하나 작성하는 것 말고 더 생산적인 방법은 없을까? 이때 사용하는 것이 Definitely Typed 리포다.

 

Definitely Typed

npm에 존재하는 거의 모든 패키지들에 대한 타입 정의를 가지고 있는 깃 레파지토리다. 출시일이 타입스크립트 이전인 패키지도 만약 개발자가 해당 패키지에 대한 타입을 만들고 기여했다면 해당 리포에서도 오래된 패키지의 타입을 찾을 수 있다.

🔗 Definitely Typed 리포지토리 링크

 

Definitely Typed 리포에 설치한 패키지의 타입이 있다면 아래의 명령어를 통해 설치하자.

npm i -D @types/패키지이름

 

요즘에는 패키지를 설치할때 자바스크립트 파일 이외에도 .d.ts 파일을 함께 포함시킨 경우가 많으므로 타입스크립트를 바로 사용할 수 있게 한다.