分割代入

import React from 'react'
import ReactDOM from 'react-dom'

//問題1. オブジェクトでpropsに直接型をつけてみよう
// id: number型, title: string型で定義してください
const PropsTypeComponent = (props: { id: number; title: string }) => {
  return (
    <div>
      {props.id}: {props.title}
    </div>
  )
}

//問題2. 分割代入を使ってオブジェクトで型をつけてみよう
// プロパティの中身はid: number型, title: string型で定義してください。
const PropsTypeComponent2 = ({ id, title }: { id: number; title: string }) => {
  return (
    <div>
      {id}: {title}
    </div>
  )
}

export const PracticeTypeComponent = () => {
  return (
    <div>
      <PropsTypeComponent id={1} title={'propsに直接型をつけてみよう'} />
      <PropsTypeComponent2 id={2} title={'分割代入を使って型をつけてみよう'} />
    </div>
  )
}

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


code-lesson

import React from 'react'
import ReactDOM from 'react-dom'

//問題1. オブジェクトでpropsに直接型をつけてみよう
// id: number型, title: string型で定義してください
const PropsTypeComponent = (props) => {
  return (
    <div>
      {props.id}: {props.title}
    </div>
  )
}

//問題2. 分割代入を使ってオブジェクトで型をつけてみよう
// プロパティの中身はid: number型, title: string型で定義してください。
const PropsTypeComponent2 = ({ id, title }) => {
  return (
    <div>
      {id}: {title}
    </div>
  )
}

export const PracticeTypeComponent = () => {
  return (
    <div>
      <PropsTypeComponent id={1} title={'propsに直接型をつけてみよう'} />
      <PropsTypeComponent2 id={2} title={'分割代入を使って型をつけてみよう'} />
    </div>
  )
}

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



    // =======================
    // テストコード
    // =======================
    const answer1 = 'const PropsTypeComponent = (props: { id: number; title: string }) => {';
    const answer2 = 'const PropsTypeComponent2 = ({ id, title }: { id: number; title: string }) => {';
    const questions = [
        {
            title: 'オブジェクトでpropsに直接型をつけてみよう',
            tests: [
                {
                    title: '関数`PropsTypeComponent`のpropsに`id: number型, title: string型`をオブジェクトで型を指定してください',
                    hint: '関数`PropsTypeComponent`のpropsに`(props: {引数名: 型, 引数名: 型})`のように型を指定しましょう',
                    test: () => isContainTextInEditor(answer1)
                }
            ]
        },
        {
            title: '分割代入を使ってオブジェクトで型をつけてみよう',
            tests: [
                {
                    title: '関数`PropsTypeComponent2`の引数に分割代入`id: number型, title: string型`で型を指定してください',
                    hint: '関数`PropsTypeComponent2`の引数に分割代入をし、`({引数名1, 引数名2}: {引数名1: 型, 引数名2: 型 })`のように型を指定しましょう',
                    test: () => isContainTextInEditor(answer2)
                }
            ]
        }
    ];


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

string型

number型

boolean型

引数・返り値の型定義

void型

関数に型をつけてみよう

type

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

ジェネリクス

useStateに型をつけてみよう1

Union型

useStateに型をつけてみよう2

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

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

Reactコース

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

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