「モダンJavaScriptの基本から始めるReact実践の教科書」の感想・備忘録5

「モダンJavaScriptの基本から始めるReact実践の教科書」の感想・備忘録4の続き

TypeScript

環境構築

  1. npx create-react-app my-app2 --template typescript
  2. cd my-app2
  3. mkdir components
  4. npm start

基本的な型

  • string
  • number
  • boolaen
  • Array
  • null
  • undefined
    nullとundefinedはそれぞれnullとundefinedしか入らない変数となり、単体で使うことはないがユニオン(共用体)で「文字列またはnull」のような型指定をする場合に使う。
  • any
  • void
    関数の戻り値に使用可能

配列とオブジェクト

配列

const arr: number[] = [11,22]
または
const arr2: Array<number> = [33,44]

オブジェクト

const obj: {name: string, age: number} = {name: 'taro', age: 20}

複合的な型

交差型(Intersection Types)

複数のオブジェクトの型をマージして新しい型を定義することができる。

const obj2: {name: string, age: number} & {age: number, isAdmin: boolean} = {
  name: 'taro',
  age: 20,
  isAdmin: false
}

// Typeを使った場合
type TypeA = {
  name: string,
  age: number,
}
type TypeB = {
  age: number,
  isAdmin: boolean,
}
type TypeC = TypeA & TypeB
const obj3: TypeC = {name: 'jiro', age: 30, isAdmin: true}

共用体型(Union Types)

複数の型を許容する型定義。
本来不必要な型までunionで許容してしまうとバグの原因になるので、必要な型だけに絞って使う。
let strOrNum: string | number = "100"
strOrNum = 100

ジェネリクス

ジェネリクスは型定義を使用時に動的に変更できる機能であり、オブジェクトや関数の定義に使われる。
TypeScriptを使うためには欠かせない概念である。

type CustomType <T, U> = {
  val1: T,
  val2: U,
}
const hoge: CustomType<string, number> = {
  val1: 'hoge',
  val2: 111,
}

useStateはジェネリクスで型を指定する。
const [name, setName] = useState<string>("")

APIで取得するデータへの型定義

以下のデータが取得可能なAPIの場合

[
  {
    "id": 1,
    "name": "Ichiro",
    "age": 20
  },
  {
    "id": 2,
    "name": "Jiro",
    "age": 30
  }
]

以下のようにtype構文で型を定義する。

type User = {
  id: number,
  name: string,
  age: number
}
const [users, setUsers] = useState<User[]>([])
useEffect(() => {
  fetch("/users.json")
    .then((res: Response) => res.json())
    .then((json: User[]) => setUsers(json))
}, [])
// ※axiosの場合はget('xxxx')をget<User[]>('xxxx')とする

コメント

タイトルとURLをコピーしました