Typescriptの特殊な型定義のメモ

はじめに

Javascript、Reactを勉強するにあたり、型定義が必要なTypescriptを利用しているが、何を定義したらよいか難しい場合があるので、調べた内容を記載する。

型定義のメモ

children: ReactNode;

childrenはReactNode型を指定する。

利用例

import {ReactNode, VFC } from "react";

type Props = {
    children: ReactNode;
};

export const MyButton: VFC<Props> = (props) => {
    const { children} = props;
    return (
        // 省略
    );
};

onClick関数

onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

onChange関数

 onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

自分で型を定義する場合

typesフォルダを作成し、その中に大文字始まりの型名をファイル名としてファイル作成する。拡張子は.tsとする。

src
├── App.tsx
├── components
├── index.css
├── index.tsx
└── types
    └── MessageContent.ts

MessageContent.ts

export type MessageContent = {
    name: string;
    message : string;
    postat : string;
}

実装の例

onClickとonChangeの例

メッセージを入力し、「送る」ボタンを押したら送信するフォーム。

App.tsx

import { useState } from "react";
import { InputArea } from "./molecules/InputArea";
import "./styles.css";

export default function App() {
  // インプットエリアに入力するメッセージ
  const [message, setMessage] = useState("");

  // インプットエリアの文字が変更されたときの処理
  const onChangeMessage = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMessage(e.target.value);
  };

  // 「送る」ボタンを押したときの処理。サーバにmessageを送信する。
  const onClickSend = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    // メッセージを送る処理
    console.log(`messageを送る処理：${message}`);
    setMessage("");
  };

  return (
    <>
      <InputArea
        text={message}
        onChange={onChangeMessage}
        onClick={onClickSend}
      />
    </>
  );
}

/molecules/InputArea.tsx

import { VFC } from "react";

type Props = {
  text: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
};

export const InputArea: VFC<Props> = (props) => {
  const { text, onChange, onClick } = props;
  return (
    <>
      <input
        value={text}
        onChange={onChange}
        placeholder="メッセージを入力してください"
      />
      <button onClick={onClick}>送る</button>
    </>
  );
};

おわりに

今のところ出てきたのはこれくらいだが、 JavaScript特有の型が様々あるので、調べるごとにメモする予定。