[Typescript] tsconfig.json 설정하기

• npm init -y : package.json 초기화
• npm install -D typescript: typescript 설치

💡 -D 붙이면 타입스크립트가 devDependencies에 설치됨

✅ tsconfig.json 생성

tsconfig.json은 타입스크립트 컴파일러 설정 파일이다. node.js는 타입스크립트를 이해하지 못하기 때문에 자바스크립트 코드로 컴파일하는 작업이 필요하다.

{
    // 어디에 타입스크립트 파일이 위치하는지
    "include": ["src"],
    "compilerOptions": {
        // 자바스크립트 파일이 생성될 디렉토리 지정
        "outDir": "build",
        // 자바스크립트 몇버전으로 컴파일할지 지정
        "target": "ES6"
        // 어떤 환경에서 코드를 실행하는 지 지정
        "lib": ["ES6", "DOM"],
        //
        "strict": true
    }
}

✅ TS에서 JS로 만들어진 패키지를 설치했을 때 TS에 패키지의 타입을 정의하는 방법

📄 myPackage.d.ts 생성

d.ts 파일은 자바스크립트로 만들어진 패키지나 라이브러리를 타입스크립트에게 어떤 타입인지 설명한다.

임의로 다른 파일에서 아래 코드와 같은 함수를 만들고(설치한 모듈이라고 가정) index.ts로 불러오면 사진과 같은 경고 메세지가 뜬다.

export function init(config){
    return true;
}

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

타입스크립트에게 새로 만든 함수의 타입을 알려주기 위해 myPackage.d.ts 파일을 생성해서 아래처럼 작성한다( d.ts의 정의 파일에서 구현이 아닌 호출 시그니처, 즉 타입만 써주면 된다 )

interface Config {
    url: string;
}

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

경고 메세지가 사라지고 잘 불러와지는 걸 볼 수 있다.

✅ 프로젝트 안에 JS와 TS 파일이 같이 들어있는 경우

경로를 "./myPackage"로 변경

// index.ts
import {init, exit} from "./myPackage";

tsconfig.json 파일에 allowJs:true 추가

{
    // 어디에 타입스크립트 파일이 위치하는지
    "include": ["src", "myPackage.js"],
    "compilerOptions": {
        // 자바스크립트 파일이 생성될 디렉토리 지정
        "outDir": "build",
        // 자바스크립트 몇버전으로 컴파일할지 지정
        "target": "ES6",
        // 어떤 환경에서 코드를 실행하는 지 지정
        "lib": ["ES6", "DOM"],
        "strict": true,
        // 타입스크립트 안에서 자바스크립트 허용
        "allowJs": true
    }
}

🤔 JS에서도 타입 검사를 하고 싶다면?

💡 // @ts-check
@ts-check를 .js 파일의 첫 번째 줄에 추가하면 자바스크립트도 타입 검사할 수 있다.

💡 // JSDoc
코멘트로 이루어진 문법으로 함수 바로 위에 코멘트를 적으면 된다. 타입스크립트는 이 코멘트를 읽을 수 있다.

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

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