我使用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>
);
}
}
答案 0 :(得分:0)
最后,我重新设计了包的发布方式。我根据https://dominicstpierre.com/using-typescript-to-publish-a-testable-react-npm-package-f3811b3c64e3文章设置了构建过程。