为什么 React 不使用接口编译我的本地模块？

Question

I have a shared module which is used by an React and Backend module. It contains two files: index.ts and package.json .

Package.json

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

In index.ts there are just exported interfaces like the following one:

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

I have installed it in my React app and can import the interface. But when I run the React app it get the following compilation error:

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;

This issue is related to webpack but nowhere in my Git repo is webpack config file. I use this shared module also in other modules and it works fine.

I think that shared module need some more code in order to work with Webpack and React. What did I miss?

UPDATE:

When I change the filename to index.d.ts I get different and probably better error:

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

Answer 1

There were the following two mistakes:

1. The filename must be index.d.ts
2. The Typescript module was not set up correctly. It should look like this:

index.d.ts

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

export = share;