Typescript -1 환경설정 (23/04/18)

1. Typescript

타입스크립트 사전 요약

1. 런타임이 존재하지 않습니다. 대신 컴파일러를 필요로 합니다
2. 자바스크립트 실행(런타임) 전에 여러 오류들을 캐치할 수 있습니다

1. 타입스크립트는 런타임이 존재하지 않습니다
   바벨과 마찬가지로 컴파일 과정을 거쳐서 최종적으로는 '자바스크립트'가 실행되는 것,
   그래서 별도의 빌드 과정이 필요하며 에디터에 대한 의존도가 큽니다

2. 코드 실행 이전에 자바스크립트의 예측하기 어려운 오류(타입 에러)를 잡아낼 수 있습니다.
   즉 디버깅을 하기 전에 에러를 예방할 수 있다는 뜻입니다.
   반면 타입스크립트를 적용하면 간단한 코드조차 작성이 길어진다는 단점도 존재합니다
   타입스크립트를 사용함으로써 얻는 장점이 보다 크기 때문(코드의 가독성과 유지보수성 ↑)에
   2번과 같은 단점은 장점에 비해 크게 중요하지 않을 수 있습니다

const sum (a:number, b:number)=> a + b
sum(1, 'a')
// 에러 발생. b가 number 타입이 아니기 때문

const a:number =10
// 선언과 동시에 에디터는 a라는 변수의 타입을 기억하게 됩니다

a.map()
// a(number)의 프로토타입에는 map 함수가 존재하지 않기 때문에 에러가 발생합니다

2. Typescript Runtime?

TS는 런타임이 없다는 말에 대한 보충 설명을 예제 코드로 대신하겠습니다

message.ts

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

node message
// Error: Cannot find module '/.../message'
// 자바스크립트 파일을 찾지 못했다는 의미입니다

node message.ts
// SyntaxError: Missing initializer in const declaration
// 타입 지정에서 오류가 발생합니다 ':string'은 NodeJs가 알지 못하는 문법입니다



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

node message.ts
// SyntaxError: Unexpected token ':'
// NodeJs는 여전히 ':'를 읽지 못하네요

그러면 타입스크립트의 실행을 확인하려면 어떻게 해야 할까요?

1. 별도의 타입스크립트 컴파일러를 설치하는 것
2. babel을 통해 타입스크립트 플러그인을 설정하는 것
3. 웹팩을 통해서 관련 설정을 마친 뒤 번들링해서 자바스크립트로 변환하는 것

사실 셋 다 같은 의미입니다
(리액트에서 타입스크립트를 사용하려면 3번 세팅이 필수적)

타입스크립트 설치

npm init -y
npm install -D typescript

3. tsc 명령어 기초

먼저 package.json을 수정해야 합니다

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc message.ts" // 추가
  },
    
    
npm run build // 빌드를 실행합니다

message.js

{
    var message = "hello typescript";
    console.log(message);
}

빌드 결과 위와 같은 자바스크립트 파일이 생성되었습니다

다음은 몇가지 TSC 명령어 옵션들을 활용해보겠습니다

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc message.ts --outDir ./dist --target ES6"
  },

• 루트 디렉토리 바깥의 dist 디렉토리에서 컴파일된 파일이 생성됩니다
• ES6 문법을 따르도록 합니다 (var -> let)

일반적으로는 타입스크립트 옵션을 아래와 같이 컨피그 파일로 만들어서 관리합니다
(package.json에는 "build": "tsc"만 남겨주세요)

tsconfig.json

{
  	"compilerOptions": {
      	"outDir": "./dist",
        "target": "ES6",
         ...
    }
}  

(종종 tsconfig.build.json, tsconfig.dev.json 등과 같이
빌드모드와 개발모드를 따로 두고 컨피그 파일을 분리해서 사용하는 경우도 있습니다)

4. tsconfig

다음은 tsconfing.json에 대한 추가 설명입니다

tsconfing.json

{
  	"compilerOptions": {
      "outDir": "./dist",
    },
    "include": ["src/*"],
  	"exclude": ["**/*.test.ts"],
}  

• compileOptions : 어떤 형태로 컴파일을 진행할 것인지에 대한 세부 설정을 정의합니다
• include : 컴파일을 진행할 디렉토리를 지정합니다 ( ~ ./src)
  - /** : 모든 디렉토리
  - /* : 모든 파일
• exclude : 컴파일에서 제외할 항목을 지정합니다 (패턴화)

4-1 compileOptions

다음은 컨피그파일 견본과 각 옵션에 대한 해설입니다

{
  "compilerOptions": {
    "module" : "CommonJS",
    "outDir": "./dist",
    "target": "ES6",
    "esModuleInterop": true,
    "strict": true,
    "baseUrl": "./src",
    "paths": {
      "@user/*" : ["user/*"]
    }
  },
  "include": ["src/*"],
  "exclude": ["**/*.test.ts"],
}  

• module : 번들링시 어떤 모듈 시스템을 사용할 지를 결정합니다 (ES6의 import vs commonJs의 require)
• outDir : 빌드 파일을 내보낼 경로를 설정합니다
• target : 굳이 하위호환(ES5)을 고려해야 할 필요가 없다면 퍼포먼스가 높은 방향으로...
• esModuleInterop : import 문법을 바꿔쓸 수 있습니다 (import * as react from 'react' → import react from 'react')
• strict : true 설정시 더 엄격한 타입 체크를 수행합니다
• baseUrl : 상대 경로를 기준으로 할 때의 기본 경로를 설정하는데 사용됩니다
• paths : baseUrl을 기준으로 상대 경로를 별칭으로 설정할 수 있습니다
  (../../ → @ ~ import {userService} from '@user/service/user.service.ts')

*여기서 paths에 추가된 @로 인해 번들링된 파일이 NodeJs로는 실행할 수 없는 상태가 됩니다
이를 해결하기 위해서는 다음 모듈을 설치해야 합니다

tsc-alias

tsc-alias는 @와 같은 별칭(Alias)을 사용할 수 있도록 도와주는 라이브러리입니다

npm install -D tsc-alias

+) package.json 설정

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc && tsc-alias"
  },

tsconfig-path

tsconfig-path는 타입스크립트 프로젝트에서 별칭(alias)을 사용할 때,
해당 별칭이 실제 파일 경로와 일치하지 않는 문제를 해결하기 위한 라이브러리입니다

npm install -D tsconfig-path

+) package.json 설정

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "ts-node -r tsconfig-paths/register --project tsconfig.json ./src/message",
    "build": "tsc && tsc-alias"
  },

그리고 tsconfig.json 파일에서 별칭(alias)을 설정하는 대신,
tsconfig-paths 패키지가 제공하는 NODE_PATH 환경변수를 사용하여 별칭을 지정할 수 있습니다

{
  "scripts": {
    "start": "NODE_PATH=./src ts-node index.ts"
  }
}

5. ts-node

타입스크립트로 코드를 작성하면 개발단계에서 작성 > 확인 과정에서 많은 시간을 잡아먹게 됩니다
ts-node를 사용하면 가상으로 빌드를 처리하여 실시간으로 코드에 대한 피드백을 받을 수 있습니다

npm install -g ts-node

(ts-node는 주로 글로벌로 설치하는 편입니다)

+) 만약 nodemon을 사용한다면

npm install -D nodemon

package.json

"script": {
  "dev": "nodemon"
  ...
}

nodemon.json

{
	"watch": ["src/**/*"],
  	"ext" : "ts",
  	"exec" : "ts-node -r tsconfig-paths/register ./src/text.ts"
}

npm run dev

// 실행 성공

↓ 정리

package.json

{
  "name": "ts2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon",
    "build": "tsc && tsc-alias"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "nodemon": "^2.0.22",
    "tsc-alias": "^1.8.5",
    "tsconfig-paths": "^4.2.0",
    "typescript": "^5.0.4"
  }
}

nodemon.json

{
	"watch": ["src/**/*"],
  	"ext" : "ts",
  	"exec" : "ts-node -r tsconfig-paths/register ./src/index.ts"
}

엔트리포인트(진입점)는 src 디렉토리의 index파일이 되도록

tsconfig.json

{
    "compilerOptions": {
        "module" : "CommonJS",
        "outDir": "./dist",
        "target": "ES6",
        "esModuleInterop": true,
        "strict": true,
        "baseUrl": "./src",
        "paths": {
            "@common/*": ["common/*"],
            "@hooks/*": ["hooks/*"],
            ...  
        }
    },
    "include": ["src/**/*"],
    "exclude": ["**/*.test.ts"],
}

위와 같이 common, hooks 등의 디렉토리를 별칭으로 불러오려면 사용자가 직접 추가해야 합니다

tsconfig-paths를 사용하면 index 파일을 엔트리포인트로 잡고
이하의 디렉토리는 따로 baseUrl과 paths 설정을 하지 않아도 별칭(@)으로 불러올 수 있게 됩니다

다음은 타입스크립트 문법편입니다