Как расширить интерфейс React.Component с «прямым» свойством?

Question

В коде, как этот:

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} /> 
    } 
} 

Я хотел бы быть в состоянии создать field свойства непосредственно на моем компоненте, поскольку она не имеет никакого смысла иметь его в государстве. На данный момент, я, очевидно, эта ошибка:

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

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

Я думаю, мне нужно создать новый интерфейс (TextFieldComponent) и найти способ расширяет React.Component один с ним, но я понятия не имею, как это сделать.

Answer 1

На самом деле я нашел его, это было довольно просто. Я просто должен был объявить свойство класса с помощью типа «Тип»:

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} /> 
    } 
}