React抽象泛型类继承时state类型不匹配报错该如何解决？

• 基类继承React.Component时，未将自定义泛型P、S与内置的AbCarProps、AbCarState合并传入组件泛型参数，导致子类传入的自定义字段无法被组件类型系统识别
• 未对泛型添加合法约束，TS无法确认基类中修改moving字段的操作是否和子类传入的S泛型中同名字段类型兼容，因此抛出类型不匹配错误

import React from "react";
import { render } from "react-dom";

// 基类内置Props定义
interface AbCarProps {
    color: string;
}
// 基类内置State定义
interface AbCarState {
    moving: string;
}

// 泛型添加默认值，基类支持无自定义Props/State直接继承
abstract class Car<P extends {} = {}, S extends {} = {}> extends React.Component<AbCarProps & P, AbCarState & S> {
    constructor(props: AbCarProps & P) {
        super(props);
        // 类型断言告知TS当前初始化的基类State是合法的
        this.state = {
            moving: "no"
        } as AbCarState & S;
    }

    // 基类公共方法
    move = () => {
        // 类型断言告知TS修改的moving字段属于基类State的合法字段
        this.setState({ moving: "yes" } as Partial<AbCarState & S>);
    }
}

// 子类自定义Props
interface MyCarProps {
    tires: number;
}
// 子类自定义State
interface MyCarState {
    movingFast: string;
}

class MyCar extends Car<MyCarProps, MyCarState> {
    // 子类合并基类State+自定义State初始化
    state = {
        moving: "yes",
        movingFast: "no"
    };

    render() {
        return (
            <div>
                <div>movingFast : {this.state.movingFast}</div>
                <div>tires : {this.props.tires}</div>
                <div>color : {this.props.color}</div>
                <div>moving : {this.state.moving}</div>
                <button onClick={this.move}>启动车辆</button>
            </div>
        );
    }
}

render(
    <MyCar tires={3} color={"red"} />,
    document.getElementById("root")
);

• 基类泛型P、S添加了默认空对象约束，支持不传自定义Props/State直接继承使用
• 通过类型断言解决基类初始化State、修改State时的类型兼容问题，同时保证子类中自定义的Props、State字段可以被正确推导和类型校验
• 基类内置的Props、State字段和子类自定义的字段完全隔离，不会互相覆盖，满足扩展需求

内容的提问来源于stack exchange，提问作者mhan