【TypeScript】連想配列の型指定

Javascriptは配列のように扱える型が複数あります。
ドキュメントでも基本的な型は説明されています。

www.typescriptlang.org

しかし、連想配列については型としては説明されていません。

今回は連想配列を扱う方法について記述します。

目次

連想配列の指定方法について

連想配列を使う場合は、keyとvalueの両方に対して型を指定する必要があります。

www.typescriptlang.org

指定するにはinterfaceとして連想配列の型を定義して、その型を変数で指定します。

例えば、方位（東西南北）を連想配列で表すと次のように記述します。

interface DirectionArray {
    // (文字型のキー):  string
    [index: string]: string
}

let directions: DirectionArray;
directions['east'] = '東';
directions['west'] = '西';
directions['south'] = '南';
directions['north'] = '北';

連想配列を指定する時の注意

interfaceで連想配列の型を設定する場合は、同じ階層内の型にも影響する事に注意が必要です。
例えば、次のように不特定なキーと、特定のキーを混ぜたい場合です。

interface MixArray {
    [index: string]: string,

    // 名前、文字型で設定する
    name: string,

    // カウンター、数字型で設定する
    count: number
}

nameは[index: string]: stringの条件にも一致します。
例えば、型について文字型の連想配列としか知らない状態でnameを指定されたとしても不都合はありません。

しかし、countは数字型ですので[index: string]: stringの条件に一致しません。
型について文字型の連想配列としか知らない状態でcountを指定されたら不整合が起きます。

特定の要素を同列で扱いたい場合は型を合わせるか、もしくは、不特定な要素の型をunion型にしてどちらが指定されても良いようにします。
(もちろん、この解釈は説明用に噛み砕いたものですので、実際は複雑な思想のもとで設定されているのかもしれません。 )

interface MixArray {
    [index: string]: string | number,
    name: string,
    count: number
}

オブジェクトの要素に連想配列の型を設定する

オブジェクトの特定の要素に連想配列の型を設定する事もできます。

interface FormProps {
    directions: { 
        [value: string]: string 
    }
}

interfaceを使わない方法

変数に連想配列の型を直接指定する事もできます。

let directions: { [key: string]: string } = [}
directions['east'] = '東';
directions['west'] = '西';
directions['south'] = '南';
directions['north'] = '北';