1

typeやinterfaceを使用せず、複数ある引数に型を付与しする方法をご教示いただけないでしょうか。

下記は子コンポーネントにstateとsetStateを渡しているデモです。
demo
デモでは子コンポーネントの引数の型はtypeで記述しています。

引数が複数の場合かつ少ない場合だとtypeやinterfaceで定義するのは冗長かと思い、typeやinterfaceを使用せずに型を付与したいです。


ソースコード

import * as React from "react";

export default function App() {
  const [toggle, setToggle] = React.useState(false);

  return (
    <>
      <h1>demo</h1>
      <p>{toggle ? "true" : "false"}</p>
      <hr />
      <Child toggle={toggle} setToggle={setToggle} />
    </>
  );
}

type ChildProps = {
  toggle: boolean;
  setToggle: (value: boolean) => void;
};

const Child: React.FC<ChildProps> = ({ toggle, setToggle }) => {
  return (
    <>
      <input type="checkbox" onClick={() => setToggle(!toggle)} />
    </>
  );
};

試したこと

「typescript 引数 複数」「typescript props 複数」などで検索してみたものの、この件について触れている記事やページを見つけられなかったため、下記のような書き方を試しました。

const Child: React.FC = (toggle: boolean, {setToggle} : boolean, (value:string))

Did not expect a type annotation here.

const Child: React.FC = ({toggle}: boolean, {setToggle} : boolean, (value:string)) => {

Did not expect a type annotation here.

const Child: React.FC = ({toggle, setToggle} : {boolean, (value: string) => void})

Unexpected token, expected ";"

それぞれ上記のエラーが表示されました。

1 件の回答 1

3

つまり実現されたいことは以下のようなコードでしょうか?

React.FC<>を使わない場合

const Child = (props: { toggle: boolean, setToggle: (value: boolean) => void }) => {
  const { toggle, setToggle } = props;

  return (
    <>
      <input type="checkbox" onClick={() => setToggle(!toggle)} />
    </>
  );
};

React.FC<>を使った場合

const Child: React.FC<{ toggle: boolean, setToggle: (value: boolean) => void }> = ({ toggle, setToggle }) => {
  return (
    <>
      <input type="checkbox" onClick={() => setToggle(!toggle)} />
    </>
  );
};

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。