ジェネリクス

Union型

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

type User = {
  id: number
  name: string
  age: number
}

type Form = {
  email: string
  password: number
}

const StateComponent = () => {
  // 問題1. useStateでオブジェクトの型定義をしてみよう
  const [users, setUsers] = useState<User>({ id: 1, name: 'Tom', age: 20 })
  // 問題2. ユニオン型を使ってuseStateに型を付けてみよう
  const [formState, setFormState] = useState<Form | null>(null)

  return (
    <div>
      <p>ID: {users.id}</p>
      <p>名前: {users.name}</p>
      <p>年齢: {users.age}</p>
    </div>
  )
}

const ParentComponent = () => {
  return (
    <div>
      <StateComponent />
    </div>
  )
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'))


code-lesson

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

type User = {
  id: number
  name: string
  age: number
}

type Form = {
  email: string
  password: number
}

const StateComponent = () => {
  // 問題1. useStateでオブジェクトの型定義をしてみよう
  const [users, setUsers] = useState({ id: 1, name: 'Tom', age: 20 })
  // 問題2. ユニオン型を使ってuseStateに型を付けてみよう
  const [formState, setFormState] = useState(null)

  return (
    <div>
      <p>ID: {users.id}</p>
      <p>名前: {users.name}</p>
      <p>年齢: {users.age}</p>
    </div>
  )
}

const ParentComponent = () => {
  return (
    <div>
      <StateComponent />
    </div>
  )
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'))



    // =======================
    // テストコード
    // =======================
    const answer1 = "const [users, setUsers] = useState<User>({ id: 1, name: 'Tom', age: 20 })";
    const answer2 = 'const [formState, setFormState] = useState<Form | null>(null)';
    const questions = [
        {
            title: 'useStateでオブジェクトの型定義をしてみよう',
            tests: [
                {
                    title: 'オブジェクトを用いてuseStateに型を指定してください',
                    hint: '型エイリアス`User`をジェネリクスを使ってuseStateに型を付けましょう',
                    test: () => isContainTextInEditor(answer1)
                }
            ]
        },
        {
            title: 'ユニオン型を使ってuseStateに型を付けてみよう',
            tests: [
                {
                    title: 'ユニオン型を用いてuseStateに型を指定してください',
                    hint: '型エイリアス`Form`とユニオン型でnullを含めてuseStateにFormもしくはnullと型を付けましょう',
                    test: () => isContainTextInEditor(answer2)
                }
            ]
        }
    ];


useStateに型をつけてみよう2

string型

number型

boolean型

引数・返り値の型定義

void型

関数に型をつけてみよう

分割代入

propsに直接型をつけてみよう

type

型エイリアスを使ってpropsに型をつけてみよう

useStateに型をつけてみよう1

TypeScriptとReactを組み合わせて、厳密な型定義での開発を学びます。
関数やコンポーネントに型をつけることでバグを削減し、より安全なコードを書くことができます。

「Reactの基本的な型をマスターしよう」レッスンの総復習クイズです。