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

Question

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ę ;-}

Answer 1

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[];

 
 

Comments

Działa!

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.