Question

我们在一个项目（后端和前端）中有两个子项目，它们是独立编译的（前端正在使用react-scripts-ts）。因此，我们之间不能有交叉导入，因为这会破坏转码后的文件结构。结构为以下类型：

/
|-client
| |-src
|   |-index.tsx
|   |-common.d.ts
|-src
  |-custom.d.ts
  |-app.ts

目前，整个项目看起来像这样（故意简化）。客户端：

common.d.ts：

type UnionType = 'string1' | 'string2';

index.tsx：

import * as React from 'react';
import * as ReactDOM from 'react-dom';

const enum Type {
    Type1 = 'Type1',
    Type2 = 'Type2'
}

interface Props {
    param1: Type;
    param2: UnionType;
}

class App extends React.Component<Props> {
    render() {
        switch (this.props.param1) {
            case Type.Type1:
                return <div>{'Type 1 + ' + this.props.param2}</div>;
            case Type.Type2:
                return <div>{'Type 2 + ' + this.props.param2}</div>;
        }
    }
}

ReactDOM.render(
<App
    param1={Math.random() > 0.5 ? Type.Type1 : Type.Type2}
    param2="string1"
/>, document.getElementById('root'));

服务器端：

custom.d.ts：

/// <reference path="../client/src/common.d.ts" />

app.ts：

const enum Type {
    Type1 = 'Type1',
    Type2 = 'Type2'
}

const type: Type = Type.Type1;
const item: UnionType = "string1";
console.log(`Result is "${type}" + "${item}"`);

我想将const enum Type移至common.d.ts以消除代码重复。但是只是这样声明并从index.tsx和app.ts中删除是行不通的：

declare const enum Type {
    Type1 = 'Type1',
    Type2 = 'Type2'
}

因为后端正确内联，但是react-scripts-ts进行的前端编译会按原样保留Type.Type1之类的所有用法（在加载的应用程序中使用Chrome DevTools进行检查），并且代码在运行时会失败，因为相应的对象不存在（也不应该存在）。

具有MCVE的存储库（在移动enum之后）为here。

从不同地方引用相同的const enum而不导入它是否是可取的行为？

Answer 1

该问题特定于react-scripts-ts模式下使用ts-loader的{{1}}，该模式独立转换每个源文件（忽略错误），并对所有文件使用单独的传递来报告错误。因此，在翻译一个文件期间，将无法解析对其他文件中的const枚举的引用，并且默认情况下保持原样。所发出的代码依赖于其他文件的其他TypeScript功能（例如名称空间合并）也将不起作用。因此，如果您想使用此工具链，则不能使用此类功能。

这里是a ts-loader issue的问题。

Answer 2

ode在运行时失败，因为对应的对象不存在（也不应该存在）。

在项目之间不要使用const enum。您将始终遇到运行时问题。

使用react-scripts-ts声明要在不同文件中使用的const枚举

2 个答案: