始め TSを初めて勉強したときに「typeよりinterfaceを使うように！」というブログをよく見ましたが、業務の時は全部typeで型を定義してました。あれ？と疑念に思ってましたので、記事でお話させていただきます。 1. 型の定義 TSで一番手っ取り早く型を定義できる方法は多分これだと思います。 let level: number = 15; level = 15 level = "十五" //Type 'string' is not assignable to type 'number' このように宣言時の変数に方の注釈をつけることを型アノテーション(Type Annotation)と言います。上の例だけ見たら特に問題なさそうに見えますが、コードが少しでも複雑になったら問題があります。

APIからあるオブジェクトが渡され、フロントでデータが無ければデフォルト値を付けるような処理を TypeScript で書いていてハマったのでメモ。 ※ フロントは React です API から渡されるデータ InitUnitData = { first: { id: 1, name: '春風 わかば', type: 'cute', }, second: { id: 2, name: '姫石 らき' } } type が無ければデフォルト値を付けたい Array.reduce でオブジェクトをフォーマットする JavaScript で書くとこんな感じ。 const DefaultType = 'cute'; function Unit({ InitUnitData }) { return <UnitContainer {...formatUnitData(InitUnitData)} /

やりたいこと object等の呼び出しで Object[key] のようにするとき、key に動的な変数を入れたい。 問題・エラー 何も考えずに下記のように書くと、 const object = { aaa: 'aaaa', bbb: 'bbb', }; // keyには動的に生成された値 const key: string = receivedStringValue; const value = object[key];