3
votes

Erreur "La propriété ... n'existe pas sur le type ..." lors de l'utilisation de tsc

J'obtiens l'erreur lors de la compilation d'un fichier avec tsc:

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

Avec le code suivant dans le fichier:

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

Basé sur exemple de code sur la page: https://zellwk.com/blog/es6/ dans la section "Destructuration des objets".

Je m'attendais à obtenir la deuxième chaîne en sortie, mais je suis un peu confus car il y a un autre exemple sur cette page du type:

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

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

Ce qui donne une erreur similaire:

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

javascript typescript tsc

2 commentaires

developer.mozilla.org/en-US/ docs / Web / JavaScript / Reference /…

Ce lien est beaucoup plus clair / de meilleure qualité, merci.

3 Réponses :

1
votes

Ce n'est pas comme ça que les objets de destruction fonctionnent.

Essentiellement, il examinera les propriétés enfants de foo et leur assignera une nouvelle variable

Cela doit correspondre aux noms de propriété de foo

Par exemple

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

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

pour corriger votre exemple, vous devrez faire

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

let { firstName, lastName } = Zell

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

Quand vous essayez d'accéder à 'qaz' sur la barre, ce n'est pas possible car bar est une String

EDIT:

exemple

let {qaz = "Je me sens maniaque!" } = foo; Lorsque vous attribuez une valeur à qaz via = , il ne s'agit en fait que d'une valeur par défaut si elle n'est pas trouvée sur l'objet foo.

Dans votre exemple

let {fizz: faz = "Eugene était mon ami." } = foo; vous essayez d'attribuer fizz à la valeur de foo.faz et si fizz n'existe pas sur toto il sera par défaut "Eugene était mon ami."

3 commentaires

Ça fonctionne bien. Le compilateur Typescript a un problème avec les paramètres par défaut inconnus.

@ MuratKaragöz qui lui lance n'importe quel ne ressemble pas au comportement qu'il recherche. L'exemple sous-jacent concerne l'accès à qaz.bar qui ne serait jamais valide. Il essaie d'obtenir bar et pour ce faire, il doit soit utiliser un alias via let {qaz: bar = "text"} = foo ou simplement utiliser let {bar = "text"} = toto

Ah oui, donc ça marche en Javascript mais pas en Typescript. Cela explique pourquoi c'est sur cette page, qui parle de Javascript.

0
votes

Cela fonctionne comme prévu. Vous êtes en train de détruire et de fournir un paramètre par défaut à qaz . Cela devrait fonctionner, mais il semble que le tscompiler ait un problème avec cela. Vous pouvez le corriger en fournissant le type any , par exemple

  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

0 commentaires

2
votes

L'article traite de la déstructuration ES, qui est également implémentée en typographie. Typescript effectuera cependant des vérifications supplémentaires. L'une de ces vérifications est que vous ne pouvez pas déstructurer à partir d'un type qui ne déclare pas la propriété.

Donc, ce sera une erreur:

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?"

Bien que cela work:

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

Ou vous pouvez spécifier le type explicitement:

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

L'autre partie est que vous pouvez déstructurer une propriété pour une variable d'un nom différent, donc ci-dessous, nous prenons bar de foo et mettons fizz

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

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

6 commentaires

Corrigez-moi si je me trompe mais laissez {qaz = "Je me sens maniaque!" } = toto; // err ne doit pas générer d'erreur via tscomplier. Son msg d'erreur est d'essayer d'accéder à une propriété sur string qui n'existe pas

@Andrei il mentionne l'erreur comme étant La propriété 'qaz' n'existe pas sur le type '{bar: string; } '. qui est à 100% une erreur du compilateur TS.

qui devrait être lancé sur console.log (qaz.bar); ou est-ce que ts est assez intelligent pour l'attraper plus tôt? s'il n'a pas utilisé console.log (qaz.bar); l'erreur apparaîtra-t-elle toujours?

@Andrei l'erreur se produit lors de la déstructuration et non sur le console.log, les avantages de l'utilisation de TS, des erreurs cohérentes lorsque vous faites de mauvaises choses :): C'est une beauté que je n'ai eu que quelques chances d'utiliser Typescript pour de petits projets personnels, je ne savais pas qu'il ferait ce type d'analyse statique.

Une autre chose à mentionner est que si vous utilisez des interfaces, vous pouvez ajouter [key: string]: any; . Vous pouvez , cela ne veut pas dire que vous devriez.