TypeScript

スプレッド演算子、レストパラメーター、分割代入

■スプレッド演算子 スプレッド演算子(...)は、配列の全ての値を一括で「展開」できる、という機能である。 push()について復習。配列やオブジェクトは「参照型」。値そのものではなく、値への参照を持っている。参照先のアドレスが変わらなければ、メモリの…

ジェネリック型

■概要 ジェネリック型とは、他の特定の型と結合された型のこと。汎用型とも言う。 TypeScriptにおける型安全性を高めることができ、自動保管等の開発サポートを受けることができる。 ジェネリック型は、Reactでよく登場する。 ◇Array Array → string[] と一…

TS)「?」「!」について

■「?」について ◇オプションパラメーター(?) ◇オプショナルチェイニング(?.) ネストされたオブジェクトのプロパティが存在するかどうかの条件分岐を簡単に記述できるOptional chaining(?)。 以下のように「?」をプロパティアクセス時に用いることでnullまた…

イベントの「型」

TypeScriptではeventにも「型」が要求される。anyでは心許ない... type Props = { onClick: (event: React.MouseEvent<HTMLInputElement>) => void onChange: (event: React.ChangeEvent<HTMLInputElement>) => void onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void onBlur: (event: React.Foc</htmlinputelement></htmlinputelement></htmlinputelement>…

TS) TypeScriptとReact Node

コードに悩む場面の多くが、Typescriptで遭遇するエラーが理解できないときである。 明示的な型定義の本の一部だけしか理解していなかったためである。色々調べてみた。 React + TypeScript に入門したので基本をまとめてみた https://cloudpack.media/57935…

Jest

単体テストを行うテスティングライブラリ「Jest」。 ■環境構築 Next.js Testing Next.js + Jest Next.js(TypeScript)にJestを設定する方法 Next.js 12でJestの設定がかなり楽になった 公式docを参考に、必要なライブラリをインストール yarn add -D jest jes…