Cannot re-export a type when using the --isolatedModules with TS 3.2.2

送分小仙女□ 提交于 2020-08-24 06:11:45

问题


I probably need to rethink the way we structure our React components. We are using the latest react-scripts that allow Typescript to be used and by default, the isolatedModules is being enabled which currently bugs me a bit.

We used to structure a component like this:

Component
|_ Component.tsx
|_ index.ts
|_ types.ts
  • Component.tsx holds the actual component without declarations
  • index.ts is just re-exporting everything so we can have a singular entry point and can do something like import Component, { ComponentType } from '@/Component';

  • types.ts holds the actual type definitions and exports most or all of them.

So far so good and that works without the isolatedModules. However, we also export some of the type definitions, effectively re-exporting the interfaces that were specified within Component/types.ts. This won't work as TypeScript itself would not transpile the code any longer.

How can I re-export this without having a separate import statement going to @/Component/types (which might be actual the simpler way anyway)?


回答1:


TS 3.8+

You can use type-only imports and exports with --isolatedModules:

// types.ts
export type MyType = { a: string; b: number; };
// 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

Example Playground; Take a look at the PR for possible extension forms and proposals.


TS 3.7 or older

In previous versions, the following is not possible:

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

export { MyType } from "./types"; // error, like above

Type re-exports have to use a workaround:

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

// or
export * from "./types"



回答2:


I am using the same structure personally and stumbled into the same issue after moving to a create-react-app boilerplate which enforces isolatedModules. A workaround that seems to be working in stark contrast to the idea behind isolatedModules is to use export * from "./Component"; in index.ts.



来源:https://stackoverflow.com/questions/53728230/cannot-re-export-a-type-when-using-the-isolatedmodules-with-ts-3-2-2

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!