如何告诉 TypeScript 我正在处理使用字符串访问对象上不存在的属性的情况?

依维安普林

是 TypeScript 操场中一个可重现的示例,以我的问题为基础。

我收到代码的 TypeScript 错误router[trimmedPath]

错误:(63, 14) TS7053:元素隐式具有“any”类型,因为“string”类型的表达式不能用于索引“Router”类型。在类型“路由器”上找不到带有“字符串”类型参数的索引签名。

trimmedPath来自 HTTP 请求并且可以是任何内容,因此它被输入为字符串。在上面的代码中,我只是调用router[trimmedPath],因为如果trimmedPath不是router对象上的东西,我会处理这种情况。

但是我该如何处理呢?我应该告诉 TS 忽略那条线吗?

杰卡兹

鉴于以下定义:

interface Handlers {
  users: Function,
  notFound: Function,
}

const handlers: Handlers = {
  users: () => {}, 
  notFound: () => {}
}

我可能会创建一个Router带有索引签名接口,以便编译器知道router可能具有string包含其他Function值的任意键控属性为了保持严格的空/未定义安全,此索引签名的值类型应为Function | undefined

interface Router {
  users: Function,
  [otherPossibleKeys: string]: Function | undefined;
}

const router: Router = {
  users: handlers.users
}

然后你可以毫无错误地使用它:

const trimmedPath: string = "somethingcomingfromrequest";

const chosenHandler =
  typeof router[trimmedPath] !== "undefined"
    ? router[trimmedPath]
    : handlers.notFound;

但是有一个皱纹:注意,chosenHandler推断为Function | undefined这是因为即使router[trimmedPath]已经明确检查,使用非文字索引(trimmedPathis of type string)的括号符号访问也不会充当类型保护,因此router[trimmedPath]之后仍被考虑Function | undefined(这个问题被认为是一个错误或设计限制;它很容易修复,但编译器性能会受到影响)。

但是请记住,有一个在运行时工作相同但类型正确的构造:

const definedHandler = router[trimmedPath] || handlers.notFound;

这作品,因为Functiontruthyundefinedfalsy,由于x || y计算结果为x,如果x是truthy和y否则,definedHandler肯定会Function

所以这就是我的建议。希望有所帮助;祝你好运!

代码链接

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何告诉 TypeScript 我的对象的类型?

TypeScript:如何告诉TypeScript我在哪种情况下?

如何告诉 TypeScript 我正在返回输入类型的数组数组?

如何告诉TypeScript我的函数参数是Enum键?

如何使用Lodash中的mapKeys告诉TypeScript什么类型的东西?

如何使用字符串索引访问 TypeScript 中的对象值

Typescript告诉我'string'类型不存在属性'padStart'。为什么?

如何告诉TypeScript我的属性可以是布尔值还是具有特定签名的函数?

如何使用 TypeScript 访问 React State 属性?类型错误时获取属性不存在

如何告诉TypeScript对象[foo]的类型是所有可能的object.prop类型的子集

我如何告诉 TypeScript 引用当前版本的模块中可能可用或不可用的导出是安全的?

使用Typescript时如何停止“ JQuery类型上不存在属性”语法错误?

如何使用jsdom和typescript防止“类型'Global'上不存在属性'...'?

如何在Typescript中使用字符串变量值作为对象中的键名

有人可以告诉我如何禁用@ typescript-eslint / ban-types触发的所有内容吗?

使用 Redux,Typescript 在不同的文件夹中打字到 JS 模块。如何告诉它模块所在的位置?

如何解决打字稿中“对象”类型上不存在的“属性”字符串问题

我如何告诉AngularJS“刷新”

如何告诉Hibernate使用代理?

如何告诉distutils使用gcc?

如何告诉TypeScript在一个传播参数中允许一个列表中的多个字符串仅每个一次?

如何修复TypeScript错误属性'isBoom'在'Boom <any>类型上不存在| ResponseObject'

如何删除 React Typescript 中类型“{}”上不存在的属性“长度”

如何删除TypeScript警告:类型“ {}”上不存在属性“ length”

如何告诉TypeScript订阅函数的结果是x的数组?

如何从 TypeScript 访问对象属性?

Typescript 的“对象”错误类型上不存在属性

TypeScript 中的“字符串”类型不存在属性“查找”

如何解决 TypeScript 编译器错误 TS2339:我的 Angular 5 应用程序中的类型 {} 上不存在属性“errorValue”