type

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

//問題1. 型エイリアスを宣言し、propsに直接型をつけてみよう
// name: string型, age: number型で定義してください
type User = { name: string; age: number }

//問題1. 型エイリアスを宣言し、propsに直接型をつけてみよう
const UserTypeComponent = (props: User) => {
  return (
    <div>
      名前: {props.name} 年齢:{props.age}
    </div>
  )
}

//問題2. 型エイリアスを用いて、propsを分割代入で受け取る場合の型をつけてみよう
const UserTypeComponent2 = ({ name, age }: User) => {
  return (
    <div>
      名前: {name} 年齢: {age}
    </div>
  )
}

export const PracticeTypeComponent = () => {
  return (
    <div>
      <UserTypeComponent name={'Bob'} age={12} />
      <UserTypeComponent2 name={'Alex'} age={18} />
    </div>
  )
}

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


code-lesson

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

//問題1. 型エイリアスを宣言し、propsに直接型をつけてみよう
// name: string型, age: number型で定義してください
type User = {}

//問題1. 型エイリアスを宣言し、propsに直接型をつけてみよう
const UserTypeComponent = (props) => {
  return (
    <div>
      名前: {props.name} 年齢:{props.age}
    </div>
  )
}

//問題2. 型エイリアスを用いて、propsを分割代入で受け取る場合の型をつけてみよう
const UserTypeComponent2 = ({ name, age }) => {
  return (
    <div>
      名前: {name} 年齢: {age}
    </div>
  )
}

export const PracticeTypeComponent = () => {
  return (
    <div>
      <UserTypeComponent name={'Bob'} age={12} />
      <UserTypeComponent2 name={'Alex'} age={18} />
    </div>
  )
}

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



    // =======================
    // テストコード
    // =======================
    const answer1 = 'type User = { name: string; age: number }';
    const answer2 = 'const UserTypeComponent = (props: User) => {';
    const answer3 = 'const UserTypeComponent2 = ({ name, age }: User) => {';
    const questions = [
        {
            title: '型エイリアスを宣言し、propsに直接型をつけてみよう',
            tests: [
                {
                    title: '`name: string型; age: number型`のプロパティを持つオブジェクトのUser型の型エイリアスを宣言してください',
                    hint: 'type 型名 = { プロパティ名: string; プロパティ名: number }のように型を指定しましょう',
                    test: () => isContainTextInEditor(answer1)
                },
                {
                    title: 'propsに型エイリアスをつけて型を指定してください',
                    hint: '関数`UserTypeComponent`のpropsに`(props: 型名)`のように型を指定しましょう',
                    test: () => isContainTextInEditor(answer2)
                }
            ]
        },
        {
            title: '型エイリアスを用いて、propsを分割代入で受け取る場合の型をつけてみよう',
            tests: [
                {
                    title: '関数`UserTypeComponent2`の引数への分割代入に型エイリアスを指定してください',
                    hint: '関数`UserTypeComponent2`の引数に分割代入をし、`({引数名1, 引数名2}: 型名)`のように型を指定しましょう',
                    test: () => isContainTextInEditor(answer3)
                }
            ]
        }
    ];


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

string型

number型

boolean型

引数・返り値の型定義

void型

関数に型をつけてみよう

分割代入

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

ジェネリクス

useStateに型をつけてみよう1

Union型

useStateに型をつけてみよう2

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

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