TypeScriptの複雑な型

TOC

  1. 配列
  2. 連想配列
  3. 応用: 2次元配列
  4. 応用: 配列内の連想配列
  • 型の別名を指定する
  • まとめ
  • こんにちはー!!
    TypeScriptには、名前の通り、「型」があります。
    その中で、複雑な型もあるので、紹介したいと思います。

    配列

    2つの定義の方法があります。

    1
    2
    3
    4
    5
    6
    var numArray: number[] = [0, 1, 3, 5, 10, 100, 42];
    var numArray2: Array<number> = [0, 42];

    // これも上と同じ
    console.log(typeof numArray); // object
    console.log(numArray instanceof Array); // true

    連想配列

    知らなかった!いままでは Object 型とか、any とか使っていました・・

    1
    2
    var hash1: {[key: string]: string} = { "a1": "123", "b2": "def" };
    var hash2: {[key: number]: HTMLElement} = { 1: document.getElementById("elem"), 42: document.getElementById("42") };

    構文は、次のようになります。

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

    応用: 2次元配列

    次のような配列は、どんな型にしたらよいでしょう。

    1
    [["apple", "banana", "tomato"], ["fire", "water", "tree"]]

    文字列の2次元配列です。
    まず配列の中に配列があって、その中に文字列ということなので、次のように書きます。

    1
    var ar: Array<Array<string>>;

    こんな書き方もできます。

    1
    var ar2: string[][];

    応用: 配列内の連想配列

    では、次のような場合はどうでしょう。

    1
    [{"name": "taro", "like": "apple"}, {"name": "hoge", "like": "pc"}]

    配列の中に連想配列があるので、こんなのはどうでしょう。

    1
    var list = Array<{[key: string]: string}>;

    こんな書き方もできます。

    1
    var list2 = {[key: string]: string}[];

    型の別名を指定する

    いちいち、{[key: string]: string} とか、入力するのきついので、
    別名をつけちゃいましょー!!

    1
    2
    type type1 = {[key: string]: string}; // 別名を指定
    var list: type1 = { "first": "abc", "second": "def" };

    type 型の別名 = もととなる型 で定義できます!

    まとめ

    TypeScriptには、numberとかの簡単な型もあるけれど、
    連想配列とかは、Objectとするのではなく、インデックス、値の型まで指定できる!

    さっきから「型」が「方」って変換されてつらいぜ!!