React+TypeScript+eslintのWarningを解消したいのですが、無名関数コンポーネントの返り値が分かりません。

Question

発生している問題

以下のようなWarningが出てしまいます。

  8:3  warning  Missing return type on function  @typescript-eslint/explicit
-function-return-type

const Btn = (props: Props) => {
  return (
    <button onClick={props.onClickFunction} className="btn">
      {props.text}
    </button>
  );
};

render()の場合、返り値はJSXオブジェクト。との事なのでobjectを指定するとこのWarningを解消することができました。しかしこの形式のコンポーネントにobjectを指定すると以下のようなエラーが発生します。

const Btn = (props: Props): object => {
  return (
    <button onClick={props.onClickFunction} className="btn">
      {props.text}
    </button>
  );
};

      TS2605: JSX element type 'object' is not a constructor function for JS
X elements.

Answer 1

Virtual DOM (<button...> など) を返すのであれば JSX.Element ですけど、その配列を返すこともできますし、null を返す場合もあります。ので、関数コンポーネントの型は次のように書くのがお勧めです。

// React.FC<P> は (props: P) => JSX.Element|その他いろいろ という型です。
const Btn: React.FC<Props> = (props) => { ... };

// props は使わずに、各要素を分割代入するのがお勧めです。
const Btn: React.FC<Props> = ({ x, y, z }) => { ... };

// Props が空の場合は、<Props> は省略できます。
const Btn: React.FC = () => { ... };

---

えっと、Props の型はこんな感じですよね。

interface Props {
  text: string;
  onClickFunction: (e: React.MouseEvent<HTMLButtonElement>) => void;
};

これで行けませんか？

const Btn: React.FC<Props> = ({ text, onClickFunction }) => {
  return (
    <button onClick={onClickFunction} className="btn">
      {text}
    </button>
  );
};

Comments

[退会済みユーザー]

ありがとうございます。ただ代わりに、以下のようなエラーが発生してしまいました。
10:28 error 'onClickFunction' is missing in props validation react/prop
-types
11:14 error 'text' is missing in props validation react/prop
-types

[退会済みユーザー]

ありがとうございます!!これでいけました！！
ただ、なぜonClickFunctionが(e: React.MouseEvent…)になるのかが分かりません。これはどのようにして調べるのですか?

[退会済みユーザー]

もう一度コンパイルしてみると、
10:28 error 'onClickFunction' is missing in props validation react/prop
-types
11:14 error 'text' is missing in props validation react/prop
-types
のエラーが出ました。どこか間違っているのでしょうか?
```
import * as React from "react";

interface Props {
text: string;
onClickFunction: (e: React.MouseEvent<HTMLButtonElement>) => void;
};

const Btn: React.FC<Props> = ({ text, onClickFunction }) => {
return (
<button onClick={onClickFunction} className="btn">
{text}
</button>
);
};

export default Btn;

```

### 20:20追記
prop-typesを追加することで解消できる、という事は調べがついたのですが、どのようにしたら良いのかが分かりません。
以下のようにしてみた所、コンパイル時にエラーが発生しました。

[退会済みユーザー]

Btn.propTypes = {
text: PropTypes.string,
onClickFunction: PropTypes.func,
};

ERROR in \src\components\atoms\Btn.tsx
./src/components/atoms/Btn.tsx
[tsl] ERROR in フォルダ\src\components\atoms\Btn.tsx(2,8)
TS1192: Module '"フォルダ\node_modules\@types\
prop-types\index"' has no default export.

Answer 2

こちらを参考に、

const Btn = (props: Props): JSX.Element => {};

としたらWarningは消えました、

Comments

[退会済みユーザー]

https://ginpen.com/2019/08/06/eslint-for-react-in-typescript/
こちらでReact.FCの警告を無視する方法が書いてあり、実際に無視することができました。
しかしリンク先にはそれでも良しとありますが、どのような悪影響があるのか不明