Home > Back-end >  Is it okay to import interfaces with the `import type {x} from 'y'` syntax in TypeScript?
Is it okay to import interfaces with the `import type {x} from 'y'` syntax in TypeScript?

Time:12-22

In TypesScript 4.4, using the import type syntax for interfaces works fine and there are no errors when compiling.

export interface Person {
  firstName: string;
  lastName: string;
}
import type { Person } from './interfaces';

const developer: Person = {
  firstName: 'John',
  lastName: 'Doe',
};

Wondering if it's fine to use this just because TS allows it. It isn't specified in TS documentation for Type-Only Imports.

CodePudding user response:

What you're most likely referring to is type aliases - both type aliases and interfaces fall under the general umbrella of types. A lot of the common types are covered in the TypeScript handbook. These types also include things such as Type Aliases, Interfaces, and Enums.

Do note that when importing any types (including interfaces), no side-effects usually caused by the file will be imported.

CodePudding user response:

You are looking in a wrong place

https://www.typescriptlang.org/docs/handbook/modules.html#importing-types

Prior to TypeScript 3.8, you can import a type using import. With TypeScript 3.8, you can import a type using the import statement, or using import type.

// Re-using the same import
import { APIResponseType } from "./api";
// Explicitly use import type
import type { APIResponseType } from "./api";
// Explicitly pull out a value (getResponse) and a type (APIResponseType) 
import { getResponse, type APIResponseType} from "./api";

Any explicitly marked type import is guaranteed to be removed from your JavaScript, and tools like Babel can make better assumptions about your code via the isolatedModules compiler flag. You can read more in the 3.8 release notes.

CodePudding user response:

i think you should write type keyword when you importing type like so but when you have interface it's not necessary to write.

export type Person = {
  firstName: string;
  lastName: string;
}
  • Related