在 TS 中解构对象答案

【问题标题】：Destructuring an object in TS在 TS 中解构对象
【发布时间】：2019-10-18 13:58:31
【问题描述】：

我有这个 TS 代码，我想让这部分也被输入：

    const { data: { person, car, another } }: any = useContext(MyContext);

这里的问题是 ES lint 说： warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any

我为人、汽车和另一个创建了 3 个接口，我想在 useContext 之后重用它们。我的目标是分享人、车、另一个

有什么线索吗？

【问题讨论】：

typeof MyContext 而不是 any 浮现在脑海中......虽然如果 MyContext 已经有一个类型，完全省略 : any 可能足以为 person 提供严格的类型，@ 987654328@，和another。

【解决方案1】：

类型注释不能放置在解构操作中，: 字符已经在那里用作将被解构的属性分配给新名称的一种方式。

const { person: p2 } = { person: "Name" }
p2 === "Name" // true

您可以将 any 替换为您期望的 useContext 的类型。

const { data: { person, car, another } }: { data: { person: Person, car: Car, another: Another } }
  = useContext(MyContext);

但理想情况下，useContext 的返回类型应该从传递给它的参数中推断出来，当您创建上下文时，您应该有如下一行：

type ContextType = {data: {person: Person, car: Car, another: Another}}
const MyContext = createContext<ContextType>({/* default value */})

当您随后使用useContext 时，返回的值将已经具有ContextType，并且您的解构将被键入而无需任何类型注释。

【讨论】：