[TS] TS기반 프로젝트 생성과 lib이해하기

니코씨와 함께하는 타입스크립트 기반 프로젝트 러닝

#1 프로젝트 빌딩

npm 명령어 실행

npm init -y 
//이후 package.json에서 javascript 설정 코드 삭제

npm install -d typescript // ts 라이브러리 설치

경로 및 파일 생성

src > index.ts

#2 typescript 설정

config파일 생성

touch tsconfig.json //혹은 직접 만들기

해당파일을 통해 VSCode가 Typescript를 인식하게 됨, 이후 자동완성기능 제공

config파일 작성

// ts : Compiler
{
    "inclue": [ // src의 모든 파일을 확인하도록 명시
        "src"
    ],
    "compilerOptions" : { // Ts -> Js로 컴파일 시킬 것임
        "outDir": "build", // 컴파일한 JS 파일의 경로
        "esModuleInterop": true, // es 모듈 사양에 따른 CommonJS 모듈 가져오기 가능
        // 이후, package.json에서 script에 "build": "tsc" 코드 추가
        "target": "ES6"  // 컴파일할 JS의 버전 명시
    }
}

이후 npm run build 실행 하여 build 폴더가 생성됨을 확인

config > lib 설정을 준다면

...
    "compilerOptions" : { // Ts -> Js로 컴파일 시킬 것임
        "outDir": "build", // 컴파일한 JS 파일의 경로
        "esModuleInterop": true,
        "target": "ES6",  // 컴파일할 JS의 버전 명시
        "lib" : ["ES6", "DOM"], // ES6지원 서버 && DOM(브라우저환경)에서 코드 실행할 것을 명시
        "strict": true, // 모드 활성화, 이제 TS의 간섭이 시작됨
    }
...

index.ts와 같은 ts 파일에서 document의 이벤트와 메소드 자동완성 지원을 확인 가능

TS가, 유저가 사용할 API가 무엇인지 알게 되었으므로 자동완성 기능을 제공가능하게 된 것.

#3 node_modules에서 typescript가 인식하는 과정 이해하기

1. myPackage.js 생성 및 작성 (이런 외부 라이브러리 코드가 있었고.)

export function init (config) {
    return true;
}

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

2. myPackage.d.ts 파일 생성 (그 외부 라이브러리 코드의 존재를 설명하는 .d.ts 파일이 있었고)

// .d.ts 파일은 구현하는 파일이 아니라, ts에게 설명하는 파일이다

interface Config{
    url: string;
}

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

3. .ts파일에서 사용자가 js언어로 구현한 package 사용 (1, 2번을 통해서 3번에서 import from 이 가능해진 것이다)

import {init} from "myPackage";

init ({
    //url : true  //안 먹힘
    url: "true"
})

저작자표시