如何擴展了打字稿陣營類

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。