typeScript -15-

Photo by Matthew McBrayer on Unsplash

자바스크립트 '모듈'을 타입스크립트 파일에서 사용하는 방법

declaration files

타입스크립트는 기본적인 타입정의를 갖고있다.

타입 정의를 써야 하는 이유
우리가 타입스크립트를 사용하는 이유 -> 타입스크립트의 타입과 소통하기 위해
대부분 라이브러리,패키지,프레임워크를 사용하는데 이는 자바스크립트로 작성되어있음
자바스크립트 라이브러리를 타입스크립트 프로젝트에서 쓰려면 그것들의 타입에 대해 TS가 알 수 없음
타입스크립트에게 불러올 자바스크립트 함수의 모양을 설명해야 함 -> 타입정의 필요

자바스크립트 파일과 모듈을 위한 타입정의 작성

https://www.typescriptlang.org/ko/tsconfig#esModuleInterop

tsconfig에 es6모듈처럼 모듈을 불러올 수 있는 esModuleInterop 추가

대부분 타입스크립트보다 자바스크립트로 만들어진 패키지나 라이브러리를 사용하게 됨
타입스크립트에게 타입 설명

테스트를 위한 myPackage.js 작성

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

index.ts로 가서 myPackage.js가 노드모듈인것처럼 인식시키기
(npm 패키지 or 모듈처럼 node_module에 설치했다 가정)

타입보호를 위해 tsconfig.json에 strict 추가

{
    "include":["src"],
    "compilerOptions": {
        "outDir": "build",
        "target": "ES3",
        "lib":["ES6", "DOM"],
        "strict": true
    }
}

해당 모듈의 선언파일을 찾을 수 없다 나옴

Module Resolution

자동완성 기능이 가능한 이유 -> d.ts 파일

lib.dom.d.ts 파일의 localStorage

myPackage의 d.ts 파일을 만들어보기

myPackage.d.ts

declare module "myPackage"

에러가 사라짐

init의 타입을 정해주지 않았을경우 myPackage 안의 init 인식

myPackage.d.ts에서 init 타입을 정의해주기

config의 interface 정해주기

반환값도 알려주기

Config는 url:string을 받는다 알려주기

interface Config {
    url: string
}

declare module "myPackage" {
    function init(config:Config):boolean
}

index.ts에서 init 값 다시 살펴보기

package.js는 자바스크립트 코드이지만
package.d.ts에서 타입을 정의해주므로써 ts가 인식가능하게 됨

사용해보기

exit도 사용해보기

myPackage.d.ts에 exit 함수의 타입 정의하기

interface Config {
    url: string;
}

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

index.ts로 돌아와서 exit() 사용해보기

import { init, exit } from "myPackage";

init({url:"true"})
exit(1)

이런식으로 lib의 DOM도 작동하는것

밑에 나오는 설명은 주석을 달아주면 보이게 할 수 있음

localStorge.getItem의 경우

lib.dom.d.ts를 설명문 내용이 주석으로 적혀있음

d.ts 가 바로 lib에서 말하던 declaration files임