React × TypeScript の基本

[Haramaki0326]

以下にだいたいまとまっている

• 【初心者】React × TypeScript 基本の型定義
  • 型のインポート方法
  • 関数コンポーネントの型定義
  • propsの型定義
  • useStateの型定義
  • イベントオブジェクト（event）の型定義
• TypeScript で書く React コンポーネントを基礎から理解する

[Haramaki0326]

呼び出しシグネチャ

• 参考:【Typescript】呼び出しシグネチャと省略記法の書き方
• 『プログラミングTypeScript――スケールするJavaScriptアプリケーション開発』の4.1.7

概要

• 型のみで具体的な値は書かないで宣言する
  • 推論する元の情報がないので呼び出しシグネチャは戻り値の型の明示的なアノテーションは必須
• 用途
  • 関数を引数として渡す場合
  • 関数を別の関数から返す場合

使い方

省略記法

type addCalc = (a: number, b:number) => void

let add: addCalc = (a, b) => {
  console.log(a + b)
}
add(1, 2)
// 3

正式な記法

type addCalc = {
  (a: number, b:number): void
}

let add: addCalc = (a, b) => {
  console.log(a + b)
}
add(1, 2)