How to Import Type Feature of TypeScript

1. Define Custom Types in TypeScript
2. Use import type to Import the Custom Types in TypeScript

TypeScript is a programming language mostly used to develop web applications and is a superset of JavaScript.

The language is mostly used with frameworks such as Angular. TypeScript has primitive and non-primitive data types that we can leverage in programming.

Developing applications defining custom types is usually inevitable. These custom types are defined to be used in other application modules.

This tutorial will teach how to include these custom types in our modules. These custom types can be included in the application using the import type and import methods.

The next phase covers these methods in detail.

Define Custom Types in TypeScript

Go to your Visual Studio Code software and create a new folder named export-import-type or use any name you prefer.

Create a file named foo.ts under the folder. Copy and paste the following code into the file.

export type Employee = {
    firstName: string
    lastName: string
    email: string
}

export function logEmployee(employee: Employee){
    return employee;
}

export type Account = {
    username: string
    password: string
}

export function logAccount(account: Account){
   return account
}

The following are the custom types defined in the foo.ts file. All the custom types use the export keyword to indicate that another module outside their file can access them.

The Employee type defines three properties: firstName, lastName, and email. The logEmployee() method accepts a type Employee parameter and logs the employee details to the console.

The Account type defines two properties username and password. The logAccount() method accepts a parameter of the type Account and logs the account details to the console.

Use import type to Import the Custom Types in TypeScript

Create a file named bar.ts under the same folder. Copy and paste the following code into the file.

import type {Employee, Account} from "./foo"
import {logEmployee, logAccount} from "./foo"

function logEmployeeTwice(employee: Employee){
    console.log(logEmployee(employee))
    console.log(logEmployee(employee))
}

let employee: Employee ={
    firstName: "david",
    lastName: "mbochi",
    email: "david@gmail.com"
}

logEmployeeTwice(employee)

function logUserAccount(account: Account){
    console.log(logAccount(account))
}

let account: Account={
    username: "johndoe",
    password: "@john123"
}

logUserAccount(account)

In the above code, we have used the import type approach to import the declarations that we can use for type declarations and annotations.

We have used the import approach to import the value elements. This is the default convention that should be used for the two methods.

If you try to use import type on the value elements, you will get the following error.

import type {logEmployee, logAccount} from "./foo"

Error:

'logEmployee' cannot be used as a value because it was imported using 'import type'.ts(1361)
bar.ts(2, 14): 'logEmployee' was imported here.

'logAccount' cannot be used as a value because it was imported using 'import type'.ts(1361)
bar.ts(2, 27): 'logAccount' was imported here.

Generate a tsconfig.json file to add TypeScript configurations using the following command.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ tsc init

Ensure the tsconfig.json file generated has the following configuration properties.

{
    "compilerOptions":{
        "target": "es5",
        "noEmitOnError":true
    }
}

Use the following command to transpile all the TypeScript files to JavaScript.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ tsc

Use the following command to execute the bar.js file using node.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ node bar.js

Output:

{ firstName: 'david', lastName: 'mbochi', email: 'david@gmail.com' }
{ firstName: 'david', lastName: 'mbochi', email: 'david@gmail.com' }
{ username: 'johndoe', password: '@john123' }