TypeScript泛型类注解实现带公共Props的多级类继承咨询

代码中泛型参数未参与父类Props类型的传递链路，继承父类时直接将泛型参数硬编码为固定接口，导致类型在中间层被锁死：

• Button<T1> extends Component<IButtonProps> 直接给基类Component传入固定类型IButtonProps，类上定义的泛型T1完全没有关联到props属性的类型，this.props在Button层就被固定为IButtonProps
• 后续子类继承时无论传入什么类型，都无法修改已经被父类锁死的props类型，自然无法识别ISpecialButtonProps上独有的special字段。

多级类属性泛型透传的能力完全支持，核心规则是：每一层的泛型参数需约束为当前层Props的子类型，且将泛型参数作为实参传入父类泛型，禁止在继承时硬编码固定接口。
修正后可正常运行的代码：

interface IProps {
    parent?: any
}

// 基类泛型约束为IProps的子类型，设置默认类型简化使用
class Component<T extends IProps = IProps> {
    protected props: T;
    constructor(props: T) {
        this.props = props;
    }
}

interface IButtonProps extends IProps {
    caption?: string
}

// Button层泛型约束为IButtonProps子类型，透传给基类Component
class Button<T extends IButtonProps = IButtonProps> extends Component<T> {
    constructor(props: T) {
        super(props);
    }
    test(): void {
        console.log(this.props.parent);
        console.log(this.props.caption);
    }
}

interface ISpecialButtonProps extends IButtonProps {
    special?: string
}

// SpecialButton层泛型约束为ISpecialButtonProps子类型，透传给父类Button
class SpecialButton<T extends ISpecialButtonProps = ISpecialButtonProps> extends Button<T> {
    constructor(props: T) {
        super(props);
    }
    test(): void {
        console.log(this.props.caption);
        // 此处可正常识别special属性，无类型报错
        console.log(this.props.special);
    }
}

// 实例化时自动推导传入参数的类型，不会丢失属性
const button1 = new SpecialButton({caption: 'x', special: 'y'});
button1.test();

• 该写法支持任意深度的组件继承，只要每一层都遵循「泛型加当前层Props约束 + 泛型透传给父类」的规则，就不会出现属性类型丢失的问题
• 给每层泛型设置默认类型后，不需要手动传入泛型参数即可获得当前层默认的Props类型，同时也支持传入自定义的子Props类型做扩展
• 泛型参数不要定义成无约束的孤立参数，必须和类内部的属性、父类泛型做关联，否则会出现泛型定义了但完全不生效的问题

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