• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Typescript pozwala zadeklarować typ nie pozwala odczytać właściwości, podczas odczytania undefined.

VPS Starter Arubacloud
0 głosów
215 wizyt
pytanie zadane 20 listopada 2020 w JavaScript przez Mariusz Podgórski Początkujący (400 p.)

Witam, 

pracuje nad projektem react, redux, typescript.

Struktura danych pobieranych z bazy wygląda następująco 

   [{ name: 'mariusz',
    postcode: '09-100',
    city: 'Płońsk',
    street: 'Kopernika',
    email: 'many185@wp.pl',
    products: [{
        name: 'pomidor',
        price: 60,
        capacity: 100,

    }]
}]

czyli tablica obiektów i w tym obiekcie jest jeszcze jedna tablica z obiektami produktami (pobieram użytkownika który sprzedaje jakieś produkty) w typescript typowałem to tak

export interface Product {
    name: string,
    price: number,
    capacity: number,
}

export type ProductsArr = {
    [index: string]: Product
}


export interface Seller {
    name: string,
    postcode: string,
    city: string,
    street: string,
    email: string,
    products: ProductsArr[],

}

export type SellersArr = {
    [index: string]: Seller

}

Jak na razie, wszystko gra i buczy, nawet w consol.log('wszystko jest OK'); aż tu nagle, kiedy przychodzi do odczytywania właściwości, zagnieżdżonej tablicy z obiektami, wartość undefined. Mało tego edytor podpowiada mi w pętli, że właściwość np. price w obiekcie products jest wyżej czyli - jakbym się chciał dostać to SellersArr[0].products[0].products[0].price  kiedy skracam to do SellersArr[0].products[0].price edytor mi wywala błąd pomimo, że w konsoli jest wszystko ok: (tablica obiektów products jest. Pokazuje, że to jest tablica.) Inne dane położone wyżej czyli (email, city) itd. działają bez problemów tylko z tym zagnieżdżeniem jest problem. 

Mógłbym rozebrać dane, po pobraniu na elementy pierwsze ale przesyłanie danych 2 razy i pisanie nadprogramowego kodu wydaje mi się nieeleganckie(one idą do tego samego komponentu).Później i tak muszę je rozebrać ale chciałbym znać odpowiedź, co robię nie tak ?!

Z góry dziękuję ;-}

1 odpowiedź

+2 głosów
odpowiedź 20 listopada 2020 przez rafal.budzis Szeryf (85,260 p.)

Console logi wykoduje JavaScript, a TypeScript służy do sprawdzania kodu przy kompilacji przed uruchomieniem. Type Script nie sprawdza czy obiekt jest takiego typu jaki stworzyłeś, on zakłada że tak jest. Więc jeśli runtime w JS jest okej, a edytor się pluje błędami masz błędy w typach ;)


 Pierwszy błąd: 
 

export type ProductsArr = {
    [index: string]: Product
}

Tak tworzy się typ obiektu nie tablicy. A drugi błąd jest taki że z tego obiektu z kluczami tworzysz jeszcze jedno zagłębienie już zwykłej tablicy:

products: ProductsArr[],

Wydaje mi się że jeśli całość będzie wyglądać tak to będzie okej:

export interface Product {
    name: string,
    price: number,
    capacity: number,
}
 
export interface Seller {
    name: string,
    postcode: string,
    city: string,
    street: string,
    email: string,
    products: Product[],
}
 
export type Sellers = Seller[];

 
 

1
komentarz 20 listopada 2020 przez Mariusz Podgórski Początkujący (400 p.)

Działa!smiley

Dziękuje bardzo!,

Bardzo mi pomogłeś i sporo się nauczyłem o typescripcie dzięki tobie. To jest mój pierwszy projekt i idzie mi ten typeskript jak krew z nosa. 

Dziękuje jeszcze raz.

Pozdrawiam.

Podobne pytania

0 głosów
0 odpowiedzi 173 wizyt
0 głosów
0 odpowiedzi 419 wizyt
pytanie zadane 7 września 2022 w JavaScript przez niezalogowany
0 głosów
0 odpowiedzi 150 wizyt
pytanie zadane 6 sierpnia 2020 w JavaScript przez rob Bywalec (2,440 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...