import type 구문으로 명시적으로 타입 불러오기

채널톡의 bezier-react 코드를 리딩하던 중, 낯선 구문을 만나게 되어 찾아보게 되었어요.

import React, {
  // 임포트 단계에서 type 키워드를 붙여주는 것이 가능했던가?
  // 어떤 기능적 역할을 하는 것이지?
  type Ref, 

  forwardRef,
  useMemo,
} from 'react'

바로 import type 구문인데요, 해당 구문을 활용하면 불러오는 대상이 값인지 타입인지를 명시할 수 있답니다.

// model/user.ts
export interface User {
  id: string;
  name: string;
}


// component.tsx
import { type User } from "@/model/User";

interface Props {
  user: User;
}

export default function Home({ user }: Props) {
  return (
    <>
      <div>{user.name}</div>
    </>
  );
}

반드시 type 키워드를 붙여야만 불러올 요소가 타입으로 인식되는 것은 아니에요.

하지만 이렇게 함으로써, Eslint나 빌드타임을 거치지 않고도 개발자는 해당 요소가 값인지 타입인지를 구분할 수 있게 됩니다.

// HTMLAttributes는 타입으로, useState는 값으로 사용된다.
import { type HTMLAttributes, useState } from "react";

// ❌ 값은 type 키워드를 붙여 사용할 수는 없다.
// import { type useState } from "react";

// ⚠️ 타입은 type 키워드를 붙이지 않고도 사용할 수 있다.
// import { User } from "@/model/user";

// ✅ type 키워드를 사용해 보다 직관적으로 해당 요소가 타입임을 명시할 수 있다.
import { type User } from "@/model/user";

interface Props extends HTMLAttributes<HTMLDivElement> {
  user: User;
}

export default function Home({ user }: Props) {
  const [open, setOpen] = useState();

  return (
    <>
      <div>{user.name}</div>
    </>
  );
}

돌려보지 않고도 내용을 추론할 수 있는 좋은 코드를 만들 수 있는 작지만 좋은 습관이라고 생각해,
앞으로는 import type 키워드를 적극 사용해보려 합니다. 🙂

 

• 공식 문서 링크

Documentation - TypeScript 3.8