Typescript 설치

Typescript 설치

먼저 설치 방법은 크게 2가지가 있다. 

 

1. npm 으로 설치

2. VSCode 에서 typescript 설치

 

먼저, npm으로 통해 설치를 해 보려고 한다. npm 부터 설치하자.

 

[centos7]

 

$ yum install epel-release

$ yum install -y npm nodejs

 

[windows]

 

https://nodejs.org/ko/

Node.js

 

설치 파일을 다운로드 받은 다음 실행해 보자.

 

 

npm 설치 후 typescript를 설치한다.

npm install -g typescript

 

설치된 버전을 확인하려면 아래와 같이 입력한다.

 

tsc -v

 

이제 VSCode 에서 간단히 메시지를 출력해 보자.

 

 

위와 같이  PowerShell에서 오류가 나타난다. 이 오류는 아래와 같이 설정을 변경한다.

 

PowerShell에서 아래의 command 를 입력한다.

 

Set-ExecutionPolicy -Scope CurrentUser Unrestricted

 

다시 컴파일 후 실행해 보자.

 

PS D:\develop\Typescript\ex1> tsc test.ts
PS D:\develop\Typescript\ex1> node test.js
hello world

 

TypeScript 프로젝트

 

ts 파일을 한개씩 컴파일 하는 방식 대신에 임의의 폴더 아래 있는 모든 ts 파일을 컴파일하기 위해서 프로젝트를 생성하면 편리하게 관리가 가능하다. 이 TypeScript 프로젝트를 만들기 위해서는 tsconfig.json 파일을 수동으로 만들거나 "tsc --init" 명령어로 실행하면 만들어 진다.

 

# tsc --init

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json

 

 

tsconfig.json 파일이 생성된 것을 볼 수 있다. 이제 tsc 명령만 입력하면 컴파일이 되는 것을 볼 수 있다.

 

# tsc
#

 

소스와 컴파일된 js 파일 위치를 다르게 하고 싶은 경우 아래와 같이 설정한다.

 

{
  "compilerOptions": {
    "module": "commonjs",                                /* Specify what module code is generated. */
    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
  ]
}

 

위와 같이 변경 후 컴파일 해보자.

 

 

Typescript 실행

 

1. Node 명령어로 실행

# tsc

# node hello.js

 

2. TS-NODE 명령어로 실행

 

# npm install -g ts-node

# ts-node hello.ts  # JS 파일은 생성되지 않는다.

 

3. VSCode에서 Code Runner 설치 후 실행

 

 

우측 마우스 클릭 -> Run Code 실행 또는 Ctrl + Alt + N 으로 클릭한다.