오류 'TS2339 :' 'Testps'속성에 'props'속성이 없습니다.

Question

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 모듈로 옮겨 모든 응용 프로그램에서 재사용 할 수있게되었습니다. (로컬 디렉토리에서 패키지를로드하므로 테스트하고 있습니다). 그래서 패키지를 만들었고 "tsc -d -p ./"를 사용하여 typecript 코드를 js와 정의 파일로 옮겼습니다. 이 파일들은 패키지의 dist 디렉토리에 저장됩니다. 그런 다음 프로젝트 디렉토리에서 패키지를 업데이트했습니다. 내 프로젝트에서이 클래스를 사용하려고 할 때, 나는 PageLayoutNoSidebar이 페이지 레이아웃을 연장하지 않을 때 (내가 직접 PageLayoutNoSidebar로 페이지 레이아웃에서 모든 코드를 복사 한 것으로 파악

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

있어 그 후

,),이 문제는 사라지므로 수출에 약간의 문제가 있다고 생각합니다.

코드에 어떤 문제가있을 수 있습니까? 내가 패키지를 게시하는 방법 방법을 재

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 문서에 따라 빌드 프로세스를 설정했다.