[Typescript] Type-Only Imports and Export

개념

타입 표기와 선언에 사용될 선언만 import 한다. 

완전히 제거되므로, 런타임에 남아 있는 것은 없다.

import type { mapboxgl } from './mapboxgl'
export type { mapboxgl }

 

특징

클래스는 런타임에 값을 가지고, 디자인-타임에 타입을 있으며 사용은 상황에 따라 다를 수 있다.

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.
    // ...
}

 

importsNotUsedAsValues.

import type과 함께, TypeScript 3.8은 런타임 시 사용되지 않는 import에서 발생하는 작업을 제어하기 위해 새로운 컴파일러 플래그가 추가됨

 

remove: imports 제거, 기본값

preserve: 사용 되지 않는 값들은 모두 보존. imports/side-effects가 보존될 수 있다.

error: 모든 imports를 보존하지만, import 값이 타입으로만 사용될 경우 오류를 발생시킨다. 실수로 값을 import하지 않지만 사이드 이팩트 import를 명시적으로 만들고 싶을 때 유용

 

https://www.typescriptlang.org/ko/docs/handbook/release-notes/typescript-3-8.html#%ED%83%80%EC%9E%85-%EC%A0%84%EC%9A%A9-imports-%EC%99%80-exports-type-only-imports-and-exports

Documentation - TypeScript 3.8