在 TypeScript 中,import type和 import 的区别

在 TypeScript 中,import typeimport 有以下区别:

  1. import type 仅仅引入类型信息,而不会引入实际的 JavaScript 对象。这意味着在编译后,import type 引入的代码不会出现在生成的 JavaScript 文件中。而 import 会引入实际的 JavaScript 对象。

  2. import type 只能用于导入类型声明,例如接口、类型别名、枚举等。而 import 可以用于导入值、函数、类等任何东西。

  3. 在使用 import type 时,无法使用导入的类型作为值进行实例化或传递给函数。这意味着,你无法使用 import type 导入的类型来创建一个对象或者传递给一个函数作为参数,因为这些类型只存在于编译时。

举个例子:

// foo.ts
export interface Foo {
  bar: string;
}

// index.ts
import { Foo } from './foo'; // 这里导入了实际的 Foo 接口对象
import type { Foo as FooType } from './foo'; // 这里导入了 Foo 接口的类型信息

const foo: Foo = { bar: 'baz' }; // 正常使用 Foo 接口对象
const fooType: FooType = { bar: 'baz' }; // 无法使用 Foo 接口的类型信息创建一个对象,TypeScript3.8以前的版本这里会报错。3.8之后的版本就不会报错了

因此,当你只需要类型信息时,应该使用 import type。这样可以避免引入多余的代码,并提高编译性能。而当你需要实际的 JavaScript 对象时,则需要使用 import

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值