import type으로 type 가져오기

GwangSoo·2025년 9월 19일

개인공부

목록 보기

31/34

TypeScript에서 타입을 불러오는 방법은 두 가지가 있다.

import type { Foo } from "./foo";
// OR
import { type Foo } from "./foo";

단순 import를 이용해서 가져와도 되지만 위 구문을 사용했을 때 얻는 것이 무엇이 있나 찾아보았다.

import type

import type은 타입 전용 import 문법이다. 여기서 가져온 심볼은 타입 문맥에서만 쓸 수 있고 컴파일 결과물에는 항상 제거된다.

// 컴파일 전
import type { Foo } from "./foo";

function f(x: Foo) {
  return x;
}

// 컴파일 후
function f(x) {
  return x;
}

주의할 점

값으로는 사용할 수 없음

클래스, 함수, 객체 등은 런타임에 실제 값이 필요하다. 하지만 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 { Component } from "react";처럼 일반 import가 필요하다.

default import와 혼합 불가

import type 구문은 default import와 named import를 동시에 쓸 수 없다. 이는 TS가 “무엇이 타입인지” 판별하기 어렵기 때문이다.
```
import type Foo, { Bar, Baz } from "some-module";
//     ~~~~~~~~~~~~~~~~~~~~~~
// error! A type-only import can specify a default import or named bindings, but not both.
```