Type-only imports and exports in Typescript - Mini Project: Build & Apply

Type-only imports and exports

📖 Scenario: You are working on a TypeScript project where you want to keep your code clean and efficient. Sometimes, you only need to use types from other files without importing the actual code. This helps reduce the final JavaScript size and avoid unnecessary imports.

🎯 Goal: You will create two TypeScript files. In the first file, you will define a type. In the second file, you will import that type using a type-only import and then export it again as a type-only export. Finally, you will print a message to confirm the type usage.

📋 What You'll Learn

Create a type called User in types.ts

Use a type-only import to import User in main.ts

Use a type-only export to export User from main.ts

Print a confirmation message using console.log

💡 Why This Matters

🌍 Real World

Type-only imports and exports are useful in large TypeScript projects to keep the compiled JavaScript small and avoid importing code that is only needed for type checking.

💼 Career

Many professional TypeScript developers use type-only imports and exports to optimize their code and improve maintainability, especially in frontend and backend projects.

1

Create a type in types.ts

Create a type called User in types.ts with two properties: name as a string and age as a number.

Typescript

// Your code here

Need a hint?

Use export type User = { name: string; age: number; } to define the type.

2

Import the type-only User in main.ts

In main.ts, use a type-only import to import User from ./types.

Typescript

// Your code here

Need a hint?

Use import type { User } from './types'; to import only the type.

3

Export the type-only User from main.ts

In main.ts, export User again using a type-only export.

Typescript

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

// Your code here

Need a hint?

Use export type { User }; to export the type only.

4

Print a confirmation message

Add a console.log statement in main.ts that prints 'Type-only import and export done!'.

Typescript

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

export type { User };

// Your code here

Need a hint?

Use console.log('Type-only import and export done!'); to print the message.