Question

我正在努力寻找正确的方法来为React组件的命名空间库定义类型。我已经阅读了一些文章并在互联网上提供了帮助，但是阅读的文章越多，我就越困惑。基本上，该库具有两层深度嵌套Reader.Book.Header的组件，其中Reader和Book是名称空间，而Header是组件。 Reader是export default，它也是window对象上的全局变量。

/// <reference types="react" />
import React = require("react");

export type HeaderProps = {
    author: string
}

export interface Header extends React.Component<HeaderProps>{
    sayHello(name:string) : void
}

declare const Reader: {
    Header: Header
};

export default Reader;

我正在输入的当前状态看起来像这样（只有1级嵌套才能首先尝试），而我正试图找出原因，

import {Header} from "./types";

正确地为<Header />道具和

提供自动完成功能

import Reader from "./types";

似乎没有触发<Reader.Header />的任何自动完成功能。在JSX语法内部，WebStorm建议使用HeaderProps，而在JSX之外（在纯JS中），WebStorm建议正确使用Header和sayHello方法。

昨天我遇到material-ui typings，因为它们也被命名，并且它们与declare module的语法有些不同。不知道该怎么想。

主要目标是在WebStorm中具有正确的自动完成功能，但是我相信，一旦它在WebStorm中可用，它也将在VSC中起作用。在这里，我可能在很多层面上都是错的，但是基本上我到目前为止所做的任何尝试要么根本没有效果（没有建议），要么仅在没有名称空间的情况下才正确提示。

您能指出尝试将我指向正确的方向吗？

如何为命名空间的React组件库创建类型

0 个答案: