錯誤TS2339：類型“ TestPage”上不存在屬性“ props”

Question

我在React中使用Typescript抽象類作為布局組件的基類，該基類的用法如下所示：

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模塊中，以在所有應用程序中重復使用（我只是對其進行測試，所以要從本地目錄加載程序包）。 因此，我創建了一個程序包，並使用“ 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>
        );
    }
}

Answer 1

最后，我重新設計了軟件包的發布方式。 我根據https://dominicstpierre.com/using-typescript-to-publish-a-testable-react-npm-package-f3811b3c64e3文章設置了構建過程。