声明要在不同的文件中使用的const enum

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 到 普通d.T 以消除代码重复。但只是宣布它是这样,并从两者中删除 应用程序ts

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

因为,在后端正确内联时,前端编译 反应脚本ts Type.Type1 因为相应的对象不存在(也不应该存在),所以代码在运行时失败。

带有MCVE的存储库(在 enum 被移动)是 here .

const enum