如何擴展擴展類的接口

Question

我將最新的typescript和reactjs版本一起使用，並且擴展類和擴展接口有問題。

幾表單元素（都具有相同的驗證方法），我創建了一個BaseComponent它看起來像這樣：

/// <reference path="../typings/tsd.d.ts" /> 
import React = require('react'); 

interface P { 
    id: string 
    onChange: Function 
    error: string 
} 

interface S { 
    value: string 
    isValid: boolean 
} 

class BaseComponent extends React.Component<P, S> { 
    protected isValid(value) { 
     //do stuff 
    } 
} 

export default BaseComponent; 

和從BaseComponent延長分量：

/// <reference path="../typings/tsd.d.ts" /> 
import React = require('react'); 
import BaseComponent from './baseComponent'; 

interface P { 
    id: string 
    onChange: Function 
    error: string 
    required?: boolean 
} 

interface S { 
    value: string 
    isValid: boolean 
    somethingNew: string 
} 

class NameFieldContainer extends BaseComponent { 
    constructor(props: any) { 
     super(props); 

     this.state = { 
      value: '', 
      isValid: false, 
      somethingNew: 'Foo' 
     }; 

     this.aMethod(); 
    } 

    protected aMethod() { 
     this.setState({somethingNew: 'Bar'}); 
    } 

    public render() { 
     const somethingNew = this.state.somethingNew; 
     return (
      <div>{somethingNew}</div> 
     ); 
} 

export default NameFieldContainer; 

現在我的編譯器（和IDE）顯示了新的state.somethingNew和props.required屬性的一些問題。我不知道如何擴展它。我如何教BaseComponent他必須使用NameFieldContainer中的接口？

Answer 1

您可以使用Intersection Type來擴展道具和狀態的現有接口。你BaseContainer是這樣

class BaseContainer<PP, SS> extends React.Component<P & PP, S & SS> { 

} 

和你的那個具體實施你會使用

interface PExtended { 
    id: string 
    onChange: Function 
    error: string 
    required?: boolean 
} 

interface SExtended { 
    value: string 
    isValid: boolean 
    somethingNew: string 
} 

class NameFieldContainer extends BaseContainer<PExtended, SExtended> {...} 

你還必須記住，如果狀態字段是不可選的（由宣稱它作爲value?:string）你必須將它們設置爲setState({})。