TypeScript 연습 <1> -16-

3.

________________________________

< 타입스크립트 프로젝트 셋팅 - 타입 정의 >

 

 

 

1)

 

src 폴더 안에 “ myPackage.js “  라는 파일을 하나 만들자.

 

폴더 : kimminsoo -> NomadCoders -> typechain -> src -> myPackage.js

 

그리고 다음과 같이 작성

——

export function init (config) {

    return true

}

 

export function exit (config) {

    return code + 1;

}

——

 

 

 

 

다음으로, 함께 src 폴더 안에 있는 index.ts 파일로 가서, myPackage 가 node 의 모듈 인 것처럼 행동해보자.

 

——

// index.ts 

 

import {init} from "myPackage";

——

 

이렇게 작성하고, 잠시 tsconfig.json 으로 가서 오류로 부터 타입스크립트가 나를 지켜줄 수 있도록 옵션을 추가하자.

——

// tsconfig.json

 

"compilerOptions": {

        "outDir": "build",

        "target": "ES6",

        "lib": ["ES6", "DOM"],

        "strict": true

    }

——

=> "strict": true 를 추가. 이제부터 타입스크립트가 나를 매우 성가시게 만들거야.

 

 

"strict": true 를 추가하니, index.ts 에서 import 로 가져온 < import {init} from "myPackage" > 부분에 오류가 발생.

“정의 파일” 을 찾을 수 없다면서 에러가 발생할거야.

즉 해당 자바스크립트 코드의 모양을 타입스크립트에게 설명해 주고 있지 않다는 거지.

=> 바로 그 “정의 파일” 이 타입스크립트에게 LocalStorage, document, window 등에 대해 알려주기 위해서 훌륭한 사람들이 작성해준 파일이지.

이 경우 정의 파일은 “node_modules/typescript/lib/lib.dom.d.ts” 이고.

 

 

 

 

lib.dom.d.ts 이 그러한 것 처럼, 나 또한 myPackage.js 를 일종의 ‘타입 정의를 위한 정의 파일’ 로 만들거야.

즉 lib.dom.d.ts 마냥 myPackage.js 를 node_modules 안에 있는 파일처럼 취급하며 코딩을 해보자.

 

 

 

 

 

2)

src 폴더 안에 “ myPackage.d.ts “  라는 파일을 하나 만들자.

폴더 : kimminsoo -> NomadCoders -> typechain -> src -> myPackage.d.ts

 

*** d.ts 라는 확장자가 꼭 필요해. 이걸 ‘정의 파일’ 이라고 취급.

 

그리고 myPackage.d.ts 내부에서 모듈 하나를 선언할 거야. 왜냐하면 이 파일 자체를 모듈로서 취급할 거니까.

 

——

// myPackage.d.ts

 

interface Config{

    url:string

}

 

declare module "myPackage" {

    function init(config:Config): boolean

}

 

 

// index.ts

import {init} from "myPackage";

——

=> declare module "myPackage" 이라는 키워드를 사용해서 myPackage.d.ts 을 마치 하나의 npm 패키지 처럼 만들었어.

그리고 Init 함수에 대해서도 매개변수와 리턴의 타입을 명시해 주니, index.ts 파일에서도 더 이상 에러가 발생하지 않아.

타입스크립트에게 init 함수가 구동하는데에 있어서 필요한 타입들을 모두 알려주고 있는 거지.

 

 

그렇게 생각할 수 있어.

“ 오 마이 갓;; 그럼 타입스크립트를 사용하는 프로젝트에 자바스크립트 npm 패키지를 인스톨 할 때마다 이렇게 해줘야 되는거야? “

아니, 사실 그렇지는 않아. 내가 손수 이런 ‘타입 정의’ 를 할 확률은 매우 낮아.

왜 그런지는 차차 알아보자.

 

여기서 중요한 건, 타입스크립트가 LocalStrorage 의 모양을 어떻게 하는지, DOM  에 대해서 어떻게 아는지, 그 과정을 이해하는 것이야.

 

 

——

// myPackage.d.ts

 

interface Config {

    url:string

}

 

declare module "myPackage" {

    function init(config:Config): boolean

    function exit(code:number): number 

}

 

 

// index.ts

import {init, exit} from "myPackage";

 

init({

    url: ""

})

 

exit(1)

——

=> 이런 방식으로 타입스크립트는 DOM, localStorage 등의 API 들의 타입을 미리 알고 있는 거야.

이미 d.ts 파일이라는 ‘정의 파일’ 이 준비되어 있고, 이미 고맙게도 누군가가 정의 파일에 ‘타입 정의’ 를 다 해둔 거지.

 

 

만약 우리가 npm 을 통해서 자바스크립트로 만들어 진 라이브러리나 패키지를 인스롤 한다면,

그 패키지에서 사용되는 객체나 함수들이 어떤 타입의 변수들로 구동되는가에 대해서 타입스크립트는 알고 있어야 해.

그래야지 개발자를 오류로 부터 보호해 줄 수 있는 거야.

 

자, 우리는 이제 lib 의 정체에 대해 알게 되었어.

 

“ 우리가 tsconfig.json 의 lib 옵션을 수정하면, 통합된 라이브러리의 정의 파일을 지정할 수 있게 돼.

정의 파일은 ‘타입 정의’ 로 이루어져 있으며, 이것이 바로 타입스크립트가 가지고 있는 것. “

 

참고 : https://it-eldorado.tistory.com/127

 

 

 

***

이번 연습에서 경험 한 것은 내가 타입스크립트로 작업할 때에 항상 생길 수 있는 상황.

npm 으로 자바스크립트 패키지를 다운받았을 때 발생할 수 있는 일이지.

( 타입스크립트 프로젝트에서 자바스크립트 패키지를 사용하거나 자바스크립트로 트랜스파일을 해야하는 상황 )

 

 

다음 파트에서는 다른 케이스를 알아볼 거야.

이번 연습처럼 Npm 과 node_modules 에 있는 패키지를 사용하는 것 처럼 하는 대신에, 실제 파일에서 myPackage 를 호출해 볼 거야.

내가 가지고 있는 자바스크립트 파일을 어떻게 타입스크립트 파일에서 사용하는지를 다룰거야.

=> 즉 자바스크립트 프로젝트를 타입스크립트 프로젝트로 이전(마이그레이팅) 할 때 어떤 일이 발생하는 지 알아볼거야.