将 --isolatedModules 与 TS 3.2.2 一起使用时无法重新导出类型

lum*_*mio 18 typescript webpack webpack-4

我可能需要重新思考我们构建 React 组件的方式。我们正在使用允许使用 Typescript 的最新 react-scripts,并且默认情况下,isolatedModules它正在启用,这目前让我有点烦恼。

我们过去常常像这样构造一个组件:

Component
|_ Component.tsx
|_ index.ts
|_ types.ts
Run Code Online (Sandbox Code Playgroud)
  • Component.tsx 保存没有声明的实际组件
  • index.ts 只是重新导出所有东西,这样我们就可以有一个单一的入口点,并且可以做类似的事情 import Component, { ComponentType } from '@/Component';

  • types.ts 保存实际的类型定义并导出其中的大部分或全部。

到目前为止一切顺利,无需isolatedModules. 但是,我们也导出了一些类型定义,有效地重新导出了在Component/types.ts. 这将不起作用,因为 TypeScript 本身不会再转译代码。

如何在没有单独的导入语句的情况下重新导出它@/Component/types(无论如何这可能是更简单的方法)?

for*_*d04 33

TS 3.8+

您可以使用类型只进口和出口--isolatedModules

// types.ts
export type MyType = { a: string; b: number; };
Run Code Online (Sandbox Code Playgroud)
// main.ts 

// named import/export
import type { MyType } from './types'
export type { MyType }

// re-export
export type { MyType } from './types'

// namespace import
import type * as MyTypes from "./types";
export type RenamedType = MyTypes.MyType;
export { MyTypes };

//     ^ Note the "type" keyword in statements above
Run Code Online (Sandbox Code Playgroud)

示例游乐场;查看PR以了解可能的扩展形式和建议。


TS 3.7 或更高版本

在以前的版本中,以下是不可能的:

import { MyType } from './types'; 
export { MyType }; // error: Cannot re-export a type with --isolatedModules

export { MyType } from "./types"; // error, like above
Run Code Online (Sandbox Code Playgroud)

类型重新导出必须使用一种解决方法

import { MyType as MyType_ } from "./types";
export type MyType = MyType_;

// or
export * from "./types"
Run Code Online (Sandbox Code Playgroud)


Chr*_*vic 6

我个人使用相同的结构,并在转移到create-react-app强制执行isolatedModules. 似乎与背后的想法形成鲜明对比的一种解决方法isolatedModulesexport * from "./Component";index.ts.