Question

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

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解构，该解构也以打字稿实现。但是，打字稿将执行额外的检查。其中一项检查是，您无法从未声明该属性的类型中解构。

所以，这将是一个错误：

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

另一部分是您可以将属性分解为其他名称的变量，因此下面，我们从bar中提取foo并放入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?"

但是同样的打字稿限制适用，在这种情况下，bar必须在foo上定义。

这通常是类型检查打字稿所需要的额外层，您无法通过解构或使用.或[]直接访问打字稿所不知道的属性

最后一部分，访问console.log(fizz.faz);将永远无效，fizz不是原始对象，它是foo.bar中的字符串，因此它将没有属性{ {1}}或faz。我认为这是您对源博客的一种误解，我在博客中未发现任何此类主张。

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);

当您尝试访问栏上的“ 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

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

3 个答案: