TS: import vs import type

Photo by Raphael Schaller on Unsplash

When using TS modules, it is important to know the difference between import and import type. These are two ways to bring code from other files, and they affect how your program works.

import statement

In TS, an import statement is used to bring in functionality or data (functions, classes, variables, objects, etc) from another file or module into the current one.

When you do a regular import in TS, it will import the type information along with the actual runtime values.

export interface Man {
  sex: 'M';
  name: string;
  age: number;
}

export interface Woman {
  sex: 'F';
  name: number;
  age: number;
}

export function sayHi(person: Man | Woman) {
  // Code 
}

while importing, it can be imported like below:

// Regular import including types and values
import { Man, Woman, sayHi} from './Person';

import type statement

The import type statement, introduced by TS, 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.

The import can be optimised like below

// type only import 
import type { Man, Woman} from…