이펙티브 타입스크립트: 8장 요약 및 핵심 정리

기존 자바스크립트 프로젝트를 타입스크립트로 전환하는 과정에서 고려해야 할 사항과 단계별 접근 방법을 다룹니다.

1. 모던 자바스크립트로 작성하기

타입스크립트로의 전환을 준비하기 전에, 기존 자바스크립트 코드를 최신 문법으로 업데이트하는 것이 중요합니다.

타입스크립트는 결국 자바스크립트의 superset 이기 때문에, 최신 버전의 코드를 입력하다보면 타입스크립트를 저절로 익힐 수도 있습니다.

권장하는 코드 스타일

1. CommonJS -> ES 모듈 사용

기존의 CommonJS 방식(require, module.exports)에서 ES 모듈 방식(import, export)으로 변경하는 것이 권장됩니다. ES 모듈은 정적 분석이 가능하며, 트리 쉐이킹(tree-shaking)과 같은 최적화 기능을 활용할 수 있습니다.

기존 코드

const fs = require('fs');
module.exports = function readFile(path) {
  return fs.readFileSync(path, 'utf8');
};

업데이트된 코드

import { readFileSync } from 'fs';
export function readFile(path: string): string {
  return readFileSync(path, 'utf8');
}

---

2. 프로토타입 대신 클래스 사용하기

기존의 프로토타입 기반 객체 지향 코드는 ES6의 class 키워드를 사용하여 더욱 명확하고 유지보수하기 쉽게 변경할 수 있습니다.

기존 코드

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hello, my name is ${this.name}`;
};

업데이트된 코드

class Person {
  constructor(private name: string) {}
  greet(): string {
    return `Hello, my name is ${this.name}`;
  }
}

---

3. var -> let/const 사용

var는 함수 스코프를 가지며, 호이스팅으로 인해 예측하기 어려운 동작을 유발할 수 있습니다. 이를 방지하기 위해 let과 const를 사용하여 블록 스코프를 유지하는 것이 좋습니다.

기존 코드

var count = 0;
function increment() {
  var count = count + 1;
  return count;
}

업데이트된 코드

let count = 0;
function increment(): number {
  count += 1;
  return count;
}

---

4. for;; 대신 for-of 또는 배열 메서드 사용하기

전통적인 for 루프는 인덱스 관리가 필요하며 가독성이 떨어질 수 있습니다. for-of나 map, forEach 같은 배열 메서드를 활용하면 보다 직관적인 코드를 작성할 수 있습니다.

기존 코드

const numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

업데이트된 코드 (for-of 사용)

const numbers = [1, 2, 3];
for (const num of numbers) {
  console.log(num);
}

업데이트된 코드 (배열 메서드 사용)

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num));

---

5. 콜백 함수 -> async/await 활용

콜백 지옥을 경험해보셨나요?
비동기 코드를 작성할 때 콜백을 사용하면 코드가 복잡해지고 가독성이 떨어질 수 있습니다. async/await을 사용하면 더 직관적인 코드를 작성할 수 있습니다.

기존 코드

const fs = require('fs');
function readFile(path, callback) {
  fs.readFile(path, 'utf8', function (err, data) {
    if (err) {
      callback(err);
    } else {
      callback(null, data);
    }
  });
}

업데이트된 코드

import { promises as fs } from 'fs';
async function readFile(path: string): Promise<string> {
  return await fs.readFile(path, 'utf8');
}

---

6. 객체 구조 분해 할당 및 단축 속성명 사용

객체 구조 분해 할당을 사용하면 변수를 더 쉽게 선언할 수 있으며, 단축 속성명을 활용하면 중복을 줄일 수 있습니다.

기존 코드

const user = {
  name: 'Alice',
  age: 25
};
const name = user.name;
const age = user.age;

업데이트된 코드

const user = { name: 'Alice', age: 25 };
const { name, age } = user;

2. @ts-check와 JSDoc을 활용한 타입 체크

타입스크립트를 도입하기 전, 기존 코드에서 타입 오류를 미리 확인할 수 있습니다.

@ts-check 적용

// @ts-check

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function add(a, b) {
  return a + b;
}

이렇게 하면 VSCode와 같은 IDE에서 타입 오류를 감지할 수 있습니다.

3. allowJs 옵션으로 점진적 마이그레이션

점진적 마이그레이션은 기존 코드베이스를 한 번에 변경하는 부담을 줄이고, 단계적으로 전환할 수 있도록 도와줍니다. 타입스크립트와 자바스크립트 파일을 함께 사용하면서 점진적으로 전환할 수 있습니다.

tsconfig.json 설정

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "include": ["src/**/*"]
}

이 설정을 적용하면 기존 JS 코드에서도 타입스크립트의 타입 체크 기능을 사용할 수 있습니다.

4. 의존성 관계 분석 후 순차적 변환

전체 프로젝트를 한 번에 변환하는 것은 어렵기 때문에, 의존성이 적은 모듈부터 순차적으로 전환하는 것이 효율적입니다.

의존성 분석 도구 활용

npx madge --image dependency-graph.svg src

이렇게 하면 모듈 간 의존성 그래프를 생성하여 어떤 모듈부터 변환해야 할지 결정할 수 있습니다.

5. noImplicitAny 및 strict 옵션 설정으로 타입 안정성 강화

타입스크립트 전환이 어느 정도 진행되었다면, noImplicitAny 옵션을 활성화하여 모든 변수의 타입을 명시하도록 강제할 수 있습니다.

또한, strict 옵션을 설정하면 타입스크립트의 엄격한 타입 검사를 활성화하여 코드의 안정성을 더욱 강화할 수 있습니다. 하지만 strict 옵션을 활성화하면 기존 코드에서 많은 타입 오류가 발생할 수 있기 때문에, 팀 내 모든 개발자가 타입스크립트에 익숙해진 후 설정하는 것이 좋습니다.

tsconfig.json 설정

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strict": true
  }
}

마무리

타입스크립트로 마이그레이션하는 과정은 한 번에 끝나는 작업이 아닙니다. 점진적인 접근 방식을 사용하면 기존 코드의 안정성을 유지하면서 점차적으로 타입 안정성을 높일 수 있습니다. 먼저 모던 자바스크립트 문법을 적용하고, @ts-check와 JSDoc을 활용하여 타입 오류를 사전에 감지하는 것이 중요합니다.

그 후, allowJs 옵션을 통해 기존 자바스크립트 파일과 타입스크립트 파일을 혼용하며 변환을 진행하고, 의존성 관계를 분석하여 독립적인 모듈부터 순차적으로 변환하는 것이 효과적입니다.