981377660LMT / ts

ts学习
6 stars 1 forks source link

重新导出一个类型必须要 export type #522

Open 981377660LMT opened 4 months ago

981377660LMT commented 4 months ago

在 TypeScript 中,当 isolatedModules 选项启用时,编译器会将每个文件视为独立的模块。这意味着每个文件都需要能够独立编译,而不依赖于其他文件。 使用 export { SomeType } 语法时,TypeScript 无法确定 SomeType 是一个类型还是一个值。这会导致在 isolatedModules 模式下编译失败。 通过使用 export type { SomeType },明确告诉编译器 SomeType 是一个类型,而不是一个值。这样,编译器可以正确处理类型导出,确保每个文件都能独立编译。 简而言之,export type 语法在 isolatedModules 模式下是必要的,以确保类型导出的正确性和编译的独立性。

981377660LMT commented 4 months ago
image
981377660LMT commented 4 months ago

isolatedModules 选项启用时,重新导出一个类型需要使用 export type

// 错误示例
export { SomeType } from './module';

// 正确示例
export type { SomeType } from './module';
981377660LMT commented 4 months ago

为什么使用 export { SomeType } 语法时,TypeScript 无法确定 SomeType 是一个类型还是一个值

在 TypeScript 中,export { SomeType } 语法用于导出模块中的成员,但这种语法并不明确指示 SomeType 是一个类型还是一个值。这是因为 TypeScript 支持类型和值的同名定义,即一个名称可以同时表示一个类型和一个值

例如:

// 文件 module.ts
export interface SomeType {
  // 类型定义
}

export const SomeType = () => {
  // 值定义
};

在这个例子中,SomeType 既是一个接口类型,也是一个函数。当使用 export { SomeType } 语法时,TypeScript 无法确定你想要导出的是类型还是值。

启用 isolatedModules 选项后,TypeScript 要求每个文件都能独立编译,因此需要更明确的语法来区分类型和值。使用 export type { SomeType } 明确告诉编译器 SomeType 是一个类型,而不是一个值,从而避免了歧义。

总结来说,export { SomeType } 语法在 isolatedModules 模式下会导致编译器无法确定 SomeType 的性质,因此需要使用 export type { SomeType } 来明确指示导出的是类型。

981377660LMT commented 4 months ago

那 import { SomeType } 语法呢

在 TypeScript 中,import { SomeType } 语法用于导入模块中的成员。与导出不同,导入语法在大多数情况下能够明确区分类型和值,因为 TypeScript 在编译时能够根据上下文推断出 SomeType 是类型还是值。

例如:

// 文件 module.ts
export interface SomeType {
  // 类型定义
}

export const SomeType = () => {
  // 值定义
};

在另一个文件中导入时:

// 文件 main.ts
import { SomeType } from './module';

const instance: SomeType = {}; // 这里 SomeType 被用作类型
const func = SomeType; // 这里 SomeType 被用作值

在这个例子中,TypeScript 能够根据上下文推断出 SomeType 在不同位置的使用方式。当用作类型注解时,SomeType 被视为类型;当用作变量时,SomeType 被视为值。

然而,在启用 isolatedModules 选项的情况下,为了确保每个文件都能独立编译,TypeScript 推荐使用 import type { SomeType } 语法来明确导入类型,以避免潜在的歧义。

例如:


// 文件 main.ts
import type { SomeType } from './module'; // 明确导入类型
import { SomeType as SomeTypeValue } from './module'; // 导入值

const instance: SomeType = {}; // 这里 SomeType 被用作类型
const func = Some