Typescript 세팅하기

Typescript 세팅하기

---

 

2023.12.06에 작성됨 (node: v18.17.0, npm: 10.2.1)

시작하기

# 글로벌로 설치할 경우
npm i -g typescript   
tsc --init            # tsconfig.json 생성됨

# 개별 프로젝트에 설치 할 경우
npm i -D typescript   
npx tsc --init        # 프로젝트에 설치된 경우 앞에 npx를 붙여줘야한다.

NOTE: 많은 사람들이 ts-node를 같이 같이 설치 해주는 것 같은데 Typesciprt도 VS Code에서 디버깅 모드를 바로 사용할 수 있기 때문에 굳이 필요한지는 잘 모르겠다.

// tsconfig.json
{
    "compilerOptions": {
        // 일반적으로 사용하는 option
        "target": "ES2016",
        "module": "commonjs",
        "rootDir": "./src",
        "outDir": "./dist",
        "removeComments": true,
        "noEmitOnError": true,
        // 유용한 Type Checking Options
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        // 디버깅 사용할 때
        "sourceMap": true,
    }
}

NOTE: “tsconfig.json” 이 생성되면 뒤에 파일이름을 붙이지 않아도 tsc만 입력해서 컴파일을 실행시킬 수 있음.

VS Code에서 디버깅하기

1. tsconfig.json
   • compile 할 때 [filename].js.map 이라는 파일이 생성되고 디버거가 읽는 파일이라고 생각하면됨.
2. “sourceMap”: true
3. create launch.json
   • “preLaunchTask”: “tsc: build - typeconfig.json” 추가

    // launch.json
    // 기본적으로 생성되는 파일 안에 
    // “preLaunchTask”: “tsc: build - typeconfig.json” 추가
    {
      // Use IntelliSense to learn about possible attributes.
      // Hover to view descriptions of existing attributes.
      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
      "version": "0.2.0",
      "configurations": [
        {
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "skipFiles": [
            "<node_internals>/**"
          ],
          "program": "${file}",
          "preLaunchTask": "tsc: build - tsconfig.json",
          "outFiles": [
            "${workspaceFolder}/**/*.js"
          ]
        }
      ]
    }

Typescript CLI (Command Line Interface)

tsc --build (혹은 tsc -b)를 실행하면 다음의 작업을 합니다:

• 참조된 모든 프로젝트를 찾습니다
• 최신 상태인지 감지합니다
• 올바른 순서로 최신 상태가 아닌 프로젝트를 빌드 합니다

만약 config 파일 이름이 tsconfig.json이라면 이름을 지정하지 않고 tsc --project(혹은 tsc -p)를 사용할 수 있다.

일반적으로는 package.json 파일에 스크립트로 저장하고 사용한다.

//package.json
"scripts": {
    "build": "tsc -p"
}
// terminal> npm run build

Common Errors

1. Cannot find module 'xxx' or its corresponding type declarations.ts(2307)

import path from "path"; 
// Cannot find module 'path' or its corresponding type declarations.ts(2307)

NOTE: Typescript는 Typescript가 아닌 기본 Node 패키지를 바로 사용할 수 없다. (타입을 추론할 수 없기 때문에). 아래와 같이 Typescript 전용 패키지를 설치 해주어야 한다.

# npm i @types/<패키지>
npm i -D @types/node
# 일반적으로 -D 옵션을 붙여 Development Dependency 로 설치해준다.

---

참고:

https://youtu.be/d56mG7DezGs?si=UvvP1NosR6QV23mZ