属性 x 在类型 'object' 上不存在

Question

我有这样的界面：

export interface IData {
  mappings: object
}

映射对象是这样的：

    mappings = {
    "car": ["benz","toyota","ford"],
    "bike" : ["enfield", "pulsar"]
    }

现在，我的代码中有一个 formik 表单，我在其中一个表单字段的 onChange 方法中调用函数 getOptions(value)。 getOptions函数是这样的：

    const getOptions = (value: string | number | boolean | (string | number | boolean)[] | undefined) => {
            console.log("value", value)
            console.log(contextOptionMappings.car) //error here
           console.log(contextOptionMappings.value) //error here
        }

我实际上想做的是：如果值是“汽车”，那么我想打印

 ["benz","toyota","ford"]

但是，当我尝试打印 contextOptionMappings.car 时，因为车钥匙已经存在于映射对象中，我收到错误消息，因为属性 'car' 在类型 [=38= 上不存在].

我也试过了

console.log(contextOptionMappings[value])

但这给出了错误

Type '(string | number | boolean)[]' cannot be used as an index type.ts(2538)
Type 'false' cannot be used as an index type.ts(2538)
Type 'true' cannot be used as an index type.ts(2538)
Type 'undefined' cannot be used as an index type

如果我将类型更改为任意类型，如下所示：

const getOptions = (value: any) 

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{}'

如何获取值？

Answer 1

这是一个非常小的修复。

变化

export interface IData {
  mappings: object
}

至

export interface IData {
  mappings: any
}

完成了工作

Answer 2

错误表明您不能使用类型 '(string | number | boolean)[]' 来索引键为类型 string | symbol 的对象。让我们通过此问题的一些修复。

// we should begin by defining your interface more explicitly like so
export interface IData {
  mappings: { 
    car: Array<string>;
    bike: Array<string>;
  };
}

// you have the data which has keys of type string, and an array as the value
mappings = {
  "car": ["benz","toyota","ford"],
  "bike" : ["enfield", "pulsar"]
}

// you then have a function defined which accesses this data
const getOptions = (value: keyof IData['mappings']) => {
  // now the value has to be a key of the IData mapping interface that you
  // have defined i.e. 'car' | 'bike'
  return contextOptionMappings[value];
}

更新：如果您想将对象表示为可以有任何数字的东西键然后你可以这样做一个：

export interface IDate {
  // using a record
  mappings: Record<string, Array<string>>,
  // or using an idiomatic definition
  // mappings: { [key: string]: Array<string> }
};

这仍然有效，但您失去了更明确的输入。

如果您想要更明确的方法来解决您的问题，更多地使用 typescript 提供的类型，我会发布这个答案。

如果您的界面比您提供的数据更多变，您仍然可以明确容纳案例。

属性 x 在类型 'object' 上不存在

Property x does not exist on type 'object'

typescript

react-typescript