关于import type引入的理解

import type 是 ECMAScript 模块系统中的一种语法,用于引入类型信息而不引入实际的运行时代码。它通常与 TypeScript 类型检查工具一起使用。

 举个例子:

// types.ts
export interface MyType = {
  id: number;
  name: string;
};


// main.ts
import type { MyType } from './types';

const myVariable: MyType = {
  id: 1,
  name: 'test',
};

在这个例子中,我们使用import type引入 编译后的 JavaScript 代码不包含类型信息: 

  • 这是 main.ts 文件的编译结果 ,main.js生成的 JavaScript 代码中只包含了变量的声明和赋值,并没有 MyType 的定义,因为 import type { MyType } from './types'; 语句并没有引入实际的类型定义到生成的 JavaScript 代码中。
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const myVariable = {
    id: 1,
    name: 'test',
};

PS: "use strict"; 以及 Object.defineProperty(exports, "__esModule", { value: true }); 是 TypeScript 编译器为了处理 ES Module 规范而生成的代码。

举个反例:

// types.ts
export interface MyType = {
  id: number;
  name: string;
};

// main.ts
import { MyType } from './types';

const myVariable: MyType = {
  id: 1,
  name: 'test',
};

在这个例子中,我们没有使用import type,而是直接使用了import引入。编译后的 JavaScript 代码可能包含类型信息

  • 这是 main.ts 文件的编译结果 ,main.js生成的 JavaScript 代码中包含了变量的声明和赋值及 MyType 的定义,因为我们使用了普通的import,MyType的定义被包含在生成的 JavaScript 代码中。这可能导致在运行时引入不必要的类型信息,增加了代码的大小。
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const types_1 = require("./types");
const myVariable = {
    id: 1,
    name: 'test',
};

你可能感兴趣的:(typescript,前端)