[컴][TypeScript] typescript 기본 setup + visual studio code



typescript 환경설정

여기서는 typescript 가 compile 되는 환경을 set up 해주면서 package.json 을 만들고, 다시 Visual Studio Code(vscode) 에서 환경설정을 할 것이다.

여기서는 typescript compiler(tsc) 를 local 로 설치해서 사용할 것이다.

절차

nodejs / npm 은 설치되어 있어야 한다.
  1. npm init
  2. npm install typescript --save-dev
  3. Vscode 설정
    1. root path 에 tsconfig.json 작성
    2. Tasks : Configure Task Runner : task.json
      • tsc path 설정
    3. Preferences: Open Workspace Settings : settings.json
      • tsdk path 설정
  4. .ts file 에서 "ctrl+shift+B" 를 하면 .js/.js.map 이 나온다.




package.json 생성

npm init


typescript 설치

npm install typescript --save-dev


VSCode 설정

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

task.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": ["./node_modules/typescript/bin/tsc", "-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}


settings.json

// Place your settings in this file to overwrite default and user settings.
{
    "typescript.tsdk": "node_modules/typescript/lib"
}



typescript types

.d.ts 파일이 있어야 된다.

  1. .d.ts 검색 : TypeScript Types Search
  2. .d.ts generator : GitHub - Microsoft/dts-gen: dts-gen creates starter TypeScript definition files for any module or library.


See Also

  1. React & Webpack · TypeScript
  2. frontdevops/typescript-cheat-sheet: TypeScript cheat sheet





댓글 없음:

댓글 쓰기