Typescript 초기 설정

Typescript

Microsoft에서 개발/관리하는 오픈소스 프로그래밍 언어입니다.
Typescript는 Javascript에 타입을 부여한 언어로서, Javascript의 Superset 언어이기 때문에 Javascript 문법을 사용할 수 있습니다.

설치

Typescript를 사용할 프로젝트에 설치합니다.

$ npm i -D typescript

TSConfig.json

Typescript의 설정 파일입니다.
초기 tsconfig.json을 가져옵니다.

$ ./node_modules/.bin/tsc --init

Compiler Options

Typescript를 트랜스파일링할 때 사용될 옵션을 설정할 수 있어요.
필자가 자주 사용하는 옵션을 위주로 기술하겠습니다.

💡 전체 옵션에 대한 자세한 설명은 TSConfig.json Reference에 나와요 :)

💡 트랜스파일링은 아래 명령어로 진행했어요 :)

$ ./node_modules/.bin/tsc -p .

• target: 빌드된 파일의 ECMAScript 버전 (defalut es3)

es3 es5 es6/es2015 es2016 es2017 es2018 es2019 es2020 es2021 es2022 esnext

// 트랜스파일링 전
const num: number = 10;

const getNumber = () => {
  return num;
};

console.log(`숫자는 ${getNumber()} 입니다.`);

// 트랜스파일링 후 (es7)
"use strict";
const num = 10;
const getNumber = () => {
    return num;
};
console.log(`숫자는 ${getNumber()} 입니다.`);

// 트랜스파일링 후 (es5)
"use strict";
var num = 10;
var getNumber = function () {
    return num;
};
console.log("\uC22B\uC790\uB294 ".concat(getNumber(), " \uC785\uB2C8\uB2E4."));

---

• module: 빌드된 파일의 모듈 버전 (target 설정이 es3 ES5 ES6/ES2015 인 경우, default CommonJS)

none commonjs amd umd system es6/es2015 es2020 es2022 esnext node16 nodenext

// 트랜스파일링 전
import plus from "./plus";

console.log(`합은 ${plus(10, 20)} 입니다.`);

// 트랜스파일링 후 (CommonJS)
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var plus_1 = __importDefault(require("./plus"));
console.log("\uD569\uC740 ".concat((0, plus_1.default)(10, 20), " \uC785\uB2C8\uB2E4."));

// 트랜스파일링 후 (AMD)
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
define(["require", "exports", "./plus"], function (require, exports, plus_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    plus_1 = __importDefault(plus_1);
    console.log("\uD569\uC740 ".concat((0, plus_1.default)(10, 20), " \uC785\uB2C8\uB2E4."));
});

---

• baseUrl : 외부 모듈(node_modules)이 아닌 모듈들을 절대 경로로 설정

// 트랜스파일링 전
import plus from "src/plus";

console.log(`합은 ${plus(10, 20)} 입니다.`);

위 코드를 트랜스파일링하면..

결과물도 절대경로로 나왔습니다..
이렇다면 모듈을 찾을 수 없어 에러가 발생합니다.

하지만 아래 명령어를 사용하면 절대경로 실행이 가능합니다.😄

💡 ts-node와 tsconfig-paths 를 사전에 설치해주세요 :)

# 설치
$ npm i -D ts-node tsconfig-paths

# 트랜스파일링
$ ./node_modules/.bin/ts-node -r tsconfig-paths/register [파일 경로]

💡 하지만 빌드된 결과물을 얻는 것은 (절대경로가 있는 한)tsc로는 불가능한 것으로 보여요..(방법을 못 찾은걸지도..) 해당 방법에 대해서는 조금 더 공부를 하고 기술할게요.😢

---

• outDir : 트랜스파일링된 결과물이 저장될 경로

---

• removeComments : 주석 제거 (default false)

// 트랜스파일링 전

// 주석 제거 테스트(사라질 예정)
console.log("Hi!");

// 트랜스파일링 후
"use strict";
console.log("Hi!");

---

• noImplicitAny : 타입 추론을 할 수 없을 때, any 타입을 허용할지 여부 (strict 설정이 true인 경우 default true)

noImplicitAny 설정 false인 경우

noImplicitAny 설정 true인 경우

💡 이 설정을 비활성화하면 Typescript를 쓰는 의미가 사라져요. 활성화해서 사용하도록 해요 :)

Include / exclude

• include : 특정 경로의 파일만 대상으로 삼을 수 있도록 설정
• exclude : 특정 경로의 파일은 제외하는 설정

{
  "compilerOptions": {
    ...,
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

위와 같이 설정했다면, 트랜스파일링 명령어 실행 시 src 하위의 ts파일만 처리되어 outdir 설정의 경로에 결과물이 저장됩니다.

💡 exclude에 node_modules를 적지않아도 기본적으로 제외대상이에요. :)

---

의견은 언제든 댓글로 남겨주세요. 🙂