如何为纯 JavaScript 反应组件正确定义 *.d.ts（类型）文件

Question

我正在使用 Typescript 和 React。虽然许多 React 组件已经带有预定义的类型，但其中一些没有。定义*.d.ts 文件并将其放入typings 目录并不是什么大问题。然而，在 JavaScript 中，有很多 方法可以导出模块中的内容，而且这绝不是统一的。结果是 Typescript 编译器对我的打字感到满意，但是当我使用打字稿 import 语句进行打字时，我会在运行时得到 undefined。

有人可以澄清如何为反应组件编写正确的*.d.ts 文件吗？特别是，如果原始无类型的 JavaScript 文件，如何在 *.d.ts 文件中声明 export 语句...

• ...使用export class XYZ?
• ...使用export default class XYZ?
• ...使用export namespace XYZ?
• ...使用export default namespace XYZ?
• ...使用module.exports?

这里有很多的可能性，并且某种“烹饪食谱”会很好，即“首先，总是尝试方法X，如果X在运行时给你undefined，试试你……”。

Answer 1

Typescript 不知道通过 JS 导入的模块。因此，您需要声明模块，然后声明其导出的成员。

您可以或多或少地在全局定义文件中声明成员，就像它们在源文件中创建的方式一样。由于我们在这里只讨论模块，因此我们将跳过环境上下文并专注于模块。

具有命名组件的模块

给定名为 view/alpha.js 的文件，其内容：

export class Alpha {
    howdy() {}
}

或

class Alpha {
    howdy() {}
}

module.exports = {
    Alpha: Alpha;
}

在定义文件中声明模块：

declare module 'view/alpha' {
    class Alpha {
        howdy() : void;
    }
}

具有默认导出的模块

给定名为view/beta.js 的文件，其内容：

export default class Beta {
    howdy() {}
}

在定义文件中声明模块：

declare module 'view/beta' {
    export = class Beta {
        howdy();
    }
}

具有默认和其他导出的模块

给定名为 view/epsilon 的文件，其内容：

export default class Epsilon {
    howdy() {}
}

export class Zeta {
    howdy() {}
}

声明模块：

declare module 'view/epsilon' {
    export default class Epsilon {
        howdy() : void;
    }

    class Zeta {
        howdy() : void;
    }
}

---

你提到：

• export default namespace XYZ
• export namespace XYZ

这是无效的ES6。如果您指的是 export Delta 之类的东西，其中 Delta 包含命名类，那么您将其声明为：

declare module 'view/gamma' {
    namespace Delta {
        class Omega {
            howdy() : void;
        }
    }
}

否则，您可以链接一个示例吗？我尝试使用谷歌搜索 export default namespace，但没有得到任何非 Typescript 示例。