错误TS2339:财产'道具'在类型' TestPage'上不存在

时间:2017-05-24 08:24:21

标签: reactjs typescript npm package webpack-2

我使用typescript抽象类作为React中我的布局组件的基类,该基类的用法如下所示:

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的类,它是我的应用程序中所有布局的基类。当一切都在一个项目中时,它就可以工作。

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

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

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

我发现当PageLayoutNoSidebar没有扩展PageLayout(我将所有代码从PageLayout直接复制到PageLayoutNoSidebar中)时,这个问题就消失了,所以我猜出口有问题。

你知道代码有什么问题吗?

这就是这些类的代码的样子:

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>
        );
    }
}

1 个答案:

答案 0 :(得分:0)

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