web-dev-qa-db-ja.com

Typescript | ESLint関数の戻り型の欠落に関する警告

REACT-STATELESS-COMPONENT、TypeScriptを使用するプロジェクト内。それは言って、それはエラーを持っています

Missing return type on function.eslint(@TypeScript-eslint/explicit-function-return-type)

それが私に何をして欲しいのか分かりません。これが私のコードです：

import React, { Fragment} from 'react';
import IProp from 'dto/IProp';

export interface Props {
  prop?: IProp;
}

const Component = <T extends object>({ prop }: Props & T) => (
  <Fragment>
    {prop? (
      <Fragment>
        Some Component content..
      </Fragment>
    ) : null}
  </Fragment>
);

LicenseInfo.defaultProps: {};

export default Component;

私が何をする必要があるか教えてもらえますか？ TSについて読む必要がありますが、現在はまったく理解できません。そして、私は今のところこの原因を犯すことができません。

javascriptreactjstypescripttypeseslint
10
Dimitris Efst

反応によって提供されるタイプを使用することをお勧めします。戻り値の型が含まれます。最新の反応バージョン（16.8.0以降）を使用している場合は、次のようにします。

const Component: React.FunctionComponent<Props> = (props: Props) => (

16.8より前は、代わりに次のようにします。

const Component: React.SFC<Props> = (props: Props) => (

SFCは「ステートレス機能コンポーネント」を表します。関数コンポーネントは必ずしもステートレスである必要がないため、名前が変更されました。

12
Nicholas Tower

関数の戻り値の型の場合、引数の後に配置されます。

({ prop }: Props & T): JSX.Element => {}

JSX.ElementはTypeScriptが推測するものであり、かなり安全な賭けです。

興味があれば、Componentにカーソルを合わせると、TypeScriptが戻り値の型として推測するものを確認できるはずです。これにより、署名全体が表示されます。

10
Robbie Milejczak

これは通常、TypeScriptを使用してコンポーネントを宣言する方法です。

import * as React from 'react';

type MyComponentProps = {
  myStringProp: String,
  myOtherStringProp: String
};

const MyComponent: React.FunctionComponent<MyComponentProps> = ({ myStringProp, myOtherStringProp }): JSX.Element => {
  return (
    <div>
      <h1>This is My Component</h1>
    </div>
  );
};


export default MyComponent;
4
Softmixt