為什么 React 不使用接口編譯我的本地模塊？

Question

我有一個由 React 和后端模塊使用的共享模塊。 它包含兩個文件： index.ts和package.json 。

Package.json

{
  "name": "app-shared",
  "version": "1.0.0",
  "license": "ISC"
}

在index.ts中只有導出的接口，如下所示：

export interface Student extends StudentDto {
    ref: any;
    id: string;
    areAllPaid: boolean;
}

我已經將它安裝在我的 React 應用程序中，並且可以導入界面。 但是當我運行 React 應用程序時，會出現以下編譯錯誤：

Failed to compile.

../shared/index.ts 4:7
Module parse failed: Unexpected token (4:7)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| $RefreshSetup$(module.id);
| 
> export interface Student extends StudentDto {
|     ref: any;
|     id: string;

此問題與 webpack 有關，但在我的 Git 存儲庫中沒有 webpack 配置文件。 我也在其他模塊中使用這個共享模塊，它工作正常。

我認為共享模塊需要更多代碼才能與 Webpack 和 React 一起使用。 我錯過了什么？

更新：

當我將文件名更改為index.d.ts ，我得到了不同且可能更好的錯誤：

Module not found: Can't resolve 'shared' in 'path/path'

Answer 1

有以下兩個錯誤：

1. 文件名必須是index.d.ts
2. Typescript 模塊未正確設置。 它應該如下所示：

索引.d.ts

declare namespace share {
    export interface Student extends StudentDto {
        ref: any;
        id: string;
        areAllPaid: boolean;
    }
}

export = share;