打字稿 不安全使用类型为 'any' 错误的表达式



我是TypeScript的新手,我描述我的场景如下:

我有这样的类型:

type response = {
totalQuantity: number;
numberOfCatogory: number
appleQuantity: number;
bananaQuantity: number;
pearQuantity: number;
};

每个水果数量都有验证,在本例中是 appleQuantity、bananaQuantity 和 pearQuantity,这意味着我需要从响应中获取每个单独的水果数量。

所以我创建了一个字符串数组来保存单个属性键,如下所示:
const individualParameters: string[] = ["appleQuantity", "bananaQuantity", "pearQuantity"]

函数逻辑如下:

for (const individualParameter of individualParameters) {
let individualQuantity = response[individualParameter];
...
}

但是当我构建时,TSLint 在response[individualParameter]

Unsafe use of expression of type 'any'

我认为这是因为响应无法从字符串数组元素中识别类型?
我是 TypeScript 的新手,并且对解决此问题的好方法感到好奇。

所以我想大多数人已经解释了发生了什么,我认为到目前为止我个人最喜欢的答案是约塞里安船长的回答。他很好地解释了这个问题:

因此,打字稿使用 response[individualParameter] 拒绝,因为 response 是具有严格键的类型,而 individualParameter 可能是任何字符串。

但是,通过告诉 Typescript 您正在定义一个包含字符串的数组,这些字符串也是您尝试访问的类型的键,可以轻松解决此问题:

type response = {
totalQuantity: number;
numberOfCatogory: number
appleQuantity: number;
bananaQuantity: number;
pearQuantity: number;
};
// this should be your non-null and defined object in reality
let response: response;
// just this one line below was altered
const individualParameters: (keyof response)[] = ["appleQuantity", "bananaQuantity", "pearQuantity"];
for (const individualParameter of individualParameters) {
let individualQuantity = response[individualParameter];
}

类型(keyof response)[]意味着您将始终拥有一个仅包含response类型的键的数组。在我的示例中,此声明是多余的,因为编译器已经可以推断出您定义的所有属性都是该类型的键,但是例如,当 for 循环位于函数中时,情况就不同了。我假设你就是这种情况,否则你不会在第一种情况下问这个问题。

@captain-约塞里安是对的;根据 TS 约定,类型大写。

问题出在这一行:const individualParameters:string[] = ["appleQuantity", "bananaQuantity", "pearQuantity"]

根据individualParameters的类型定义,每个元素都是一个string。这意味着即使是这个"foo"字符串也可以分配给类型string

因此,打字稿拒绝使用response[individualParameter],因为response是具有严格键的类型,而individualParameter可能是任何字符串。

为了使它工作,您可以使用const assertion

type response = {
totalQuantity: number;
numberOfCatogory: number
appleQuantity: number;
bananaQuantity: number;
pearQuantity: number;
};
const individualParameters = ["appleQuantity", "bananaQuantity", "pearQuantity"] as const
declare const response: response;
for (const individualParameter of individualParameters) {
let individualQuantity = response[individualParameter]; // ok
}

如果您不喜欢as const方法,可以使用额外的功能:

type response = {
totalQuantity: number;
numberOfCatogory: number
appleQuantity: number;
bananaQuantity: number;
pearQuantity: number;
};

declare const response: response;
const iterator = <
Obj extends Record<string, number>,
Keys extends Array<keyof Obj>
>(record: Obj, keys: Keys) => {
for (const individualParameter of keys) {
let individualQuantity = record[individualParameter];
}
}
iterator(response, ['foo']) // expected error
// works only with literal array
iterator(response, ["appleQuantity", "bananaQuantity", "pearQuantity"]) // ok

操场

Obj- 表示response参数,Keys- 确保第二个数组参数由有效的Obj键组成

附言根据 TS 约定,类型应大写。

您需要使响应可索引。可以在此处找到有关此内容的更多信息。

在您的情况下,可以使用如下接口来完成:

interface IResponse {
[key: string]: number;  // <- This line makes your interface indexable
totalQuantity: number;
numberOfCatogory: number
appleQuantity: number;
bananaQuantity: number;
pearQuantity: number;
}

现在,您只需要确保您的响应实现了 IResponse 接口:

const response: IResponse = {
totalQuantity: 1,
numberOfCatogory: 2,
appleQuantity: 3,
bananaQuantity: 4,
pearQuantity: 5
}

在此之后,您可以使用字符串数组来获取单个水果数量,如下所示:

const individualParameters: string[] = ["appleQuantity", "bananaQuantity", "pearQuantity"];
for (let individualParameter of individualParameters) {
console.log(response[individualParameter]);
}
// Output:
// 3
// 4
// 5

一种简单的方法是,您可以选择将类型的键设置为字符串变量

type response  = {
[key: string]: number;
};

但如果你真的要修复关键是苹果数量,香蕉数量,blablabla 您可以试用映射类型,单击此链接了解更多详情 https://www.typescriptlang.org/docs/handbook/2/mapped-types.html

相关内容

最新更新