How to Import in TypeScript

Use imports in TypeScript when code should be split into reusable modules across files. Imports are essential for utilities, types, classes, React components, constants, and shared business logic.

What you’ll build or solve

You’ll learn how to import values, types, default exports, and entire modules in TypeScript. You’ll also know how import syntax changes based on the export style.

When this approach works best

This approach is the right choice when logic should stay modular, reusable, and easier to maintain.

Common real-world scenarios include:

• Utility helpers
• Shared types
• React components
• Service classes
• Config constants

This is a bad idea when everything lives in one tiny throwaway file with no reuse.

Prerequisites

You only need:

• Multiple TypeScript files
• Basic export knowledge
• Understanding of modules

Step-by-step instructions

Step 1: Import named exports

Use curly braces for named exports.

import { formatDate, TAX_RATE } from "./utils";

This works when the source file exports multiple named members.

export const TAX_RATE = 0.2;

export function formatDate() {}

Named imports are the cleanest default for reusable helpers.

Step 2: Import default exports

Use default imports without curly braces.

import UserService from "./UserService";

This works when the file uses export default.

export default class UserService {}

The imported name can be chosen freely.

Step 3: Import types only

For reusable type contracts, use import type.

import type { User } from "./types";

This keeps the import type-safe and makes intent clearer.

It is especially useful for large React and API codebases.

Step 4: Import everything as a namespace

For grouped helpers, use namespace imports.

import * as math from "./math";

const total = math.add(5, 10);

This keeps related utilities visually grouped.

What to look for:

• Use named imports for reusable helpers
• Use default imports for single primary exports
• Use import type for type-only usage
• Namespace imports group related helpers
• Match the import style to the export style

Examples you can copy

Named utility import

import { sum } from "./math";

Default class import

import ApiClient from "./ApiClient";

Type-only import

import type { Product } from "./types";

Common mistakes and how to fix them

Mistake 1: Mixing default and named syntax

What the reader might do:

import { UserService } from "./UserService";

Why it breaks: default exports should not use curly braces.

Corrected approach:

import UserService from "./UserService";

Mistake 2: Wrong relative file path

What the reader might do:

import { sum } from "utils";

Why it breaks: local files usually need ./ or ../.

Corrected approach:

Use the correct relative path.

Mistake 3: Importing types as runtime values

What the reader might do:

import { User } from "./types";

Why it breaks: this can create unnecessary runtime imports.

Corrected approach:

Use import type.

Troubleshooting

If TypeScript cannot find the file, verify the relative path.

If the import is undefined, match default vs named syntax.

If the import is type-only, switch to import type.

If circular imports appear, move shared types into separate modules.

Quick recap

• Use named imports with curly braces
• Use default imports without braces
• Use import type for type-only contracts
• Match imports to export style
• Keep paths explicit and correct