Ketikan: Bagaimana cara saya mendefinisikan antarmuka untuk objek bersarang?

94

Asumsikan saya memiliki payload JSON yang diurai menjadi seperti ini:

{
    name: "test",
    items: {
        "a": {
            id: 1,
            size: 10
        },
        "b": {
            id: 2,
            size: 34
        }
    }
}

Bagaimana saya mengatur definisi antarmuka Contoh untuk memodelkan bahwa nilai properti item adalah objek yang kuncinya adalah string dan nilainya ditentukan oleh antarmuka Item:

export interface Example {
    name: string;
    items: ???;

}

export interface Item {
    id: number;
    size: number;
}
bince
sumber

Jawaban:

162

Ketikan memungkinkan Anda menambahkan tipe untuk kunci objek menggunakan sintaks [key: string].

Seperti yang dinyatakan dalam dokumentasi, ini disebut tipe yang dapat diindeks :

Tipe yang dapat diindeks memiliki tanda tangan indeks yang menjelaskan tipe yang dapat kita gunakan untuk mengindeks objek, bersama dengan tipe kembalian yang sesuai saat mengindeks.

Dalam kasus Anda, Anda akan menggunakan yang berikut:

export interface Item {
    id: number;
    size: number;
}

export interface Example {
    name: string;
    items: {
        [key: string]: Item
    };
}

Untuk referensi, berikut ini tautan ke contoh langsung .

Josh Crozier
sumber
2
Mengapa Anda mengekspor Itemantarmuka? Bukankah mengekspor Exampleantarmuka saja sudah cukup?
Alexander Kim
2
@AlexanderKim ya, kecuali Itemberguna untuk kode lain yang menggunakan tipe ini juga.
evanrmurphy
apakah ada yang tahu cara mengatur kunci item dengan negara dan mengaksesnya?
Anjing
@Dog tentu saja, tetapi ini bukan situs "kode untuk saya"
Emobe
Terima kasih untuk ini, saya mengalami masalah saat mengakses antarmuka yang ditentukan dalam satu file kelas di kelas lain. Saya belum menentukan antarmuka dengan ekspor. Setelah menambahkan ekspor impor di ke halaman memungkinkan saya untuk kemudian mengimpor kelas dan antarmuka terima kasih.
Gurnard