使用 Typescript 时出现“属性 ... 类型不存在 ...”错误

Question

使用 typescript 编译文件时出现错误：

Property 'qaz' does not exist on type '{ bar: string; }'.

文件中有如下代码：

let foo = {
    bar: "Can you perform a Quirkafleeg?"
}

let { qaz = "I'm feeling manic!" } = foo;
console.log(qaz);
console.log(qaz.bar);

基于页面上的示例代码：“解构对象”部分中的https://zellwk.com/blog/es6/。

我希望得到第二个字符串作为输出，但我有点困惑，因为该页面上还有另一个示例：

let { fizz: faz = "Eugene was my friend." } = foo; // as defined above
console.log(fizz);
console.log(fizz.faz);

这给出了类似的错误：

Property 'fizz' does not exist on type '{ bar: string; }'.

Answer 1

这篇文章是关于 ES 解构的，它也是在 typescript 中实现的。然而，Typescript 将执行额外的检查。其中一项检查是您不能从未声明该属性的类型中解构。

所以，这将是一个错误：

let foo = {
    bar: "Can you perform a Quirkafleeg?"
}

let { qaz = "I'm feeling manic!" } = foo; //err

虽然这会起作用：

let foo = {
    bar: "Can you perform a Quirkafleeg?",
    qaz: undefined
}

let { qaz = "I'm feeling manic!" } = foo; //ok qaz is "I'm feeling manic!" because of the default

或者你可以明确指定类型：

let foo: { bar: string, qaz?: string} = {
    bar: "Can you perform a Quirkafleeg?",
}

let { qaz = "I'm feeling manic!" } = foo; //ok qaz is "I'm feeling manic!" because of the default

另一部分是你可以将一个属性解构为一个不同名称的变量，所以下面，我们从foo中取出bar并放入fizz

let foo = {
    bar: "Can you perform a Quirkafleeg?",
    qaz: undefined
}
let { fizz: bar = "Eugene was my friend." } = foo; // basically same as let fizz = foo.bar || "Eugene was my friend."
console.log(fizz); // "Can you perform a Quirkafleeg?" 

但同样的 typescript 限制也适用，在这种情况下 bar 必须在 foo 上定义。

这通常是 typescript 的额外类型检查层，您无法访问 typescript 不知道的属性，无论是通过解构还是通过. 或 [] 直接访问

最后一部分，访问console.log(fizz.faz);永远不会有效，fizz不是原始对象，它是foo.bar中的字符串，所以它不会有属性faz或bar .我相信这是您对源博客的误解，我在博客中没有发现任何此类声明。

Answer 2

这不是解构对象的工作方式。

基本上它会查看foo 的子属性并为它们分配新变量

必须与foo的属性名称匹配

例如

const Zell = {
  firstName: 'Zell',
  lastName: 'Liew'
}

let { firstName, lastName } = Zell

console.log(firstName) // Zell
console.log(lastName) // Liew

要修复您的示例，您需要这样做

let foo = {
    bar: "Can you perform a Quirkafleeg?"
}

let { bar } = foo;
console.log(bar);

当您尝试访问 bar 上的“qaz”时，它无法访问，因为 bar 是 String

编辑：

在你的例子中展开

let { qaz = "I'm feeling manic!" } = foo; 当您通过= 为qaz 分配一个值时，如果在对象foo 上找不到它，它实际上只是一个默认值。

在你的例子中

let { fizz: faz = "Eugene was my friend." } = foo; 你试图将fizz 分配给foo.faz 的值，如果fizz 在foo 上不存在，它将默认为“Eugene 是我的朋友”。

Answer 3

这是按预期工作的。您正在破坏并为qaz 提供默认参数。它应该可以工作，但似乎 tscompiler 有问题。您可以通过提供 any 类型来修复它，例如

  let foo = { bar: "Can you perform a Quirkafleeg?" }
  let { qaz = "I'm feeling manic!" }: any = foo;
  console.log(qaz); // I'm feeling manic!
  console.log(qaz.bar); // undefined