インデックス署名の開始

このブログ記事では、私たちはタイプスクリプトのインデックスについて学びます.

インデックス署名とは

インデックス署名は、オブジェクトの値が一貫した型のときにオブジェクト/辞書の型を表すために使用されます.
文法{ [key: KeyType] : ValueType }アプリケーションの中で使用できるカラープロパティを設定できるテーマオブジェクトを持っていると仮定します.値は型文字列の一貫性を持ちます.これは*私たちのインデックス署名を適用するための*パーフェクト機会になります*.

let colorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: "orange",
    },
  },
}

以下のようにタイプ定義を追加する方法を見てみましょう

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "r...

Playground Link
*インデックスシグネチャで定義されている型以外の異なる値の値を追加しようとするとどうなりますか?
*
型の値を追加しようとするとnumber それから、タイプスクリプトは叫び始めます.以下の例を見てみましょう

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: 1231313,
    },
  },
}

上の例では、インデックスシグネチャの値の型を文字列であるが、キーの場合はmain として値を与えた1231313 これは番号です.
私たちがタイプスクリプトから得られるエラーです.

(property) main: number
Type 'number' is not assignable to type 'string'.(2322)
input.tsx(61, 7): The expected type comes from this index signature.

どのように、我々は上記の誤りを解決しますか.の定義を変更しますColorsTheme 文字列または数値を受け入れる.

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string | number 
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: 1231313,
    },
  },
}

注意:インデックス型シグネチャがプロパティ型の結合である場合は、異なる型のプロパティを使用できます.Typescript docs

interface NumberOrStringDictionary {
    [index: string]: number | string | boolean;
    length: number; 
    name: string; 
    isVisible: boolean; 

}

*インデックスシグネチャの文字列やシンボル以外のキーを追加しようとするとどうなりますか?
*
インデックスシグネチャのキーの型をBooleanとして追加しようとすると、インデックスシグネチャパラメータの型が' String ', ' number ', ' symbol ',またはtemplateリテラル型でなければなりません

let foo: {
  [key: boolean] : number // Error : An index signature parameter type must be 'string', 'number', 'symbol', or a template literal type
} 

foo = {
  bar: 1
}

クイックリープ

インデックスシグネチャを使用すると、値が一貫した型のオブジェクトの型を定義できます.

まとめ

それはほとんどです.ブログ投稿を読む時間を割いていただきありがとうございます.皆さん、インデックス署名のコンセプトについて理解してください.
あなたがポスト役に立つとわかるならば、加えてください❤️ 私がコメントセクションで何かを逃したならば、それに私に知らせてください.ブログのフィードバックは大歓迎です.
さえずりに接続しよう

参考文献

Typescript Docs
2 . Index Signatures in Typescript