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.