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 ";"
それぞれ上記のエラーが表示されました。