如何為純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示例。