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

Question

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

有人可以澄清如何为*.d.ts组件编写正确的*.d.ts文件吗？ 特别是，如果原始的未*.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的内容，请尝试Y ...”。

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示例。