TypeScript で Object.keys(obj) でキーの配列を作ってループさせてループ内でキーでオブジェクトのデータにアクセスしようとして型エラーになってしまったのメモ e.g. 例としてデータ構造が良くないけど、ID をキーにしたオブジェクトみたいなイメージで co…

TypeScript Object を Object.keys() を使ったループの型エラーにハマる

TypeScript なんもわからん… Readonly と as const がよく判らなかったから調べたメモ Readonly TypeScriptの型システムでは、インターフェース上の個々のプロパティをreadonlyとしてマークすることができます。これにより、関数的に作業することができます(…

TypeScript Readonly と as const

TypeScript で [...document.querySelectorAll('meta')] こんな感じにスプレッド構文で NodeList を配列に変換しようとしたらエラーが出てしまいました。 Type 'NodeListOf<HTMLMetaElement>' is not an array type or a string type. Use compiler option '--downlevelIterat</htmlmetaelement>…

TypeScrip スプレッド構文で配列に変換しようとしたらエラーになった

React の useState で返される state の型を指定したい useState<型>(initial value) で state に型を強制できる type IdolType = 'cute' | 'cool' | 'pop' | 'sexy'; const [type, setType] = useState<IdolType>('cute'); setType('foo'); // => Argument of type '"</idoltype>…

React TypeScript useState に型を設定したい

React で子コンポーネントを ref で触りたい時、forwardRef APIを使うように言われます。 例えばボタンをクリックしたらフォーカスされるインプットフィールドだとこんな感じ。 import React, { useRef } from 'react'; const InputField = React.forwardRef…

React Hooks forwardRef を使わずに子コンポーネントにrefを渡す

環境づくりの勉強がてら ReactHooks・テストは JEST + Enzyme で作っていたプロジェクトを TypeScript 化したメモ 1. TypeScript 化のパッケージをインストール して babel 関連のパッケージをアンインストール TypeScript 化するにあたって必要なパッケージ…

React JS のプロジェクトを TypeScript 化したメモ

APIからあるオブジェクトが渡され、フロントでデータが無ければデフォルト値を付けるような処理を TypeScript で書いていてハマったのでメモ。 ※ フロントは React です API から渡されるデータ InitUnitData = { first: { id: 1, name: '春風 わかば', type…

TypeScript オブジェクトのデフォルト値を Array.reduce で設定しようとしたら型指定でハマった

TypeScript はちゃんと学習していないのですが、関わっているプロダクトが ts, tsx なので触る時に雰囲気で使っています。 今回はあるコンポーネントをラップするコンポーネントを作成していて、バックエンドから渡される値が、ラップするコンポーネントに定…

TypeScript type を & でいい感じにマージしたい。

キーの名前とプロパティの変数名が同じなら省略できる ES5 var cute = '星宮いちご'; var cool = '霧矢あおい'; var sexy = '紫吹蘭'; var soleil_es5 = { cute: cute, cool: cool, sexy: sexy, }; console.log( soleil_es5 ); // { cute: '星宮いちご', coo…

JavaScript (ES2015) Object の色々メモ