Rodzaje destrukturyzacji obiektów

124

To

const { foo: IFoo[] } = bar;

i to

const { foo: Array<IFoo> } = bar;

spowoduje błąd.

I to

const { foo: TFoo } = bar;

po prostu zniszczy TFoowłasność.

W jaki sposób można określić typy dla właściwości zniszczonych obiektów?

typescript destructuring Estus Flask
źródło
Dobre pytanie, ale czy i tak nie będzie w stanie wywnioskować typu z definicji bar?
2
To jest pokryta dość dobrze tutaj .
Komentarz @ user663031 powinien zostać usunięty, ponieważ wprowadza w błąd.
Sasuke Uchiha
@SasukeUchiha Artykuł jest niedostępny, ale większość artykułów można przeszukać według tytułu artykułu. Został przeniesiony na mariusschulz.com/blog/… . Rzeczywiście rzuca trochę światła.
Estus Flask
To jest pomocne. Dziękuję Ci.
Sasuke Uchiha

Odpowiedzi:

192

Okazuje się, że można określić typ po :dla całego wzoru destrukturyzacji:

const {foo}: {foo: IFoo[]} = bar;

Co w rzeczywistości nie jest lepsze niż zwykły stary

const foo: IFoo[] = bar.foo;
artem
źródło
2
Ale {foo}nie jest wartością. Jest to tak zwany „dekonstruujący wzorzec przypisania”. To, co tu widzisz, jest w rzeczywistości specjalną funkcją TypeScript, która umożliwia skojarzenie typów z takimi wzorcami.
Rzeczywiście, jest to bardziej jak specjalny przypadek, zwłaszcza w porównaniu do let x, y, z: stringktórego najwyraźniej określa ztylko typ . Zaktualizowałem odpowiedź.
artem
55

Wyraźnie spóźniłem się na imprezę, ale:

interface User {
  name: string;
  age: number;
}

const obj: any = { name: 'Johnny', age: 25 };
const { name, age }: User = obj;

Rodzaje właściwości namei agepowinny być prawidłowo wywnioskowane stringi numberodpowiednio.

Stephen Paul
źródło
9
To rzadki przypadek, kiedy chciałbyś użyć interfejsu do każdego zniszczenia.
RA.
2

Kontynuacja mojego własnego pytania.

Typów nie trzeba określać we właściwościach obiektu, ponieważ są one wywnioskowane na podstawie zniszczonego obiektu.

Biorąc pod uwagę, że barzostał wpisany poprawnie, foozostanie wywnioskowany typ:

const bar = { foo: [fooValue], ... }; // bar type is { foo: IFoo[], ... }
...
const { foo } = bar; // foo type is IFoo[]

Nawet jeśli barnie został poprawnie wpisany ( anylub unknown), jego typ można potwierdzić:

const { foo } = bar as { foo: IFoo[] }; // foo type is IFoo[]
Estus Flask
źródło