Within our project, we have two distinct subprojects (backend and frontend) that are compiled independently. The frontend utilizes react-scripts-ts, so it is crucial to avoid cross-imports between the two subprojects to maintain the integrity of the transpiled code structure. The project's layout is as follows:
/
|-client
| |-src
| |-index.tsx
| |-common.d.ts
|-src
|-custom.d.ts
|-app.ts
Here is a simplified overview of the current project structure. On the client side:
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'));
On the server side:
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}"`);
There is a desire to eliminate code duplication by moving the const enum Type to common.d.ts. However, simply declaring it in the common file and removing it from both index.tsx and app.ts does not yield the desired outcome:
declare const enum Type {
Type1 = 'Type1',
Type2 = 'Type2'
}
Although the backend properly inlines the declaration, the frontend compilation using react-scripts-ts retains all references to Type.Type1 in their original form, ultimately causing runtime errors due to the absence of the corresponding object.
You can find a reproducible example of this issue in the repository here.
Is it feasible to reference the same const enum from various locations without importing it at all?