Question

我认为我对Javascript和React很满意，但目前正在通过打字稿学习曲线。我的反应状态定义为：

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

我希望能够将它用作以下（字典）：

   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});
    }

我如何根据Typescript表示我的州？我正在尝试类似的事情：

interface IFields {
    name: string
}

interface IOrderEntryState {
    fields: IFields,
    fieldErrors: IFields
}

请原谅，如果我的问题听起来是文盲，那就完全是新的了。感谢

Answer 1

根据您的代码段，看起来fields[name]正在为该对象分配任意键。因此，您可能希望使用index signature代替现在的硬编码密钥name。

所以你的界面看起来应该更像这样：

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
}

Answer 2

如果您想要字典，可以使用generic type使用index property声明字典。它看起来像这样：

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

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

这使得IOrderEntryState.fields具有带字符串值的任意字符串属性名称。

如何将状态对象表示为打字稿界面

2 个答案: