Ошибка "Свойство ... не существует для типа ..." при использовании tsc

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

Статья о деструктуризации ЭС, которая также реализована в машинописи.Однако 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

Другая часть - вы можете деструктурировать свойство к переменной с другим именем, поэтому ниже мы берем 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, поэтому она не будет иметь свойства 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);

Когда вы пытаетесь получить доступ к 'qaz' на панели, это невозможно, поскольку bar является String

EDIT:

Расширить в вашем примере

let { qaz = "I'm feeling manic!" } = foo; Когда вы присваиваете qaz значение через =, на самом деле это просто значение по умолчанию, если оно не найдено в объекте foo.

В вашем примере

let { fizz: faz = "Eugene was my friend." } = foo; вы пытаетесь присвоить fizz значению foo.faz, и если fizz не существует в foo, то по умолчанию будет "Евгений был моим другом".

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