如何扩展了打字稿阵营类

Question

下面是一个简单的例子：

interface BaseProps { 
    name: string; 
} 

class BaseClass<P extends BaseProps> extends React.Component<P, void> { 

} 

interface SuperProps { 

} 

class SuperClass extends BaseClass<SuperProps> { 

} 

我期待的是父类默认情况下将有this.props.name。但现在，我得到编译错误，说Type 'SuperProps' does not satisfy the constraint 'BaseProps'.Property 'name' is missing in type 'SuperProps'.

我做错了什么？我意识到我可以做SuperProps extends BaseProps但在这里看起来多余。

Answer 1

class BaseClass<P extends BaseProps> extends React.Component<P, void> 

其中<P extends BaseProps>指延伸BaseProps是分配给任何BaseClass有效的类型。这就是泛型的工作原理。

现在，当你做

interface SuperProps { 

} 

class SuperClass extends BaseClass<SuperProps> { 

} 

您分配不延长BaseProps类型SuperProps。这就是你得到错误的原因。

为了克服这个错误，正如你所说的，你需要扩展接口BaseProps或者你可以使用交集类型。如果您使用的交集类型，则完整的例子看起来像：

export interface BaseProps { 
    name: string; 
} 

class BaseClass<P> extends React.Component<P & BaseProps, void> { 

} 

interface SuperProps { 

} 

class SuperClass extends BaseClass<SuperProps> { 
    render(): JSX.Element { 
     return (
      <div> 
       {this.props.name} {/* Won't throw an error*/} 
      </div> 
     ); 
    } 
} 

你可以阅读更多有关高级类型here。