Wie React.Component Schnittstelle mit einer „direkten“ Eigenschaft verlängern?

Question

In einem Code wie dieser:

interface Props extends React.HTMLAttributes { 
    // ... 
} 

interface State { 
    // ... 
} 

interface TextFieldComponent { 
    field: HTMLInputElement | HTMLTextAreaElement 
} 

export default class TextField extends React.Component<Props, State> { 
    render() { 
    const fieldProps = Object.assign({ 
     ref: (element: HTMLInputElement | HTMLTextAreaElement) => this.field = element 
    }, fieldOtherProps) 

    return <input {...fieldProps} /> 
    } 
} 

Ich mag wäre in der Lage sein, die field Eigenschaft direkt auf meiner Komponente zu schaffen, da es keinen Sinn, es in dem Staat zu haben macht. Vorerst ich diesen Fehler offensichtlich habe:

182  ref: (element: HTMLInputElement | HTMLTextAreaElement) => this.field = element 

text-field/index.tsx(182,70): error TS2339: Property 'field' does not exist on type 'TextField'. 

Ich glaube, ich brauche eine neue Schnittstelle (TextFieldComponent) zu schaffen und einen Weg erstreckt sich über das React.Component eines mit ihm zu finden, aber ich habe keine Ahnung wie.

Answer 1

In der Tat fand ich es, war es ganz einfach. Ich hatte gerade die Klasse Eigenschaft mit der Typoskript Art und Weise zu erklären:

export default class TextField extends React.Component<Props, State> { 
    private field: HTMLInputElement | HTMLTextAreaElement 

    render() { 
    const fieldProps = Object.assign({ 
     ref: (element: HTMLInputElement | HTMLTextAreaElement) => this.field = element 
    }, fieldOtherProps) 

    return <input {...fieldProps} /> 
    } 
}