DIL: 이펙티브 타입스크립트

스터디: 월간 CS, https://github.com/monthly-cs/2024-05-effective-typescript
작성일: 2024-06-27
작성자: dusunax

---

8장 타입스크립트 마이그레이션

• 타입스크립트 마이그레이션 근거: 타입스크립트를 사용했다면 컴파일 시점에서 방지할 수 있었을 버그
  • 깃헙 자바스크립트 프로젝트 버그: 15%
  • 에어비앤비 진행 프로젝트 사후 분석 post-mortem 6개월치: 38%
• 마이그레이션은? 점진적으로!
  • noImplicitAny off

아이템 58: 모던 자바스크립트로 작성하기

• 타입스크립트 => 특정 버전의 js로 컴파일 가능, 트랜스파일러 transpiler 로 사용할 수 있다.
• 옛날 버전의 JS를 모던하게 바꾸는 작업도 타입스크립트 전환 작업의 일부라고 볼 수 있다.
  • 최신 JS 기능도 체크되기 때문에 코드 작성 시에 도움도 받을 수 있고 & 제대로된 사용법을 익힐 때 도움됨
  • 주요 기능: ECMAScript Module, ES2015 Class

ECMAScript Module

• ES2015 이전에는 코드를 개별 모듈로 분할하는 방법이 없었다. 지금은?

1. <script type="module">:

<script type="module">
  import { myFunction } from "./myModule.js";
  myFunction();
</script>

HTML에서 <script type="module">을 사용하면 ES6 모듈을 사용할 수 있습니다. 위 예제에서는 myModule.js에서 myFunction을 가져와서 호출합니다.

2. 수동 연결:

// file1.js
const part1 = "Hello, ";

// file2.js
const part2 = "World!";

// combined.js
const part1 = "Hello, ";
const part2 = "World!";
console.log(part1 + part2); // "Hello, World!"

수동 연결은 여러 파일의 코드를 하나의 파일로 수동으로 합치는 방법입니다. 예를 들어, file1.js와 file2.js의 내용을 combined.js에 복사하여 붙여넣습니다.

3. Makefile:

all: combined.js

combined.js: file1.js file2.js
    cat file1.js file2.js > combined.js

Makefile은 프로젝트 빌드 과정을 자동화하는 파일입니다. 위 예제는 file1.js와 file2.js를 combined.js로 결합하는 명령을 포함합니다.

4. NodeJS require:

// module1.js
module.exports = function () {
  console.log("Hello from module1");
};

// main.js
const module1 = require("./module1");
module1(); // "Hello from module1"

Node.js에서 require를 사용하여 모듈을 가져옵니다. module1.js에서 함수를 내보내고, main.js에서 require로 가져와서 호출합니다.

5. AMD define 콜백:

// module.js
define(["dependency"], function (dependency) {
  return function () {
    console.log("Hello from AMD module");
  };
});

// main.js
require(["module"], function (module) {
  module(); // "Hello from AMD module"
});

AMD 형식에서는 define 함수를 사용하여 모듈을 정의하고, 종속성을 명시합니다. require로 모듈을 가져와서 사용합니다.

6. 타입스크립트 자체적 모듈:

// a.ts
module A {
  export function sayHello() {
    console.log("Hello from module A");
  }
}

// b.ts
/// <reference path="a.ts" />
module B {
  export function callA() {
    A.sayHello();
  }
}

// main.ts
/// <reference path="a.ts" />
/// <reference path="b.ts" />
B.callA();

/// <reference path="...">를 사용하여 다른 파일의 내용을 참조합니다. 그런 다음 TypeScript 컴파일러를 사용하여 모든 파일을 하나로 병합할 수 있습니다.

ECMAScript Module

• ES2015 이후 표준
• 마이그레이션 대상 JS 코드가 단일 파일이거나 비표준 모듈 시스템(위에 모듈들)을 사용한다면? ES모듈로 전환하는 것이 좋다.
  • 프로젝트에 따라 웹팩, ts-node가 필요한 경우 있음
• 모듈 단위로 점진적 마이그레이션을 할 수 있음!

// CommonJS
// a.js
const b = require("./b");
console.log(b.name);

//b.js
const name = "Module B";
module.exports = { name };

// ECMAScript module
// a.ts
import * as b from "./b";
console.log(b.name);

// b.ts
export const name = "Module B";