Type-only imports and exports in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a type-only import in TypeScript?

A type-only import brings in types from another file without including any JavaScript code in the final output. It uses the <code>import type</code> syntax.

beginner

How do you write a type-only export in TypeScript?

You use export type before the type or interface you want to export, so it only exports the type information without any runtime code.

intermediate

Why use type-only imports and exports?

They help keep the JavaScript output clean by removing unnecessary code, improving performance and avoiding circular dependencies at runtime.

intermediate

What happens if you import a type normally instead of using <code>import type</code>?

TypeScript may include extra JavaScript code in the output, which can increase bundle size and cause runtime errors if the imported item is not a value.

beginner

Show an example of a type-only import and a type-only export.

Example:<br><pre>import type { User } from './models';

export type ID = string | number;</pre>

Which syntax imports only types without including JavaScript code?

A import { MyType } from './file';

B import type { MyType } from './file';

C export type { MyType } from './file';

D export { MyType } from './file';

Using import type imports only the type information and excludes JavaScript code.

What keyword is used to export only types in TypeScript?

A export type

B export interface

C export const

D export class

export type exports only type information without runtime code.

Why might you want to use type-only imports?

A To reduce JavaScript bundle size

B To import runtime values

C To execute code immediately

D To create side effects

Type-only imports avoid including runtime code, reducing bundle size.

What happens if you import a type without import type and the type is not a value?

A The program crashes immediately

B The import is ignored

C Extra JavaScript code may be included

D The type is converted to a value

Normal imports may include runtime code even if only types are needed, causing extra code.

Which of these is a correct type-only export?

A export interface User {}

B export const User = { name: 'Alice' };

C export class User {}

D export type User = { name: string };

export type exports only the type definition without runtime code.

Explain what type-only imports and exports are and why they are useful.

Think about how TypeScript separates types from JavaScript code.

Write a small example showing how to import a type only and export a type only in TypeScript.

Use <code>import type</code> and <code>export type</code> keywords.

Practice

1. What is the main purpose of using import type in TypeScript?

easy

A. To export types from a module.

B. To import both types and runtime values together.

C. To import only runtime values and ignore types.

D. To import only types without including any runtime code.

Solution

1. Step 1: Understand the role of import type

   This syntax imports only type information, not actual code that runs.

2. Step 2: Compare with normal imports

   Normal imports bring in both types and runtime code, but import type excludes runtime code.

3. Final Answer:

   To import only types without including any runtime code. -> Option D

4. Quick Check:

   Type-only imports = import type [OK]

Hint: Remember: import type brings types only, no code. [OK]

Common Mistakes:

• Thinking import type imports runtime code
• Confusing import type with normal import
• Using import type to export types

2. Which of the following is the correct syntax to export only types from a TypeScript module?

easy

A. export { MyType } from './types';

B. export type { MyType } from './types';

C. export import type MyType from './types';

D. export only type MyType from './types';

Solution

1. Step 1: Identify correct export type syntax

   TypeScript uses export type { ... } to export only types.

2. Step 2: Check other options

   export { MyType } from './types'; (export { MyType } from './types';) exports both types and values. Options B and C are invalid syntax.

3. Final Answer:

   export type { MyType } from './types'; -> Option B

4. Quick Check:

   Type-only export = export type [OK]

Hint: Use export type {} to export types only. [OK]

Common Mistakes:

• Using normal export instead of export type
• Writing invalid syntax like export only type
• Confusing import syntax with export syntax

3. Consider the following code snippet:

import type { User } from './models';

function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}

greet({ name: "Alice" });

What will happen when this code is compiled and run?

medium

A. It will print 'Hello, ' followed by the user's name at runtime.

B. It will cause a runtime error because User is not imported as code.

C. It will fail to compile because import type cannot be used with functions.

D. It will import the full User class including methods.

Solution

1. Step 1: Understand import type usage

   The import type imports only type info, which is erased at runtime.

2. Step 2: Check runtime behavior

   The function uses User only as a type for parameter. At runtime, it expects an object with a name property.

3. Final Answer:

   It will print 'Hello, ' followed by the user's name at runtime. -> Option A

4. Quick Check:

   Type-only import works for typing, no runtime error [OK]

Hint: Type-only imports vanish at runtime but keep type safety. [OK]

Common Mistakes:

• Expecting runtime import of types
• Thinking import type causes runtime errors
• Confusing compile-time types with runtime values

4. Identify the error in this TypeScript code:

import type { Config } from './config';

export { Config };

medium

A. You cannot export a type that was imported with import type.

B. The import type statement is missing a semicolon.

C. You must use export type { Config } to export the type correctly.

D. There is no error; this code works fine.

Solution

1. Step 1: Check import and export compatibility

   Types imported with import type must be exported with export type.

2. Step 2: Identify correct export syntax

   Using normal export { Config } tries to export a runtime value, which does not exist.

3. Final Answer:

   You must use export type { Config } to export the type correctly. -> Option C

4. Quick Check:

   Type-only export matches type-only import [OK]

Hint: Match import type with export type. [OK]

Common Mistakes:

• Exporting type-only imports as normal exports
• Ignoring that types do not exist at runtime
• Confusing semicolon errors with syntax errors

5. You have a module shapes.ts exporting types and values:

export type Circle = { radius: number };
export const PI = 3.14;

You want to import only the type Circle in another file without importing PI. Which is the best way?

hard

A. import type { Circle } from './shapes';

B. import { Circle } from './shapes';

C. import { Circle, PI } from './shapes';

D. import type { Circle, PI } from './shapes';

Solution

1. Step 1: Understand import type behavior

   import type imports only types, no runtime values like PI.

2. Step 2: Check options for importing only Circle

   import type { Circle } from './shapes'; imports only the type Circle without bringing in PI.

3. Final Answer:

   import type { Circle } from './shapes'; -> Option A

4. Quick Check:

   Use import type to avoid importing values [OK]

Hint: Use import type to import only types, no values. [OK]

Common Mistakes:

• Using normal import and importing unwanted values
• Trying to import values with import type
• Importing both types and values when only types are needed