错误 TS2339：属性 'props' 在类型 'TestPage' 上不存在

Question

我在 React 中使用 typescript abstract class 作为我的布局组件的基础 class，该基础 class 的用法看起来像这样：

import { IPageLayoutActions, IPageLayoutLocalState, IPageLayoutProps, PageLayoutNoSidebar } from 'pg-face/dist/layouts/PageLayoutNoSidebar';

export interface ITestPageProps extends IPageLayoutProps
{
    loremIpsum: string;
}
export interface ITestPageActions extends IPageLayoutActions {}
interface ITestPageLocalState extends IPageLayoutLocalState {}

export
class TestPage
extends PageLayoutNoSidebar<ITestPageProps && ITestPageActions, ITestPageLocalState>
{
    renderPageContent() {
        return <span>{ this.props.loremIpsum }</span>;
    }
}

PageLayoutNoSidebar 组件实际上扩展了另一个名为 PageLayout 的 class，它是我应用程序中所有布局的基础 class。当一切都在一个项目中时，它会起作用。

现在我想将所有这些布局文件移动到单独的 npm 模块中，以便在我的所有应用程序中重复使用（我只是对其进行测试，所以我正在从本地目录加载包）。所以我创建了一个包，使用 "tsc -d -p ./" 将 typecscript 代码转换为 js 和定义文件。这些文件存储在包的 dist 目录中。然后我在我的项目目录中更新了包。

之后，当我尝试在我的项目中使用这个class时，我得到了

error TS2339: Property 'props' does not exist on type 'TestPage'

我发现当PageLayoutNoSidebar 不扩展PageLayout 时（我将PageLayout 中的所有代码直接复制到PageLayoutNoSidebar 中），这个问题就消失了，所以我猜导出有问题。

您知道代码可能有什么问题吗？

这些 classes 的代码是这样的：

PageLayout.tsx

import * as React from 'react';
import { Header, IHeaderActions, IHeaderProps } from '../blocks';

export interface IPageLayoutProps extends IHeaderProps {}
export interface IPageLayoutActions extends IHeaderActions {}
export interface IPageLayoutLocalState {
    headerCollapsed: boolean;
}

export
abstract class PageLayout<P extends IPageLayoutProps & IPageLayoutActions, S extends IPageLayoutLocalState>
extends React.Component<P, S>
{
    abstract render(): JSX.Element

    renderPageHeader() {
        return (
            <Header
                headerCollapsed={this.state.headerCollapsed}
                mainMenuItems={this.props.mainMenuItems}
                onHeaderToggle={this._toggleHeader}
            />
        );
    }

    renderPageContent(): JSX.Element | null {
        return null;
    }

    _toggleHeader = (headerCollapsed: boolean) => {
        this.setState({
            headerCollapsed
        });
    }

    //...
}

PageLayoutNoSidebar.tsx

import * as React from 'react';
import { IPageLayoutActions, IPageLayoutLocalState, IPageLayoutProps, PageLayout } from './PageLayout';

export
class PageLayoutNoSidebar<P extends IPageLayoutProps & IPageLayoutActions, S extends IPageLayoutLocalState>
extends PageLayout<P, S>
{
    render() {
        return (
            <div>
                {this.renderPageHeader()}
                <main className="container-narrow">
                    {this.renderPageContent()}
                </main>
            </div>
        );
    }
}

Answer 1

最后我修改了包的发布方式。我根据https://dominicstpierre.com/using-typescript-to-publish-a-testable-react-npm-package-f3811b3c64e3文章设置了构建过程。

错误 TS2339：属性 'props' 在类型 'TestPage' 上不存在

error TS2339: Property 'props' does not exist on type 'TestPage'

package

npm

typescript

reactjs

webpack-2