【TypeScript入門】多次元配列や複数の型を持つ配列など配列の書き方まとめ

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、TypeScriptでの多次元配列や複数の型を持つ配列など配列の書き方についてまとめて解説していきます。

1 TypeScriptでの配列に型をあてる
2 既存の配列から型を作成する
- 2.1 as const & typeof-演算子で配列をreadOnlyで抽出する
- 2.2 配列からリテラル・ユニオン型(Literal Union Types)を抽出する
3 TypeScript書籍
4 最近の投稿

TypeScriptでの配列に型をあてる

TypeScriptでは、配列に型注釈する方法が2通りあります。

1つ目の型注釈は、型のあとに[]をつける記法です。

たとえば、数値型の配列の型注釈はnumber[]と書きます。

2つ目の型注釈は、Array<T>を使った記法です。Tには型を書きます。

たとえば、数値型の配列の型注釈はArray<number>と書きます。

個人的には、上記2つのうちTypeScriptで配列の型を表現する方法としては、[]をおすすめします。

理由は2つあり、

1つ目は、Genericsで<> (ダイヤモンド演算子)は使用するので、それと棲み分けした方が可読性が上がること。

2つ目は、配列は[]で表現するのがJavaScriptでは普通で[]を使った方が直感的であることです。

上記のような私の方針もあり、これから紹介する配列の型注釈は、[]で記述しております。

ご了承ください。

1つの型だけの配列

// 1つの型だけの配列
const singleTypeArray: string[] = ['ロボ玉試作1号機', 'ロボ玉試作2号機'];

2つ以上の型の配列

// 2つ以上の型の配列
const multiTypeArray: (string | number | boolean)[] =  ['ロボ玉試作1号機', 1000, true];

1つの型だけの多次元配列

// 多次元配列 => 配列の中に配列
const multiArrayStr: (string)[][] = [
    ['ロボ玉試作1号機', '神聖グンマー帝国'],
    ['ロボ玉試作2号機', 'さいたまー共和国'],
    ['ロボ玉試作3号機', 'Tokyo']
];

複数の型を持つ多次元配列

// 複数の型を持つ多次元配列
const multiArray: (string | number)[][] = [
    ['ロボ玉試作1号機', 1000],
    ['ロボ玉試作2号機', 2000],
    ['ロボ玉試作3号機', 3000]
];

1つのパターンだけのObject配列

export interface Prefectures {
    prefCode: number;
    prefName: string;
}

// Object配列 => 1つのパターンだけ
const prefectureList: Prefectures[]  = [
    {prefCode: 1, prefName: '北海道'},
    {prefCode: 2, prefName: '神聖グンマー帝国'},
    {prefCode: 3, prefName: 'さいたまー共和国'},
    {prefCode: 4, prefName: 'トチギー公国'},
    {prefCode: 5, prefName: 'Tokyo'},
];

2つ以上のObjectのパターンを持った配列

// 都道府県のID & 名前のObject
export interface Prefectures {
    prefCode: number;
    prefName: string;
}

// 都道府県の人口データのObject
export interface YearPopulation {
    year: number;
    population: number;
}

// Object配列 => 2つ以上のObjectパターン
const prefDataSet: (Prefectures | YearPopulation)[] = [
    {prefCode: 1, prefName: '北海道'},
    {year: 2050, population: 160000},
    {year: 2055, population: 150000},
    {year: 2060, population: 140000},
    {year: 2065, population: 130000},
    {year: 2070, population: 120000},
];

intersection型(交差型)の配列

配列のintersection型(交差型)を使ったSampleです。

配列同士をMarge(合成)するような処理をするときに使えるかもです。

// 都道府県のID & 名前のObject
export interface Prefectures {
    prefCode: number;
    prefName: string;
}

// 都道府県の人口データのObject
export interface YearPopulation {
    year: number;
    population: number;
}

// intersectionしたArray
export type Population2050 = Prefectures[] & YearPopulation[]

const pref: Population2050 = [ 
    {prefCode: 1, prefName: '北海道', year: 2050, population: 160000},
    {prefCode: 2, prefName: '神聖グンマー帝国', year: 2050, population: 200000},
    {prefCode: 3, prefName: 'さいたまー共和国', year: 2050, population: 180000},
];

既存の配列から型を作成する

TypeScriptでは、既存の配列から型を作成することもできます。

以前の記事で、配列から型を作成する方法を細かく解説しましたが、

今回は、これだけ覚えておけば間違いない、配列から型を作成する2つの使い方を解説します。

【TypeScript入門】配列から型を生成する方法 | typeof & as const

as const & typeof-演算子で配列をreadOnlyで抽出する

as const & typeof-演算子 の2つを組み合わせると、readOnlyで配列の中身をそのまま型として抽出することができます。

// 配列から型を生成する => as const & typeof-演算子

const prefNameList = ["北海道", "神聖グンマー帝国", "さいたまー共和国", "トチギー公国", "Tokyo"] as const;

type prefNameType = typeof prefNameList;

// [ 作成された型 ] 
// type prefNameType = readonly ["北海道", "神聖グンマー帝国", "さいたまー共和国", "トチギー公国", "Tokyo"]

配列からリテラル・ユニオン型(Literal Union Types)を抽出する

as const & typeof-演算子 にさらに、[number] を組み合わせることで、

配列からリテラル・ユニオン型(Literal Union Types)を抽出することができます。

const prefNameList = ["北海道", "神聖グンマー帝国", "さいたまー共和国", "トチギー公国", "Tokyo"] as const;

// すべてのリテラル型が欲しい場合
type prefNameLiteral = typeof prefNameList[number];

// [ 作成された型 ]
// type prefNameLiteral = "北海道" | "神聖グンマー帝国" | "さいたまー共和国" | "トチギー公国" | "Tokyo"

const Gunmar: prefNameLiteral = '神聖グンマー帝国';