TypeScript でのオブジェクトのインターフェイス配列

Rana Hasnain Khan 2023年6月21日
TypeScript でのオブジェクトのインターフェイス配列

オブジェクトの配列をインターフェースする方法と、オブジェクトの配列をインターフェースするさまざまなメソッドを TypeScript の例で紹介します。

TypeScript でのオブジェクトのインターフェイス配列

オブジェクトの配列のインターフェイスを定義しました。 各オブジェクトのタイプのインターフェースについて説明しました。 配列を Type[] にします。

例えば:

# typescript
 const arr: Worker[] =[];

配列に追加されるすべてのオブジェクトは、型に従わなければなりません。そうしないと、型チェッカーがエラーを返します。

# typescript
interface student {
studentId: number;
studentName: string;
}
const arr: Employee[] = [
{ studentId: 1, studentName: 'Maham' },
{ studentId: 2, studentName: 'Maryam' },
];

上記の例では、オブジェクトの配列の型がインターフェイスとして使用されています。 各オブジェクトには、number 型の Idstring 型の name があります。

タイプチェッカーにエラーを引き起こす配列に異なるタイプのオブジェクトを追加しようとしています。

# typescript
interface Company {
CompanyId: number;
CompanyName: string;
[key: string]: any;
}

これは、配列を null として割り当てるときに非常に役立ちます。 null 配列を割り当てると、TypeScript はその型が any[] であると想定します。

# typescript
const arr2: Student[] = [
{ StudentId: 1, StudentName: 'Maham' },
{ StudentId: 2, StudentName: 'Maryam', wage: 100 },
];

上記の例から、any 型の要素を配列に追加できることがわかりますが、型チェッカーからは何の助けも得られませんでした。

むしろ、すべての null 配列の型を表現する必要があります。

# typescript
interface Student {
  StudentId: number;
  StudentName: string;
}
const arr: Student[] = [
  { StudentId: 1, StudentName: 'Maham' },
  { StudentId: 2, StudentName: 'Maryam' },
];
arr.push({ Wage: 100 });

Worker 型に従うオブジェクトのみを arr 配列に追加できます。

時間の前に、オブジェクトのすべてのプロパティの名前を持っていないとします。 インターフェイスでインデックス署名を使用しました。

# typescript
const worker = [];

インデックス シグネチャは、型のプロパティのすべての名前と形状の値を経時的に知ることができない場合に役立ちます。

# typescript
interface Worker {
  WorkerId: number;
  WorkerName: string;
}

const arr: Worker[] = [];

上記の例から、インデックス署名 {[キー: 文字列]: 文字列} を見ることができます。 これは、string でインデックスを作成すると、型 string の値に返されるキーと値の構造を表していました。

また、配列の各要素には、number 型の idstring 型の name があることもわかっています。 また、他の特性を持つこともできます。

キーは文字列で、その中の値は任意の型にすることができます。

このアプローチを使用している間は、事前にわかっているすべてのプロパティをインターフェイスに明示的に追加する必要があります。

型チェッカーの使用をできるだけ制限するのが理想的です。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

関連記事 - TypeScript Interface