[Typescript] 타입스크립트 성능 고려하기 - 컴파일하기 쉬운 코드 작성

1. 타입간 merge 가 필요할 때는 type 보다 interface 를 사용하자.

- 객체 사용 시 type 과 interface 는 다음과 같이 유사하게 사용 되고 있다.

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

- 그러나 타입간 merge 가 필요할 때는 interface 의 extends 를 사용하는 것이 성능상으로 유리하다.
interface 는 단순히 객체에 대한 모양으로 표현하기 때문에 여러개가 올 경우 단순히 merge 만 하면 되지만,
type 은 객체 뿐만 아니라 원시타입도 올 수 있기 때문에 재귀적으로 속성을 merge 하고 그로인해 때로는
naver 가 나오면서 제대로 merge 가 안되는 경우도 있다.

- 또한 interface 는 merge 할 경우 캐시 되지만, type 은 그러지 못한다.
따라서 type은 merge 시 유효성 판단하기 전에 모든 구성 요소에 대해 체크하기 때문에 컴파일 시 상대적으로 성능이 좋지 않다.

// type merge 보단
-type Foo = Bar & Baz & {
-   someProp: string;
-}

// interface extends merge 를 추천한다.
+interface Foo extends Bar, Baz {
+   someProp: string;
+}

2. Type Annotations 사용하자.

- Type Annotations, 특히 return type 을 지정하면 하면 컴파일러가 함수의 타입을 추론하는 것 보다 훨씬 더 성능적으로 이점을 얻을 수 있고, declaration 파일을 읽고 쓰는데 많은 시간을 절약해 주기 때문에 컴파일러의 과도한 작동을 피할 수 있다.

- 물론 타입 추론은 매우 편리한 기능이기 때문에 다 이걸 처리할 필요는 없지만, 코드에서 약간의 병목현상이 생긴다면 고려해볼만 하다.

-import { bar, barType } from 'bar';
-   function foo() {
-   return bar;
-}
// 함수에 return type 지정

+import { bar, barType } from 'bar'
+   function foo(): barType {
+   return bar;
+}

3. Union 보다 Base Type 을 만들자.

- Union 은 다양한 타입의 가능성을 열어주는 훌륭한 기능이지만, 중복을 제거하기 위해 각각의 요소를 쌍으로 비교해야하기 때문에 Base Type 보다 컴파일시 2차적 비용이더 든다. 물론 타입이 간단한 형태일 경우 이를 무시할만 하지만 Union 이 더 많아지면 컴파일 속도에 악영향을 끼친다.

- 따라서 Union 보다 Sub 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);

// Schedule 이라는 Base Type 지정 후
+interface Schedule {
+    day:
+    | 'Monday'
+    | 'Tuesday'
+    | 'Wednesday'
+    | 'Thursday'
+    | 'Friday'
+    | 'Saturday'
+    | 'Sunday'
+    wake: Time
+    sleep: Time
+    };

// WeekdaySchedule 와 WeekendSchedule 라는 Sub Type 추가해서 사용한다.
+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);

 

참고 사이트 : https://github.com/microsoft/TypeScript/wiki/Performance#reporting-compiler-performance-issues