Question

我在Typescript中编写了一个反应代码，我想将声明文件与主类文件分开，所以我有这样的结构：

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

当我尝试使用在items.d.ts中定义的接口时，出现错误：Cannot find name 'IItemProps'
我无法从items.d.ts导入界面，错误是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运行编译器。输出将准确证明发生了什么。

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

1 个答案: