TypeScript 마이그레이션 튜토리얼

정보

다음 튜토리얼은 나무소리 유튜브를 참고하였습니다.

개요

[[Storybook을 통한 UI 제작 및 관리]] 시스템 개선을 위한 JavaScript에서 TypeScript 마이그레이션에 대한 튜토리얼에 대한 기록입니다.

소스코드는 다음에서 확인할 수 있어요.

타입스크립트

JavaScript에 Type System을 적용한 것이다.
TypeScript로 작성된 코드는 TypeScript(tsc)를 통해 트랜스컴파일되어 JavaScript로 변환된다.
TypeSystem 외에도 Decorators와 같은 다양한 기능을 제공한다.

개발환경 구성

라이브러리 및 패키지 설치

node : npm을 통해 패키지 관리가 가능하며, 컴파일된 파일을 실행할 수 있다.
typescript : tsc를 통해 *.ts 파일에 대한 컴파일이 가능
ts-node : 컴파일과 실행을 한번에 수행할 수 있음

프로젝트 구성

tsconfig.json : 소스 폴더와 컴파일 이후에 실행 파일들을 구분하기 위해 생성
- out 디렉토리 지정
- root 디렉토리 지정

package.json : 패키지 관리
- nodemon : 스크립트 모니터링 도구, 소스가 변경되었을 때 서버 재시작
- concurrently : 빌드 및 실행 병행 도구
- 스크립트 추가
  - tsc -w : 컴파일 및 watch 모드 적용
  - nodemon build/index.js
  - concurrently npm:start:*

트랜스 컴파일

TypeScript에서 tsc를 통해 JavaScript로 트랜스 컴파일 진행

ES6으로 작성된 TypeScript

index.ts

import TodoItem from "./TodoItem";

const data = [
  { id: 1, task: "장보기", complete: true },
  { id: 2, task: "요리하기", complete: false },
];

console.log("My Todo List");

for (let i = 0; i < data.length; i++) {
  let todoItem = new TodoItem(data[i].id, data[i].task, data[i].complete);
  todoItem.printDetails();
}

TodoItem.ts

class TodoItem {
  constructor(
    public id: number,
    public task: string,
    public complete: boolean
  ) {
    this.id = id;
    this.task = task;
    this.complete = complete;
  }

  printDetails(): void {
    console.log(
      `${this.id}\t${this.task}\t${this.complete ? "\t(complete)" : ""}`
    );
  }
}

export default TodoItem;

트랜스 컴파일 결과

index.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const TodoItem_1 = __importDefault(require("./TodoItem"));
const data = [
  { id: 1, task: "장보기", complete: true },
  { id: 2, task: "요리하기", complete: false },
];

console.log("My Todo List");
for (let i = 0; i < data.length; i++) {
  let todoItem = new TodoItem_1.default(data[i].id, data[i].task, data[i].complete);
  todoItem.printDetails();
}

TodoItem.js

"use strict";

// 변환한 모듈을 CommonJS 환경에서도 ES6 형태로 인식하도록 설정
Object.defineProperty(exports, "__esModule", { value: true });

class TodoItem {
  constructor(id, task, complete) {
    this.id = id;
    this.task = task;
    this.complete = complete;
    this.id = id;
    this.task = task;
    this.complete = complete;
  }

printDetails() {
    console.log(
      `${this.id}\t${this.task}\t${this.complete ? "\t(complete)" : ""}`
    );
  }
}

exports.default = TodoItem;

주요 내용

TypeScript에서 적용된 Type System은 JavaScript에서 확인할 수 없음. 단 컴파일 시에 해당 타입에 맞는 인스턴스나 전달 인자가 맞는지 확인하는 과정을 거침.
ES6 방식으로 작성된 import 문은 CommonJS 형태로 변환되고 ES6 형태로 사용될 수 있도록 하는 과정을 거치고 있음. 이를 통해 서로 다른 모듈 시스템에서 호환성을 확보할 수 있다고하며 번들링 등 최적화에 더 수월하다고 함.(이부분은 아직 감이 잡히지 않는 상태)
참고로 ES6는 브라우저 상에서, CommonJS는 Node.js와 같은 서버 사이드 환경에서 사용되기 위해 개발되었다고 함.

개요​

타입스크립트​

개발환경 구성​

트랜스 컴파일​

개요

타입스크립트

개발환경 구성

트랜스 컴파일