typescript - Bagaimana saya bisa mendefinisikan array dari objek?

Saya sedang membuat sebuah array objek di TypeScript:

 userTestStatus xxxx = {
    "0": { "id": 0, "name": "Available" },
    "1": { "id": 1, "name": "Ready" },
    "2": { "id": 2, "name": "Started" }
 };

Bisakah seseorang memberi tahu saya bagaimana saya bisa mendeklarasikan tipenya dengan benar? Apakah mungkin melakukannya secara inline atau saya perlu dua definisi?

Saya ingin mengganti xxx dengan deklarasi tipe, sehingga nanti TypeScript akan memberi peringatan jika saya menggunakan sesuatu seperti userTestStatus[3].nammme secara keliru.

Jawaban #1

Anda lebih baik menggunakan array bawaan daripada literal objek dengan properti mirip angka, sehingga penomoran (serta banyak fungsi array lainnya) ditangani secara langsung.

Apa yang Anda cari di sini adalah definisi antarmuka inline untuk array Anda yang mendefinisikan setiap elemen dalam array itu, baik yang awalnya ada maupun yang diperkenalkan kemudian:

let userTestStatus: { id: number, name: string }[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

userTestStatus[34978].nammme; // Error: Property 'nammme' does not exist on type [...]

Jika Anda menginisialisasi array Anda dengan nilai-nilai secara langsung, definisi tipe yang eksplisit tidaklah diperlukan; TypeScript dapat secara otomatis menafsirkan sebagian besar tipe elemen dari penugasan awal:

let userTestStatus = [
    { "id": 0, "name": "Available" },
    ...
];

userTestStatus[34978].nammme; // Error: Property 'nammme' does not exist on type [...]

Jawaban #2

Apa yang Anda miliki di atas adalah sebuah objek, bukan sebuah array.

Untuk membuat array, gunakan [ & ] untuk membungkus objek Anda.

userTestStatus = [
  { "id": 0, "name": "Available" },
  { "id": 1, "name": "Ready" },
  { "id": 2, "name": "Started" }
];

Selain itu, TypeScript adalah superset dari JavaScript jadi apa pun yang valid di JavaScript akan valid di TypeScript sehingga tidak diperlukan perubahan lain.

Klarifikasi umpan balik dari OP... membutuhkan definisi untuk model yang diposting

Anda dapat menggunakan tipe yang didefinisikan di sini untuk merepresentasikan model objek Anda:

type MyType = {
    id: number;
    name: string;
}

type MyGroupType = {
    [key:string]: MyType;
}

var obj: MyGroupType = {
    "0": { "id": 0, "name": "Available" },
    "1": { "id": 1, "name": "Ready" },
    "2": { "id": 2, "name": "Started" }
};
// or if you make it an array
var arr: MyType[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

Jawaban #3

Beberapa aturan tslint menonaktifkan penggunaan [], contoh pesan: Tipe array menggunakan 'T[]' dilarang untuk tipe yang tidak sederhana. Gunakan 'Array<T>' sebagai gantinya.

Maka Anda akan menulisnya seperti:

var userTestStatus: Array<{ id: number, name: string }> = Array(
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
);

Jawaban #4

Array<T>
person: Array<{
  name: string;
  age: number;
}>

Jawaban #5

Sedikit lama tapi saya merasa saya bisa menambahkan sedikit kejelasan pada ini.

Jawaban Tepat

    interface MyObject {
      id: number;
      name: string;
    }

    interface MyExactData {
      [key: string]: MyObject;
    }

    let userTestStatus: MyExactData = {
      "0": { "id": 0, "name": "Available" },
      "1": { "id": 1, "name": "Ready" },
      "2": { "id": 2, "name": "Started" }
    };

Tetapi yang di atas bukanlah cara kita biasanya membuat array dari objek, Anda akan menggunakan array native sederhana di JavaScript.

    interface MyObject { // define the object (singular)
      id: number;
      name: string;
    }

    let userTestStatus_better: MyObject[] = [
      { "id": 0, "name": "Available" },
      { "id": 1, "name": "Ready" },
      { "id": 2, "name": "Started" }
    ];

Hanya dengan menambahkan [] ke antarmuka kita menyediakan pengetikan untuk array dari objek tersebut. Dan untuk melakukannya secara inline

    let userTestStatus_inline: {id:number, name:string}[] = [
      { "id": 0, "name": "Available" },
      { "id": 1, "name": "Ready" },
      { "id": 2, "name": "Started" }
    ];

Saya akan menggunakan antarmuka karena Anda memiliki sesuatu yang dapat didefinisikan, dipahami, dan dapat digunakan kembali. Jika Anda perlu melakukan perubahan, Anda dapat mengubah satu antarmuka dan TypeScript akan melaporkan ketidakcocokan kode di antarmuka Anda.

Jawaban #6

Apa yang sebenarnya Anda inginkan mungkin hanya sebuah enumerasi

Jika Anda mencari sesuatu yang berperilaku seperti enumerasi (karena saya melihat Anda sedang mendefinisikan sebuah objek dan menambahkan ID berurutan 0, 1, 2 dan berisi field nama yang tidak ingin Anda salah eja (misalnya name vs naaame), sebaiknya Anda mendefinisikan sebuah enumerasi karena ID berurutan ditangani secara otomatis, dan memberikan verifikasi tipe untuk Anda secara langsung.

enum TestStatus {
    Available,     // 0
    Ready,         // 1
    Started,       // 2
}

class Test {
    status: TestStatus
}

var test = new Test();
test.status = TestStatus.Available; // type and spelling is checked for you,
                                    // and the sequence ID is automatic

Nilai-nilai di atas akan dipetakan secara otomatis, misalnya "0" untuk "Tersedia", dan Anda dapat mengaksesnya menggunakan TestStatus.Available. Dan Typescript akan menegakkan tipe ketika Anda melewatkannya.

Jika Anda bersikeras untuk mendefinisikan tipe baru sebagai array dari tipe kustom Anda

Anda menginginkan array dari objek, (bukan tepatnya sebuah objek dengan kunci "0", "1" dan "2"), jadi mari kita definisikan tipe dari objek terlebih dahulu, lalu tipe dari array yang berisi objek tersebut.

class TestStatus {
    id: number
    name: string

    constructor(id, name){
        this.id = id;
        this.name = name;
    }
}

type Statuses = Array<TestStatus>;

var statuses: Statuses = [
    new TestStatus(0, "Available"),
    new TestStatus(1, "Ready"),
    new TestStatus(2, "Started")
]

Artikel terkait