Type only import

26.08.2023 — Code, Typescript, React — 1 min read

type-only imports and exports ===> reduce bundle size and not importing runtime

// myModule.ts
export interface MyType {
  prop1: string;
  prop2: number;
}

export function myFunction() {
  console.log("This is a function");
}

// main.ts
import type { MyType } from "./myModule";

const myVariable: MyType = {
  prop1: "Hello",
  prop2: 42,
};

// You won't be able to use myFunction here, only the type MyType is imported.

The advantage of type-only imports

bundle size and you're only importing the things you need without the extra runtime stuff.