Question

我正在创建一个将来会扩展的组件，为此我需要使其更通用。

我有一个类似下面的要求。

我有一个Base类，可以接受'cell'和'phone'类型的属性。

我想在NewBase类中扩展它并支持新属性newType。

我得到的错误是

[ts]由于类型为“ cell” |条件，因此此条件将始终返回“ false”。 “ phone””和“ 0”没有重叠。

我没有足够的想法来扩展接口以支持新课程请帮助...

export interface IBaseType {
    type: 'cell' | 'phone' 
} 
export class Base extends React.Component<IBaseType > {
    public render() {
        const { name, type } = this.props;
        return (() => {
            switch (type) {
                case 'cell': return <h1>Cell</h1>
                case 'phone': return <h1>Phone</h1>
            }
        })()
    } 
}

interface NewType extends Omit<IBaseType, 'type'>  {
    type: 'newType' | IBaseType['type']
 }

class NewBase extends Base {
    constructor(props: NewType){}
    public render(){
       if(this.props.type === 'newType') {
          return <h1>Hi i am new type</h1>
       }
       return super.render();
    }
}

Answer 1

this.props的类型由您传递给React.Component的props type参数确定。在NewBase extends Base和Base extends React.Component<IBaseType>的情况下，this.props的类型仍然是IBaseType，这说明了错误。如果您希望能够定义具有不同道具类型的Base的子类，则需要为道具类型向Base添加一个类型参数。这样的事情可能对您有用：

interface ICommonType {
    type: string;
}
export interface IBaseType {
    type: 'cell' | 'phone' 
} 
export class Base<P extends ICommonType = IBaseType> extends React.Component<P> {
    public render() {
        const { name, type } = this.props;
        return (() => {
            switch (type) {
                case 'cell': return <h1>Cell</h1>
                case 'phone': return <h1>Phone</h1>
            }
        })()
    } 
}

interface NewType extends Omit<IBaseType, 'type'>  {
    type: 'newType' | IBaseType['type']
 }

class NewBase extends Base<NewType> {
    public render(){
       if(this.props.type === 'newType') {
          return <h1>Hi i am new type</h1>
       }
       return super.render();
    }
}

React + Typescript继承和扩展属性

1 个答案: