TypeScriptでReactコンポートを作成する

はじめに

• 前回発生したエラーを解消できたので、今回はTypeScriptでfunctional componentを作成してみる。 px-wing.hatenablog.com

コード

App.tsx

• 下記コードでTypeScriptを利用している箇所はReact.FCの部分のみです。
• React.FC はReact.FunctionComponentのことを指しております。

import React from 'react';
import './App.css';
import TestComponent from './components/TestComponent';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <TestComponent text="test" />
      </header>
    </div>
  );
}

export default App;

/components/TestComponent.tsxコンポーネント作成

• /components/TestComponent.tsxファイルを作成して下記のコードを記述する
• 特別な箇所はイベントの箇所で、vscodeを利用していると作成したイベントにカーソルを当てると型を表示されるので、その表示された型をイベントメソッドの型として利用する

import React, { useState } from 'react'

interface Props {
    text: string
}

interface UserDate {
    id: number;
    name: string;
}

const TestComponent: React.FC<Props> = (props) => {
    const [count, setCount] = useState<number | null>(0)
    const [user, setUser] = useState<UserDate>({id: 1, name: "Yamada Tarou"})
    const [inputDate, setInputDate] = useState("")

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setInputDate(e.target.value)
    }   

    return (
        <div>
            <h1>{props.text}</h1>
            <h1>{count}</h1>
            <h1>{user.id} {user.name}</h1>
            <input type="text" value={inputDate} onChange={handleInputChange} />
            {inputDate}
        </div>
    )
}

export default TestComponent

実際の画面

おまけ

Reactのfunctional componentのアロー関数の雛形

• vscode上でrafceと入力するとReactのfunctional componentのアロー関数版のテンプレートが出てくる

import React from 'react'

const TestComponent = () => {
    return (
        <div>
            
        </div>
    )
}

export default TestComponent