reactjs - cách biểu diễn đối tượng state dưới dạng interface trong Typescript

Tôi nghĩ rằng tôi thoải mái với Javascript và React, nhưng hiện tại đang gặp khó khăn với đường cong học TypeScript. Tôi đã định nghĩa state của React của mình như sau:

state = {
    fields: { // list of fields
        symbol: '',
        qty: '',
        side: ''
    },
    fieldErrors: {}
};

Tôi muốn có thể sử dụng nó như sau (từ điển):

   onInputChange = (name :string, value :string, error :string) => {
        const fields = this.state.fields;
        const fieldErrors = this.state.fieldErrors;
        fields[name] = value;
        fieldErrors[name] = error;
        this.setState({fields, fieldErrors});
    }

Làm thế nào để tôi biểu diễn trạng thái của mình bằng Typescript? Tôi đang thử một cái gì đó như:

interface IFields {
    name: string
}

interface IOrderEntryState {
    fields: IFields,
    fieldErrors: IFields
}

Xin lỗi nếu câu hỏi của tôi nghe có vẻ ngu dốt, tôi hoàn toàn mới về chuyện này. Cảm ơn

Câu trả lời #1

Dựa trên đoạn mã của bạn, có vẻ như fields[name] đang gán một khóa tùy ý cho đối tượng đó. Vì vậy, bạn có thể muốn sử dụng một chữ ký chỉ số để đại diện cho điều đó thay vì khóa cứng name như hiện tại.

Vì vậy, giao diện của bạn có lẽ nên trông giống như thế này:

interface IFields {
    // This is an index signature. It means this object can hold
    // a key of any name, and they can be accessed and set using
    // bracket notation: `this.state.fields["somekey"]`
    [name: string]: string
}

interface IOrderEntryState {
    fields: IFields,
    fieldErrors: IFields
}

Câu trả lời #2

Nếu bạn muốn một từ điển, bạn có thể khai báo một từ điển sử dụng kiểu tổng quát với thuộc tính chỉ mục. Nó sẽ trông như sau:

interface Dictionary<TKey, TVal> {
    [key: TKey]: TVal;
}

interface IOrderEntryState {
    fields: Dictionary<string, string>,
    fieldErrors: Dictionary<string, string>
}

Điều này khiến IOrderEntryState.fields có các tên thuộc tính chuỗi tùy ý với giá trị là chuỗi.