Index signature（インデックス型）

JavaScript(TypeScript)のObjectは、他のJavaScriptオブジェクトへの参照を保持し、文字列でアクセスできます。
簡単な例：
1
let foo:any = {};
2
foo['Hello'] = 'World';
3
console.log(foo['Hello']); // World
Copied!
キー"Hello"に文字列"World"を格納します。JavaScriptオブジェクトを保存できると言ったので、クラスインスタンスを保存してみましょう:
1
class Foo {
2
  constructor(public message: string){};
3
  log(){
4
    console.log(this.message)
5
  }
6
}
7
​
8
let foo:any = {};
9
foo['Hello'] = new Foo('World');
10
foo['Hello'].log(); // World
Copied!
また、stringでアクセスできると言いましたね。もし他の何らかのオブジェクトをインデックスシグネチャに渡すと、JavaScriptのランタイムは.toStringを事前に呼び出し、その文字列を得ます。これは以下の通りです：
1
let obj = {
2
  toString(){
3
    console.log('toString called')
4
    return 'Hello'
5
  }
6
}
7
​
8
let foo:any = {};
9
foo[obj] = 'World'; // toString called
10
console.log(foo[obj]); // toString called, World
11
console.log(foo['Hello']); // World
Copied!
インデックスを示す場所でobjが使われるたびにtoStringが呼び出されることに注意してください。
配列は若干異なります。number型のインデックスを使うと、JavaScript VMは、最適化を試みます(それが実際に配列であるか、格納された要素の構造がすべて一致しているかといったことに依存します)。なのでnumberはそれ自身、stringとは別の、正しいオブジェクトアクセサとみなされるべきです。以下は単純な配列の例です：
1
let foo = ['World'];
2
console.log(foo[0]); // World
Copied!
それがJavaScriptです。ではTypeScriptでの優雅な取り扱い方を見ていきましょう。
TypeScriptのインデックスシグネチャ
JavaScriptはインデックスシグネチャにオブジェクトを使った場合、暗黙的にtoStringを呼び出します。そのため、TypeScriptは、初心者が落とし穴にはまるのを防ぐために、エラーを出します(私はいつもstackoverflowで落とし穴にはまるJavaScriptユーザーをたくさん見ています)：
1
let obj = {
2
  toString(){
3
    return 'Hello'
4
  }
5
}
6
​
7
let foo:any = {};
8
​
9
// ERROR: the index signature must be string, number ...
10
foo[obj] = 'World';
11
​
12
// FIX: TypeScript forces you to be explicit
13
foo[obj.toString()] = 'World';
Copied!
ユーザーに明示的にtoStringを使うことを強制する理由は、オブジェクトのデフォルトのtoString実装がかなりひどいためです。v8では常に[object Object]を返します：
1
let obj = {message:'Hello'}
2
let foo:any = {};
3
​
4
// ERROR: the index signature must be string, number ...
5
foo[obj] = 'World';
6
​
7
// Here is where you actually stored it!
8
console.log(foo["[object Object]"]); // World
Copied!
もちろんnumberはサポートされています。理由は以下の通りです。
1.すばらしい配列/タプルのサポートに必要です。
2.あなたがobjとしてそれを使うとしても、デフォルトのtoString実装はまともです([object Object]ではありません)。
ポイント2を以下に示します。
1
console.log((1).toString()); // 1
2
console.log((2).toString()); // 2
Copied!
だから、レッスン1：
TypeScriptのインデックスシグネチャはstringまたはnumberのいずれかでなければなりません。
参考まで: symbolsもまたTypeScriptでサポートされています。しかし、まだそこには行かないでください。小さな一歩からです。
インデックスシグネチャを宣言する
今まで私たちは、TypeScriptに私たちが望むことをさせるためにanyを使ってきました。私たちは、実際にはインデックスシグネチャを明示的に指定できます。例えば文字列を使ってオブジェクトに格納されているものが構造体{message: string}に従っていることを確認したいとします。これは{ [index:string] : {message: string} }の宣言で行うことができます。これは以下のとおりです：
1
let foo:{ [index:string] : {message: string} } = {};
2
​
3
/**
4
 * Must store stuff that conforms to the structure
5
 */
6
/** Ok */
7
foo['a'] = { message: 'some message' };
8
/** Error: must contain a `message` or type string. You have a typo in `message` */
9
foo['a'] = { messages: 'some message' };
10
​
11
/**
12
 * Stuff that is read is also type checked
13
 */
14
/** Ok */
15
foo['a'].message;
16
/** Error: messages does not exist. You have a typo in `message` */
17
foo['a'].messages;
Copied!
ヒント： インデックスシグネチャの名前{ [index:string] : {message: string} }のindexはTypeScriptにとっては意味がなく、可読性のためだけのものです。例えばもしそれがユーザー名であれば、コードを見る次の開発者のために{ [username:string] : {message: string} }と宣言することができます。
もちろん、numberインデックスもサポートされています。例:{ [count: number] : SomeOtherTypeYouWantToStoreEgRebate }
すべてのメンバはstringインデックスシグネチャに従わなければならない
stringインデックスシグネチャを持つと、それと同時に、すべての明示的なメンバもそのインデックスシグネチャに準拠している必要があります。これを以下に示します:
1
/** Okay */
2
interface Foo {
3
  x: number;
4
  y: number;
5
}
6
/** Error */
7
interface Bar {
8
  x: number;
9
  y: string; // ERROR: Property `y` must be of type number
10
}
Copied!
これは、すべての文字列アクセスで同じ結果が得られるように安全性を提供するためです:
1
interface Foo {
2
  x: number;
3
}
4
let foo: Foo = {x:1,y:2};
5
​
6
// Directly
7
foo['x']; // number
8
​
9
// Indirectly
10
let x = 'x'
11
foo[x]; // number
Copied!
限られた個数の文字列リテラルを使う
マップ型(Mapped Types)を使うことで、インデックス文字列が「リテラル文字型のユニオン型(Union)」のメンバであることを要求するようなインデックスシグニチャを作ることができます。
1
type Index = 'a' | 'b' | 'c'
2
type FromIndex = { [k in Index]?: number }
3
​
4
const good: FromIndex = {b:1, c:2}
5
​
6
// Error:
7
// Type '{ b: number; c: number; d: number; }' is not assignable to type 'FromIndex'.
8
// Object literal may only specify known properties, and 'd' does not exist in type 'FromIndex'.
9
const bad: FromIndex = {b:1, c:2, d:3};
Copied!
辞書の語彙(vocabulary)の型を得るために、次のページで解説するkeyof typeofがしばしば共に使われます。
語彙の指定はジェネリクスを使うことで後回しにできます。
1
type FromSomeIndex<K extends string> = { [key in K]: number }
Copied!
stringとnumberインデクサの両方を持つ
これは一般的な使用例ではありませんが、TypeScriptコンパイラはこれをサポートしています。
しかし、stringインデクサはnumberインデクサよりも厳格であるという制約があります。これは意図的なものです。次のようなコードを可能にします：
1
interface ArrStr {
2
  [key: string]: string | number; // Must accommodate all members
3
​
4
  [index: number]: string; // Can be a subset of string indexer
5
​
6
  // Just an example member
7
  length: number;
8
}
Copied!
デザインパターン：ネストされたインデックスシグネチャ
インデックスシグネチャを追加する際のAPIの考慮事項
JSコミュニティでは、通常、文字列インデクサを乱用するAPIをよく見かけるでしょう。例えばJSライブラリにおけるCSSの共通パターンです:
1
interface NestedCSS {
2
  color?: string;
3
  [selector: string]: string | NestedCSS;
4
}
5
​
6
const example: NestedCSS = {
7
  color: 'red',
8
  '.subclass': {
9
    color: 'blue'
10
  }
11
}
Copied!
このように、文字列インデクサと有効な値を混在させないようにしてください。例えばオブジェクトに入れるときのタイプミスはキャッチされません：
1
const failsSilently: NestedCSS = {
2
  colour: 'red', // No error as `colour` is a valid string selector
3
}
Copied!
代わりに、ネストを独自のプロパティに分離します。例えば、nest(またはchildrenや subnodesなど)のような名前で宣言します：
1
interface NestedCSS {
2
  color?: string;
3
  nest?: {
4
    [selector: string]: NestedCSS;
5
  }
6
}
7
​
8
const example: NestedCSS = {
9
  color: 'red',
10
  nest: {
11
    '.subclass': {
12
      color: 'blue'
13
    }
14
  }
15
}
16
​
17
const failsSilently: NestedCSS = {
18
  colour: 'red', // TS Error: unknown property `colour`
19
}
Copied!
インデックスシグネチャから特定のプロパティを除外する
場合によっては、プロパティを結合してインデックスシグニチャにしたいことがあります。これは推奨されておらず、上記のネストされたインデックスシグネチャのパターンを使用するべきです。
ただし、既存のJavaScriptをモデリングしている場合は、交差型(intersection type)で回避することができます。次に、交差型を使用せずに発生するエラーの例を示します。
1
type FieldState = {
2
  value: string
3
}
4
​
5
type FormState = {
6
  isValid: boolean  // Error: Does not conform to the index signature
7
}
Copied!
交差型を使用した場合の回避策は次のとおりです。
1
type FieldState = {
2
  value: string
3
}
4
​
5
type FormState =
6
  { isValid: boolean }
7
  & { [fieldName: string]: FieldState }
Copied!
あなたはそれを既存のJavaScriptオブジェクトに対して宣言することができますが、そのようなオブジェクトをTypeScriptで生成できないことに注意してください。
1
type FieldState = {
2
  value: string
3
}
4
​
5
type FormState =
6
  { isValid: boolean }
7
  & { [fieldName: string]: FieldState }
8
​
9
​
10
// Use it for some JavaScript object you are getting from somewhere 
11
declare const foo:FormState; 
12
​
13
const isValidBool = foo.isValid;
14
const somethingFieldState = foo['something'];
15
​
16
// Using it to create a TypeScript object will not work
17
const bar: FormState = { // Error `isValid` not assignable to `FieldState
18
  isValid: false
19
}
Copied!