63069


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

下記は子コンポーネントにstateとsetStateを渡しているデモです。  
[demo](https://codesandbox.io/s/magical-
lichterman-x6clj?fontsize=14&hidenavigation=1&theme=dark)  
デモでは子コンポーネントの引数の型はtypeで記述しています。

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

* * *

## ソースコード

[code]

    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)} />
        </>
      );
    };
    
[/code]

* * *

## 試したこと

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

[code]

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

> Did not expect a type annotation here.
[code]

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

> Did not expect a type annotation here.
[code]

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

> Unexpected token, expected ";"

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


CC BY-SA 4.0
2020-02-15T09:16:37.477
63067
2020-02-15T10:31:58.867
32275
question
javascript reactjs typescript
typeやinterfaceを使用せず、複数ある引数に型を付与したい。


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

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

[code]

    const Child = (props: { toggle: boolean, setToggle: (value: boolean) => void }) => {
      const { toggle, setToggle } = props;
    
      return (
        <>
          <input type="checkbox" onClick={() => setToggle(!toggle)} />
        </>
      );
    };
    
[/code]

**`React.FC<>`を使った場合**

[code]

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


CC BY-SA 4.0
2020-02-15T10:21:44.833
63069
2020-02-15T10:31:58.867
2020-02-15T10:31:58.867
3068
3068
63067
answer