타입스크립트 성능 팁

Yun·2024년 4월 3일

개인공부

목록 보기

12/28

컴파일하기 쉬운 코드 작성

interface 사용

interface Foo { prop: string };
type Bar = { prop: string };

type과 interface는 매우 유사하게 사용된다. 그러나 두 개 이상을 작성하거나, 타입 간 결합이 필요할 때는 interface를 사용하는 것이 좋다.

type Foo = Bar & Baz & {
    someProp: string;
} // X

interface Foo extends Bar, Baz {
    someProp: string;
} // O

interface는 단순히 객체의 모양을 표현하기 때문에 여러개가 오더라도 머지하기만 하면 된다.

반면에 type은 객체의 원시 타입이 함께 올 수 있기 때문에 재귀적으로 속성을 머지해야 한다.

Type Annotations 사용

타입 어노테이션(정보), 특히 return 타입을 지정하면 컴파일러가 타입을 추론하는 것보다 좋은 성능을 보일 수 있다.

import { bar, barType } from 'bar'
function foo() {
  return bar
} // X

import { bar, barType } from 'bar'
function foo(): barType {
  return bar
} // O

Union 대신 Base Type 만들기

interface WeekdaySchedule {
  day: 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday'
  wake: Time
  startWork: Time
  endWork: Time
  sleep: Time
}

interface WeekendSchedule {
  day: 'Saturday' | 'Sunday'
  wake: Time
  familyMeal: Time
  sleep: Time
}

declare function printSchedule(schedule: WeekdaySchedule | WeekendSchedule)

Union은 중복을 제거하기 위해서 각각의 요소를 비교할 것이다.

각 인수들을 대조해야 하므로, 숫자가 많아질수록 컴파일 속도에 문제가 생길 것이다.

따라서 아래처럼 subtype을 사용하는 것이 좋다.

interface Schedule {
  day: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";
  wake: Time;
  sleep: Time;
}

interface WeekdaySchedule extends Schedule {
  day: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";
  startWork: Time;
  endWork: Time;
}

interface WeekendSchedule extends Schedule {
  day: "Saturday" | "Sunday";
  familyMeal: Time;
}

declare function printSchedule(schedule: Schedule);

프로젝트 레퍼런스 사용

코드 베이스를 여러개의 독립적인 프로젝트로 구성하는 것이 좋다.

각각의 프로젝트는 다른 프로젝트에 종속적인 tsconfig.json을 갖고 있어, 단일 컴파일에 많은 파일이 로드되는 것을 방지할 수 있다.

              ------------
              |          |
              |  Shared  |
              ^----------^
             /            \
            /              \
------------                ------------
|          |                |          |
|  Client  |                |  Server  |
-----^------                ------^-----

위와 같은 프로젝트를 아래와 같이 분리할 수 있다.

              ------------
              |          |
              |  Shared  |
              ^-----^----^
             /      |     \
            /       |      \
------------  ------------  ------------
|          |  |  Shared  |  |          |
|  Client  |  |  Tests   |  |  Server  |
-----^------  ------------  ------^-----
     |                            |
     |                            |
------------                ------------
|  Client  |                |  Server  |
|  Tests   |                |  Tests   |
------------                ------------

tscongif.json 설정

tsconfig.json 파일로 컴파일 환경을 설정할 수 있다.

참고글: Typescript 컴파일시 세부설정 (tsconfig.json)

파일 명시

tsconfig.json가 프로젝트 파일을 특정하는 방법은 두 가지이다.

files : 소스 파일의 path를 명시해야 한다. 파일을 빠르게 로드할 수 있지만, 회상위 진입점이 없고 프로젝트에 많은 파일이 있을 경우 번거로워진다.
include, exclude : globbing pattern을 사용한다. 파일을 특정하는 번거로움은 없지만, 파일을 찾기 위해 디렉토리를 계속해서 순회해야 하므로 폴더가 많을 경우 컴파일 속도가 느려질 수 있다.