TypeScript #3 配列

2021年1月2日

今回は配列に関してまとめていこうと思いますが、JavaScriptの配列をわかっていると前回の型同様に基本的な考え方は近いしいものがありますね。
では基本的なところから見ていきましょう。

配列の基本

TypeScirptでは配列に格納するデータの型をあらかじめ定義しておく必要があります。
そのため基本的な文法はJavaScriptと同じような感じです。

//配列の基本的な書き方
//配列名(arrayName)の後ろに型名[]をつけます。
let arrayName:データ型[];


// 数字を格納する配列の例
let numbers:number[] = [1,2,3];
console.log(numbers);

//文字列を格納する配列の例
let fruits: string[] =['apple','orange','banana'];
console.log(strs);

変数と一緒なのですが、ここでデータを格納する変数であれば格納すべきデータは1つなのですが、配列の場合は配列の要素として複数のデータを持つことができます。そのため、JavaScriptでは動作することができていた以下のようなデータの格納方法には特殊なコツがいります。そうです、配列に格納可能なデータ型を定義するときに複数指定することで、複数指定した型のどれかならばOKとなります。

//文字列を格納する配列には文字列以外入らない。。(ダメな例)
let everyone: string[] =[1,'orange',true];

配列に複数の型のデータを入れたい

配列に複数のデータ型の要素を取りたい場合はどうしたら良いのか?もちろんできます。
やり方は大きく分けて2つのやり方があります。
1つは共用型という、配列に格納できる型の候補を複数指定することができます。下記例では配列everyoneには、数値、文字列、ブールを配列を宣言する際に定義することでこの3つの型のデータであれば配列に入れることができます。
もう一つは、タプル型という、共用型と同じようなものなのですが、配列に格納する場所に応じて、型を指定することができます。以下の例では配列memberは0番目の要素は数値、1番目の要素は文字列のデータ型を持つことができます。

// 共用型 (ごちゃまぜ)
// 型指定を複数候補を指定できる。以下の例だと、数値、文字列、ブール型のどれかならOK
let everyone:(number|boolean|string)[]  = [1,false,'Japan'];

//tuple型
let members:[number,string] = [1,'qtaro'];

なんでもOKになるやり方(any)

実は最後になりますが、TypescriptにはAny型(なんでもOK)という型指定があります。
え?え??えええ??TypeScriptの意味ないじゃんと思われますよね。
新規作成のプログラムではAny型などは基本は使わずに、きちっと型指定したコーディングを心かけることで、TypeScriptの利点を享受することができます。
ただ、世の中の多くのシステムでは、既存のJavaScriptの資産(コードやライブラリ)が存在し、それをうまく利活用することで車輪の再発明にならないように部品の再利用を行います。
しかし、既存の資産はJavaScriptです。そのため、型指定(アノテーション)の存在しないプログラムなので、プログラム間でデータの授受をする際にもしかしたら、想定していない型でデータが渡って来るかもしれません。そのために、Any型を利用することができます。
これはもちろん配列にも使うことができます。
とはいえ、やはりAny型は基本的にはJavaScriptからの移行時や共用時の矢も負えないケースの利用にとどめておくほうが良いと思います。

// なんでも入る変数
et anyone:any = 1;
anyone = "mojiretsu";
anyone = true
console.log(anyone)

// なんでも入る配列
let anyArray:any[] = [1,"ni",true,false,5,"roku"];
console.log(anyArray)

TypeScript

Posted by Qtaro