타입-전용 Imports 와 Exports (Type-Only Imports and Exports)

TypeScript 3.8은 타입-전용 imports, exports를 위한 새로운 구문이 추가되었습니다.

import type은 타입 표기와 선언에 사용될 선언만 import 합니다. 이는 항상 완전히 제거되므로, 런타임에 남아있는 것은 없습니다. 마찬가지로, export type은 타입 문맥에 사용할 export만 제공하며, 이 또한 TypeScript의 출력물에서 제거됩니다.

import type { SomeThing } from "./some-module.js";
export type { SomeThing };

클래스는 런타임에 값을 가지고 있고 디자인-타임에 타입이 있으며 사용은 상황에-따라 다르다는 것을 유의해야 합니다. 클래스를 import 하기 위해 import type을 사용하면, 확장 같은 것은 할 수 없습니다.

import type { Component } from "react";
interface ButtonProps {
    // ...
}
class Button extends Component<ButtonProps> {
    //               ~~~~~~~~~
    // error! 'Component' only refers to a type, but is being used as a value here.
    // ...
}

 

---

이를 응용하여 다음과 같이 사용할 수 있다.

import type {FC, ComponentProps, ForwardRefRenderFunction} from 'react';
import type {StyleProp, TextStyle} from 'react-native';