‘import’ vs ‘import type’ in TypeScript

When working with TypeScript modules, it’s essential to understand the difference between `import` and `import type`. These two import statements serve slightly different purposes and can impact the performance, and maintainability of your code. In this article, we’ll explore the distinctions between these two imports and when to use each one.

`import`: Importing Both Types and Values

The `import` statement is used to import both types and values (functions, classes, variables, objects, etc.) from a module. When you use a regular `import`, TypeScript will import the type information along with the actual runtime values.

`import type`: Importing Only Types

The `import type` statement, introduced in TypeScript, is used to import only the type information from a module. It indicates that you are interested in using the types of exported values but not the actual runtime values.

Example:

// Shapes.ts

export interface Square {
  type: 'square';
  side: number;
}

export interface Rectangle {
  type: 'rectangle';
  length: number;
  breadth: number;
}

export function drawShape(shape: Square| Rectangle) {
  // Code 
}

while importing, it can be imported like below(with import)

// app.ts

// Regular import including types and values
import { Square, Rectangle, drawShape} from './Shapes';

Optimizing Imports:

The import can be optimized like below

// app.ts

// type only import 
import type { Square, Rectangle} from './Shapes';
import { drawShape } from './Shapes';

In this example, we use import to import the drawShape function from the Shapes module. Additionally, we use import type to import Square and Rectangle types from the Shapes module. This allows us to use the type for type-checking purposes without including the actual runtime values of the module in the emitted JavaScript code.

Benefits of ‘import type’:

There are scenarios where optimizing the import can be beneficial:

1. Code Size: If you have a large codebase with many modules and you import a lot of functions or classes that you don’t actually use in a specific module, it can lead to a larger compiled JavaScript bundle. This can affect load times and overall performance.

2. Tree Shaking: Some bundlers (like Webpack) can perform tree shaking, which means they can eliminate unused code from the final bundle. If you use `import type`, it explicitly signals to the bundler that you don’t need the imported values, making tree shaking more effective.

3. Readability and Maintainability: Using `import type` can also improve the readability of your code by clearly indicating that you are only interested in the types from the imported module. This can make the code more maintainable and easier to understand for other developers.

Visit https://quizessforyou.com for programming quizzes.