reactjs - 如何在 xxx.tsx 类文件中导入 xxx.d.ts 声明文件？

Question

我正在 Typescript 中编写 react 代码，我想将声明文件与主类文件分开，所以我有这样的结构:

src  
├── app  
│   ├── items.tsx  
│   └── items.d.ts

当我尝试使用在 items.d.ts 中定义的接口(interface)时，出现错误:找不到名称“IItemProps”
我无法从 items.d.ts 导入接口(interface)，错误为 Module '".../src/app/items"' has no Exported member 'IItemProps'

谢谢!

这是代码:

// items.tsx
import * as React from 'react';

class Items extends React.Component<IItemsProps, IItemsState> implements IItems {

    render() {
        return (
            <div>
                <div>test</div>
            </div>
        );
    }
}

export default Items;

和

// items.d.ts
export interface IItems {
    valid: boolean;
}

export interface IItemsProps {
    validAtInit: boolean;
}

export interface IItemsState {
    values: {[key: string]: any};
}

Answer 1

简单的解决方案如下:

将构成模块的所有构造放在单个源文件中并删除声明文件。

详细信息:

请记住，ES 模块是一种物理模块格式，而不是逻辑模块格式，这意味着它们直接对应于 URL。但是，由于其转换过程，TypeScript 编译器并不认为扩展可以区分它们。

给定两个具有相同名称但扩展名不同的模块，编译器将选择其中之一。它具有非常特定的优先顺序。

要么将所有内容放在同一个文件中，要么以不同的名称命名。

如果这看起来很奇怪，请考虑一下如果您打开 --declaration 发出标志会发生什么。

.d.ts 文件旨在提供与已转换为 JavaScript 或表示不作为源存在的结构的源相对应的类型信息。

注意: 要验证我在这里所说的内容，请使用 --traceResolution 运行编译器。输出将准确地展示正在发生的情况。