#TypeScript 配列型

TypeScript では、JavaScript 配列は配列とタプルの 2 つのタイプに分類されます。

この章では配列を紹介し、次の章ではタプルを紹介します。

導入

TypeScript 配列には基本的な特性があります。すべてのメンバーは同じ型である必要がありますが、メンバーの数は定義されておらず、無制限のメンバーまたはゼロのメンバーになる可能性があります。

配列型を記述するには 2 つの方法があります。最初の記述方法は、配列メンバーの型の後に角括弧のペアを追加することです。

arr:number[] = [1, 2, 3]; とします。

上の例では、配列 arr の型は number[] です。ここで、number は配列メンバーの型が number であることを意味します。

配列メンバーの型がより複雑な場合は、括弧内に記述することができます。

let arr:(数値|文字列)[];

上の例では、配列 arr のメンバーの型は number|string です。

この例では括弧が必要です。そうしないと、垂直バー | の優先順位が [] よりも低いため、TypeScript は number|string[] を number と string[] 型の和集合として解釈します。 。

配列メンバーが任意の型である場合は、「any[]」と記述します。もちろん、このような書き方は避けるべきです。

arr:any[]; にしましょう。

配列型を記述する 2 番目の方法は、TypeScript の組み込み Array インターフェイスを使用することです。

arr:Array<数値> = [1, 2, 3]; とします。

上記の例では、配列 arr の型は Array<number> です。ここで、number はメンバーの型が number であることを意味します。

この書き方により、より複雑なメンバー型を持つ配列のコードが若干読みやすくなります。

let arr:Array<数値|文字列>;

この記述方法は基本的には一般的なものです。詳しい説明については、「ジェネリック」の章を参照してください。さらに、配列型を記述する 3 番目の方法がありますが、これはめったに使用されないため、この章では省略します。詳細については、「インターフェイス」の章を参照してください。

配列型を宣言した後は、メンバーの数に制限はありません。任意の数のメンバーを使用することも、空の配列を使用することもできます。

arr:number[]; にしましょう。
arr = [];
arr = [1];
arr = [1, 2];
arr = [1, 2, 3];

上の例では、配列 arr はメンバーの数に関係なく正しいです。

この規定の隠された意味は、配列のメンバーが動的に変更できることです。

arr:number[] = [1, 2, 3]; とします。

arr[3] = 4;
arr.length = 2;

arr // [1, 2]

上記の例では、配列にメンバーを追加または削除することができます。

メンバーの数は動的に変更できるため、TypeScript は配列の境界をチェックせず、境界外の配列にアクセスしてもエラーは報告されません。

arr:number[] = [1, 2, 3]; とします。
let foo = arr[3]; // 正しい

上記の例では、変数 foo の値は存在しない配列メンバーであるため、TypeScript はエラーを報告しません。

TypeScript では、角括弧を使用して配列メンバーの型を読み取ることができます。

type Names = string[];
type Name = Names[0]; // 文字列

上記の例では、型 Names は文字列配列であるため、Names[0] によって返される型は string になります。

配列メンバーのインデックス型はすべて「number」なので、メンバー型の読み取りは次のように書くこともできます。

type Names = string[];
type Name = 名前[数値] // 文字列

上記の例では、Names[number] は配列 Names 内のすべての数値インデックスのメンバー タイプを表すため、string が返されます。

配列の型推論

配列変数に型が宣言されていない場合、TypeScript は配列メンバーの型を推測します。このとき、値によって推論動作が異なります。

変数の初期値が空の配列の場合、TypeScript は配列の型が any[] であると推測します。

// any[] として推論されます
const arr = [];

後で、この配列に値を割り当てるときに、TypeScript は型推論を自動的に更新します。

const arr = [];
arr // any[] として推論されます

arr.push(123);
arr // 推論される型はnumber[]です

arr.push('abc');
arr // 推論される型は (string|number)[] です

上記の例では、配列変数 arr の初期値は空の配列であり、新しいメンバーが追加されると、TypeScript は推論された配列の型を自動的に変更します。

ただし、型推論の自動更新は、初期値が空の配列の場合にのみ発生します。初期値が空の配列でない場合、型推論は更新されません。

//推論される型はnumber[]です
const arr = [123];

arr.push('abc'); // エラーレポート

上記の例では、配列変数 arr の初期値は [123] であり、TypeScript はメンバーの型が number であると推測します。新しいメンバーがこの型ではない場合、TypeScript はエラーを報告し、型推論を更新しません。

読み取り専用配列、const アサーション

JavaScript では、「const」コマンドで宣言された配列変数はメンバーを変更できると規定されています。

const arr = [0, 1];
arr[0] = 2;

上記の例では、「const」コマンドで宣言された配列のメンバーの変更が許可されています。

ただし、多くの場合、配列を読み取り専用として宣言する必要があります。つまり、配列メンバーの変更は許可されません。

TypeScript では、配列型の前に「readonly」キーワードを付けることで読み取り専用配列を宣言できます。

const arr:readonly 数値[] = [0, 1];

arr[1] = 2; // エラーを報告します。
arr.push(3); // エラーを報告します
delete arr[0]; // エラーを報告します

上記の例では、「arr」は読み取り専用の配列であり、配列メンバーを削除、変更、または追加するとエラーが報告されます。

TypeScript は readonly number[] と number[] を 2 つの異なる型として扱います。後者は前者のサブタイプです。

これは、読み取り専用配列には、元の配列を変更する pop()、push()、およびその他のメソッドがないためです。そのため、number[] には readonly number[] よりも多くのメソッドがあります。つまり、 number[]は実際には readonlynumber[]のサブタイプです。

サブタイプは親タイプのすべての特性を継承し、独自の特性を追加することがわかっているため、サブタイプ number[] は親タイプが使用されるすべての状況で使用できますが、その逆はできません。

a1:数値[] = [0, 1]; とします。
let a2:readonlynumber[] = a1; // 正しい

a1 = a2; // エラーレポート

上記の例では、サブタイプ number[] を親タイプ readonly number[] に割り当てることができますが、その逆ではエラーが報告されます。

読み取り専用配列は配列の親タイプであるため、配列を置き換えることはできません。これにより、紛らわしいエラーが発生しやすくなります。

関数 getSum(s:number[]) {
  // ...
}

const arr:readonly 数値[] = [1, 2, 3];

getSum(arr) // エラーレポート

上記の例では、関数 getSum() のパラメータ s は配列であり、読み取り専用の配列が渡されるとエラーが報告されます。その理由は、読み取り専用配列が配列の親型であり、親型はサブタイプを置き換えることができないためです。この問題の解決策は、型アサーション getSum(arr asnumber[]) を使用することです。詳細については、「型アサーション」の章を参照してください。

readonly キーワードは配列の一般的な表記では使用できないことに注意してください。

// エラーを報告する
const arr:readonly Array<数値> = [0, 1];

上記の例では、配列の汎用書き込みメソッドと readonly が併用されている場合、エラーが報告されます。

実際、TypeScript には、読み取り専用の配列型を生成するための 2 つの特殊なジェネリックスが用意されています。

const a1:ReadonlyArray<数値> = [0, 1];

const a2:Readonly<数値[]> = [0, 1];

上記の例では、汎用の ReadonlyArray<T> と Readonly<T[]> の両方を使用して読み取り専用の配列型を生成できます。 2 つの山括弧内の書き方は、Readonly<T[]> の山括弧内は配列全体 (number[]) であり、ReadonlyArray<T> の山括弧内は異なります。配列メンバー (number) です。

読み取り専用配列を宣言するもう 1 つの方法は、「c​​onst アサーション」を使用することです。

const arr = [0, 1] を const;

arr[0] = [2]; // エラーレポート

上記の例では、「as const」は、型を推論するときに変数「arr」を読み取り専用の配列として推論するように TypeScript に指示し、配列メンバーを変更できないようにします。

多次元配列

TypeScript は T[][] の形式を使用して 2 次元配列を表します。ここで、T は最下位レベルの配列メンバーの型です。

var multi:number[][] =
  [[1,2,3]、[23,24,25]];

上記の例では、変数 multi の型は number[][] で、これは 2 次元配列であることを意味し、最下層の配列メンバーの型は number です。