[key: string] typescript 为什么传入数字键不报错

Question

function Foo<DataType extends { [key: string]: any }>(name: keyof DataType){
  return name;
}

Foo<{"name":"ss",1:string}>(1); //为什么这段没有报错，我上面设置的key为string

Answer 1

【以下回答由 GPT 生成】

答案:

在 TypeScript 中，keyof 操作符返回的类型是联合类型（string | number | symbol），它表示一个对象的所有可能键的类型。因此，当你将数字 1 作为 name 参数传递给 Foo 函数时，TypeScript 并不会报错。

要实现传入正确的参数类型的类型检查，我们可以使用 TypeScript 中的映射类型来限制 DataType 的键类型为字符串类型。

下面是优化后的代码示例：

type StringKeys<T> = Extract<keyof T, string>;

function Foo<DataType extends { [key: string]: any }>(name: StringKeys<DataType>){
    return name;
}

Foo<{ "name":"ss", 1: string }>(1); // 此时会报错，参数类型不匹配

在上述代码中，我们定义了一个辅助类型 StringKeys<T>，它使用 TypeScript 的 Extract 泛型工具来从 T 的键类型中筛选出字符串类型。然后，在 Foo 函数的参数类型中使用了 StringKeys<DataType> 来限制传递给 name 参数的键类型为字符串类型。

现在，当我们尝试将数字 1 作为参数传递给 Foo 函数时，TypeScript 会捕获到错误，并报告类型不匹配的错误。

【相关推荐】

• 这篇文章讲的很详细，请看：【问题解答】在TypeScript中keyof怎么理解
• 除此之外, 这篇博客: 最优雅解决typescript报错：“元素隐式具有 “any“ 类型，因为类型为 “string“ 的表达式不能用于索引类型”中的 方案三：定义一个string作为key的类型 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^