ジェネリクス

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

const UseStatePractice = () => {
  //問題1 useStateに型を指定しよう
  const [username, setUsername] = useState<string>('')
  const [price, setPrice] = useState<number>(0)
  const [isActive, setIsActive] = useState<boolean>(true)
  //問題2 useStateで配列の型定義をしてみよう
  const [colors, setColors] = useState<string[]>([])
  const [number, setNumber] = useState<number[]>([])

  return <p>useStateの型を定義しましょう</p>
}

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


code-lesson

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

const UseStatePractice = () => {
  //問題1 useStateに型を指定しよう
  const [username, setUsername] = useState('')
  const [price, setPrice] = useState(0)
  const [isActive, setIsActive] = useState(true)
  //問題2 useStateで配列の型定義をしてみよう
  const [colors, setColors] = useState([])
  const [number, setNumber] = useState([])

  return <p>useStateの型を定義しましょう</p>
}

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



    // =======================
    // テストコード
    // =======================
    const answer1 = "const [username, setUsername] = useState<string>('')";
    const answer2 = 'const [price, setPrice] = useState<number>(0)';
    const answer3 = 'const [isActive, setIsActive] = useState<boolean>(true)';
    const answer4 = 'const [colors, setColors] = useState<string[]>([])';
    const answer5 = 'const [number, setNumber] = useState<number[]>([])';
    const questions = [
        {
            title: 'useStateに型をつけてみよう',
            tests: [
                {
                    title: 'string型を指定してみよう',
                    hint: 'useStateにジェネリクス<>を用いてstring型を指定してください',
                    test: () => isContainTextInEditor(answer1)
                },
                {
                    title: 'number型を指定してみよう',
                    hint: 'useStateにジェネリクス<>を用いてnumber型を指定してください',
                    test: () => isContainTextInEditor(answer2)
                },
                {
                    title: 'boolean型を指定してみよう',
                    hint: 'useStateにジェネリクス<>を用いてboolean型を指定してください',
                    test: () => isContainTextInEditor(answer3)
                }
            ]
        },
        {
            title: 'useStateで配列の型定義をしてみよう',
            tests: [
                {
                    title: 'string型の配列を指定してみよう',
                    hint: 'useStateにジェネリクス<>を用いてstring配列の型を指定してください',
                    test: () => isContainTextInEditor(answer4)
                },
                {
                    title: 'number型の配列を指定してみよう',
                    hint: 'useStateにジェネリクス<>を用いてnumber配列の型を指定してください',
                    test: () => isContainTextInEditor(answer5)
                }
            ]
        }
    ];


useStateに型をつけてみよう1

string型

number型

boolean型

引数・返り値の型定義

void型

関数に型をつけてみよう

分割代入

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

type

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

Union型

useStateに型をつけてみよう2

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

世界的にも人気なReactを使って、Webアプリケーションの作成について学んでいきます

Reactコース

【最低限】はじめてのReact×TypeScript👼🏻

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