TypeScript

【 TypeScript 】複雑な型定義一覧

マナビト
マナビト
こんにちはマナビトです。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。

今回はTypeScriptの型定義の中でも、連想配列や二次元配列の場合にどの様に型定義すれば良いかについて記載していきます。

この記事は五分ほどで読むことができます。

【TypeScript】 型定義入門 本日はTypeScriptの型定義について取り上げていきたいと思います。 1. TypeScriptとは...

配列

配列の型定義はとてもシンプルです。
定義したいプリミティブ型に加えて [ ]を記載すれば定義することが可能です。

const data:number[] = [ 10,20,30,40,50 ];

Array<numberと記載することでも定義が可能です。

const data:Array<number> = [ 10,20,30,40,50 ];

変更不可の配列

元データを変更できない様に実装する場合、型定義の前にreadonlyを追加します。

const data: readonly number[] = [ 10,20,30,40,50 ];

連想配列

連想配列の場合、keyとvalueの型を定義していきます。

let test: {[key: string]: string} = { "a": "123", "b": "flg" }

少し複雑になってきましたね、{ }で全体を囲み[ ]の中でkeyの型定義を行い、その後連想配列の要素の型定義を行います。構文は下記の通りとなります。

 { [ key: インデックスの型 ]: 値の型 }

二次元配列

二次元配列の場合は、[ ]を2回繰り返します。
もしくは、Array<>の中に型を宣言することで型を定義できます。

[["Mac", "Windows", "Linax"], ["frist", "secand", "third"]]


let test: Array<Array<string>>;

// または
let test: string[][];

配列内の連想配列

配列内の連想配列を定義する場合は、二次元配列と連想配列の型定義を組み合わせます。

[{ [ "Mac", "Windows", "Linax" ] }, { [ "frist", "secand", "third" ]} ]


let test: Array<{[ key: string ]: string}>;

// または
let test: {[ key: string ]: string}[];

以上となります。