[TypeScript] 타입스크립트 실행 및 컴파일러 옵션 설정

타입스크립트 실행하기

• 시작
  • npm init -> package.json 확인
  • npm i @types/node 로 패키지 설치 후 dependencies 확인 (TS 타입 이해하는 패키지)
  • npm install typescript -g: TS 컴파일러도 위와 같이 node.js 패키지로 공급되고 있어서 같이 설치
  • tsc 로 TS 컴파일러 실행 (tsc -v로 버전 확인): tsc 경로
    • 이 때 ts 파일에서 문제가 없다면 JS 파일이 생성된다.

• ts node 설치
  • 지금은 TS 타입을 이해하고, 컴파일 하는 패키지만 설치했다.
  • 콘솔에서 TS를 node 로 실행 시키려면 ts node를 설치해야 한다.
  • npm install ts-node -g
  • ts-node 경로 를 입력하면 해당 TS 파일을 VSC에서 실행시킬 수 있다. 

---

TS 컴파일러 옵션 설정

얼마나 엄격하게 타입 오류를 검사할지, JS의 코드 버전은 어떻게 할지, 어디에 JS 파일을 생성하게 할지 등을 정하는 옵션을 말한다.

tsc로 TS 컴파일러를 실행하면 기본적인 옵션이 생성되기 때문에 tsc --init으로 초기화 하면 tsconfig.json 파일이 생긴다.

여기서 이제 유저가 컴파일러 옵션을 설정하면 된다. 옵션은 매우 다양한데 이번 강의에서는 정말 기본적인 것들을 배웠다.

 

• include: 어떤 폴더에 있는 TS 파일을 컴파일 할지
  • (전까진 파일 하나하나를 tsc 경로 입력해서 컴파일했다.
  • src 폴더에 있는 TS 파일들을 컴파일할 것이라면 include에 src 폴더명을 입력한다.

{
  "include": ["src"]
}

 

• target: TS 컴파일 후 생성되는 JS의 버전 설정 (compilerOptions)
  • 컴파일 관련 상세한 옵션은 compilerOptions 안에 따로 작성해줘야 한다.
  • 버전 설정을 하는 이유는 어떤 곳에서는 최신 버전의 JS가 아니라 구 버전을 사용할 수도 있기 때문에, 이런 경우에 버전 호환을 위해 TS로 컴파일 할 때 맞추기 위해서다.
  • ES5 버전으로 컴파일하겠다고 해놓고 Index.ts에 ES6에서 도입된 화살표 함수를 작성했다. 그랬더니 컴파일 된 후 생성된 index.js는 화살표 함수를 ES5 버전으로 바꾸어 놨다. 
  • ESNext는 가장 최신 버전을 뜻한다.

 

• module (compilerOptions)
  • JS는 독립된 하나의 파일을 '모듈'이라고 부른다.
  • 이 모듈을 사용하는 방법을 모듈 시스템이라고 하며, 크게 ES 모듈 시스템과 CJS 모듈 시스템이 있다.
  • ES 모듈 시스템(ESM): ECMAScript 모듈 시스템.
    • 최신 FE 기술들은 모두 ESM을 사용한다.
    • import, export default를 쓴다.
  • CJS 모듈 시스템: require를 사용한다.
    • Node.js는 CJS를 사용한다.
    • 따라서 Node.js에서 ESM을 쓰려면 package.json에서 "type": "module"로 바꿔줘야 한다.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS"
  },
  "include": ["src"]
}

만약 CJS로 설정하면 TS 파일은 아래와 같은 JS 파일을 만든다. 생긴 게 좀 복잡하게 생겼다.

// hello.ts
export const hello = () => {
  console.log('Hello');
};

// hello.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const hello = () => {
    console.log('Hello');
};
exports.hello = hello;

// index.ts
import { hello } from './hello';
hello();

// index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const hello_1 = require("./hello");
(0, hello_1.hello)();

만약 모듈을 ESNext, 즉 ESM으로 바꾸게 되면 똑같이 바뀌게 된다.

// hello.js
export const hello = () => {
    console.log('Hello');
};

// index.js
import { hello } from './hello';
hello();

 

• outDir (compilerOptions)
  • 컴파일 결과 생성될 JS 파일을 어디에 둘 것인지 경로를 작성한다.
  • "outDir": "dist" 이렇게 쓰면 dist라는 폴더가 만들어지고 이 곳에 JS 파일이 생성된다.

 

• strict (compilerOptions)
  • 변수의 타입은 TS가 점진적으로 유추할 수 있지만 매개 변수는 그렇지 않다. 유저가 입력하는 것으로 어떤 것이 들어올지 모른다.
  • 만약 strict true로 엄격하게 타입 검사를 한다면 매개 변수의 타입도 정해주어야 한다.
  • false를 하면 매개 변수는 타입을 정하지 않아도 되는데, 일반적으로 오류 가능성을 줄이기 위해 true로 체크한다.
  • 하지만 JS -> TS로 마이그레이션 하는 경우 strict true를 하면 대참사(...)가 일어날 수 있어서 false로 하는 경우도 있다. 

 

• moduleDetection: "force" (compilerOptions)
  • hello.ts, index.ts 모두 const a = 1처럼 같은 변수를 사용한 코드를 작성하면 '블록 범위 변수 a를 재선언할 수 없다'라고 한다. 
  • 원래 JS에서는 다른 파일이면 다른 모듈로 이해해 중복 선언으로 보지 않는데, TS는 '전역 모듈'로 본다.
  • 따라서 다른 파일이어도 같은 공간이라고 생각하기 때문에 이러한 에러가 발생한다.
  • 이 때 export {}; 라는 모듈 시스템을 쓰는 문법을 파일에 1번이라도 작성하면 독립된, 개별적인 모듈로 이해한다.
  • moduleDetection을 force로 하고 컴파일을 해 보면 JS 파일에 export {}가 추가되어 있음을 알 수 있다.

 

• ts node
  • ts-node 경로
  • 위에서 module에 ESNext를 쓰면 오류가 나기 때문에 package.json에 "type": "module"을 작성해야 한다고 했다.
  • 하라고 해서 설정했는데 이제는 갑자기 Unknown file extension ".ts"라고 한다. ts 모른다고요?
  • ts node가 ESM을 해석하지 못해서 그렇다. ts node도 기본적으로 CommonJS 모듈을 사용하기 때문이다.
  • 따라서 ts-node에 esm true를 추가해준다.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": false,
    "moduleDetection": "force"
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src"]
}

 

즉 1) 생성될 JS 파일은 최신 문법, 2) 모듈은 ESM, 3) JS 파일이 생성될 경로는 dist, 4) 매개 변수는 타입을 입력하지 않아도 통과되며, 5) TS 파일은 전역 모듈이 아닌 개별 모듈로 인식된다. 또한 6) ts-node는 ESM으로 지정되었으며 7) src 폴더 안에 있는 TS 파일들을 컴파일 한다는 내용이다.

---

 **출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)