在 Typescript 中扩展 React 抽象组件

如何解决在 Typescript 中扩展 React 抽象组件

我正在用 React 创建一个带有演示文稿的库。每个演示文稿组件必须至少设置一些属性，因此我创建了一个可以扩展以创建演示文稿的打字稿文件：

import React from "react";

abstract class _Presentation<P,S> extends React.Component{
    static title: string
    static description: string
    static date: Date
    static uri: string
}

export type PresentationType = typeof _Presentation

export function Presentation<P,S>(mandatory: {
    title: string
    description: string
    date: Date
    uri: string
}) {
    return class extends _Presentation<P,S> {
        static title = mandatory.title
        static description = mandatory.description
        static date = mandatory.date
        static uri = mandatory.uri
    }
}

当我尝试实现一个演示时，一切都很顺利，我可以像这样创建一个组件：

import React from 'react';

class SomePresentation extends Presentation({
    title: "My presentation's title",description: "My presentation's description",date: new Date(2021,1,22,15,30,0),uri: "/presentation-slug"
}) {

    render = () => (
        <div>
          Test
        </div>
    );
}

export default SomePresentation;

当我开始使用状态时，一切都开始分崩离析。我的摘要的组件类型似乎有些不对劲。我不知道如何使用正确的类型正确地进行这项工作。

import React from 'react';

class SomePresentation extends Presentation<{},{
    width: number,height: number
}>({
    title: "My presentation's title",uri: "/presentation-slug"
}) {

    constructor(props: any) {
        super(props);
        this.state = {width: 0,height: 0}
        this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
    }

    componentDidMount() {
        this.updateWindowDimensions();
        window.addEventListener('resize',this.updateWindowDimensions);
    }

    componentwillUnmount() {
        window.removeEventListener('resize',this.updateWindowDimensions);
    }

    updateWindowDimensions() {
        this.setState({width: window.innerWidth,height: window.innerHeight});
    }

    render = () => (
        <div style={{width: this.state.width,height:this.state.height}}>
           
        </div>
    );
}

export default SomePresentation;

我在使用 this.state.width 的地方收到以下错误：

Property 'width' does not exist on type 'Readonly<{}>'

我已经花了几个小时搜索如何正确使用这里的类型，但我不知所措。谁能为我指明正确的方向？

编辑：为了进一步说明，我使用这些静态变量在我的索引页上加载演示文稿列表。我有一个 index.tsx 可以导出所有演示组件。然后在主页面上我有以下代码：

import * as presentations from './presentations/index'
...
const presentationClasses = Object.values(presentations);
...

{presentationClasses.map((presentation,index) =>
    <Route key={presentation.uri} path={presentation.uri}>
        {React.createElement(presentation)}
    </Route>
)}

解决方法

TypeScript 使用编译器，当编译器生成 JavaScript 时，会删除所有抽象属性。所有类型别名和接口。所以当你有一个包含所有抽象属性的抽象类时，它会变慢，TS 生成空类/函数。所以使用接口，看这个例子：

class A {
    inherited = 1;
}
interface B {
    abstract: string;
}
class C extends A implements B {
    abstract = "Yes,I implement"
}

这个好多了，编译结果：

"use strict";
class A {
    constructor() {
        this.inherited = 1;
    }
}
class C extends A {
    constructor() {
        super(...arguments);
        this.abstract = "Yes,I implement";
    }
}

所以没有空类。我完全推荐这个：

interface _PresentatonBase {
    title: string;
    description: string;
    date: Date;
    uri: string;
}

interface _Presentation<P,S> extends React.ComponentClass<P,S>,_PresentatonBase {}

function Presentation<S,P = {}>(mandatory: _PresentatonBase,state: S): _Presentation<P,S> {
    return class SyntheticPresentation extends React.Component<P,S> {
        state = state;
        static title = mandatory.title;
        static description = mandatory.description;
        static date = mandatory.date;
        static uri = mandatory.uri;
    };
}

class SomePresentation extends Presentation({
    date: new Date(),description: "",title: "",uri: ""
},{
    width: 0,height: 0
}) {
    constructor(props: any) {
        super(props);
        this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
    }

    componentDidMount() {
        this.updateWindowDimensions();
        window.addEventListener('resize',this.updateWindowDimensions);
    }

    componentWillUnmount() {
        window.removeEventListener('resize',this.updateWindowDimensions);
    }

    updateWindowDimensions() {
        this.setState({width: window.innerWidth,height: window.innerHeight});
    }

    render() {
        return <div style={{width: this.state.width,height: this.state.height}}>

        </div>;
    }
}