컴파일러

타입스크립트는 런타임이 존재하지 않는다.
하지만 컴파일러가 존재한다.
컴파일러가 TypeScript를 JavaScript로 변환해 준다.
컴파일을 진행해서 JavaScript로 변환하는 과정의 옵션들을 설정할 수 있다.
직접 인라인으로 작성하거나 tsconfig.json 파일을 생성해 설정이 가능하다.

node.js 환경에서 TypeScript 실행하기

message.ts

const message: string = "typescript"
console.log(message)

node message

node:internal/modules/cjs/loader:1078
  throw err;
  ^

Error: Cannot find module '/home/cloudcoke/my/blockchain/230418/typescript/1.runtime/message'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v18.15.0

node.js에서 확장자 없이 파일을 실행하면 기본적으로 js 확장자를 가진 파일을 찾게 되는데 message 파일은 ts 확장자로 설정되어 있어서 오류가 발생한다.

node message.ts

/home/cloudcoke/my/blockchain/230418/typescript/1.runtime/message.ts:1
const message: string = "typescript"
      ^^^^^^^

SyntaxError: Missing initializer in const declaration
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.15.0

하지만 ts 확장자를 붙여서 실행을 해도 오류가 나게 된다.
ndoe.js는 : string 부분을 해석할 수 없기 때문에 오류가 나는 것이다.
그래서 ts 파일은 컴파일을 해서 js 파일로 변환해 주어야 한다.

타입스크립트 실행

실행 방법

• typescript 컴파일러 설치
• babel을 통해 plugin을 typescript 관련된 것으로 설정한 뒤에 실행
• webpack을 통해 babel을 넣고 plugin을 넣어서 번들링 해 js로 변환한 뒤 실행

위 방법중 typescript 컴파일러를 설치해서 사용해보려고 한다.

1. TypeScript 컴파일러 설치

npm init -y
npm install -D typescript

2. TypeScript 파일 작성

message.ts

const message: string = "hello typescript"
console.log(message)

3. TypeScript 컴파일 실행

npx tsc message.ts

3.1 package.json 파일을 수정

package.json 파일을 수정하면 npx를 사용하지 않고 컴파일을 진행 할 수 있다.

  "scripts": {
    "build": "tsc message.ts"
  }

npm run build

4. 컴파일 된 파일 실행

컴파일이 완료 되었으면 js 확장자를 가진 파일이 생성된다.
이 파일을 실행시키면 console.log에 "hello typescript"가 출력된다.