【初心者向け】TypeScriptの配列の基本的な型定義について

TypeScriptはJavaScriptと違って、予め型定義をする静的型付けが特徴的ですね。

配列についても型定義が可能なんですが、慣れていないと難しく感じるかもしれません。

というわけで今回は、TypeScriptの配列の基本的な型定義についてお話ししていきます。

TypeScriptの配列の基本的な型定義
まとめ

TypeScriptの配列の基本的な型定義

TypeScriptでは配列の中身の型定義が可能です。

そのため、その配列に予め定義された型以外の値が入るような処理になっていると、スクリプトの実行前にバグを検知することができますね。

では、配列の型定義について、いくつかパターンを見ていきましょう。

①文字列型

まずは、文字列型の配列から。

以下のように、string[]と型定義をすると、その配列にはstring型の値しか入れられなくなるため、number型など、他の型をpushしようとすると、コンパイルエラーになります。

// 文字列型
const strArray: string[] = [];
strArray.push('a');
strArray.push('b');
strArray.push('c');
console.log(strArray);

// 実行結果
[ 'a', 'b', 'c' ]

②数値型

数値型の場合は、number[]。

文字列型の時と同様、配列には数値型しか入れられません。

// 数値型
const numArray: number[] = [];
numArray.push(1);
numArray.push(2);
numArray.push(3);
console.log(numArray);

// 実行結果
[ 1, 2, 3 ]

その他、booleanの配列なども定義は可能です。(使う場面は少なそうですが)

③複数の型

場合によっては、配列の中に複数の型の値を入れたいこともあるでしょう。

その時は以下のように「|」を使うことで解決できます。

// 複数の型
const strOrNumArray: (number | string)[] = [];
strOrNumArray.push(1);
strOrNumArray.push('a');
console.log(strOrNumArray);

// 実行結果
[ 1, 'a' ]

上記の型定義だと、「number型もしくはstring型の値が入る配列」になります。

さらに「|」でつなげれば、型の種類を追加可能です。

④オブジェクト型

次はオブジェクト型の配列の型定義を見ていきましょう。

interface User {
    id: number,
    name: string
}

// オブジェクト型
const userArray: User[] = [];
userArray.push({id: 1, name: 'ユーザー1'});
userArray.push({id: 2, name: 'ユーザー2'});
console.log(userArray);

// 実行結果
[ { id: 1, name: 'ユーザー1' }, { id: 2, name: 'ユーザー2' } ]

上記のように、interfaceで定義したオブジェクトの型の後ろに[]を付けると、そのオブジェクト型の配列を定義可能です。

オブジェクト型配列の場合、追加するオブジェクトの各パラメーターの型も、予め定義された値になっている必要があります。

上の例であれば、idはnumber型、nameはstring型になりますね。

そして、id、nameの両方のパラメーターが入っているオブジェクトしか追加できないことも覚えておきましょう。

また、idやname以外のパラメーターは定義されていないので、他のパラメーターを含むオブジェクトを配列に入れることはできません。

// 以下は不可
userArray.push({id: 3});
userArray.push({name: 'ユーザー4'})
userArray.push({id: 5, name: 'ユーザー5', age: 20});

⑤多次元配列

僕は業務上、使った経験は無いですが、多次元配列も定義可能です。

// 多次元配列
const multiArray: string[][] = [];
// (string[])[]でも可

multiArray.push(['a']);
multiArray.push(['b']);
multiArray[0].push('c');
multiArray.push(['d', 'e']);
console.log(multiArray);

// 実行結果
[ [ 'a', 'c' ], [ 'b' ], [ 'd', 'e' ] ]

上記のように、pushの方法がいくつかありますね。

⑥any型配列

予め型を決められない場合は、any型で定義することも可能です。

// 何でも配列
const anyArray: any[] = [];

anyArray.push('a');
anyArray.push(1);
anyArray.push(true);
anyArray.push(null);
anyArray.push(['b', 'c']);
anyArray.push({id: 1, name: 'ユーザー1'})
console.log(anyArray);

// 実行結果
[ 'a', 1, true, null, [ 'b', 'c' ], { id: 1, name: 'ユーザー1' } ]

any型であれば上記のように、任意の型の値を配列に追加できます。

ただし、any型で定義してしまうとバグを検知できるのが実行時になるという懸念がありますね。

TypeScriptの魅力は静的型付けなので、できるだけany配列は避けましょう。