web-dev-qa-db-fra.com

Typographie | Avertissement concernant le type de fonction de retour manquant, ESLint

J'ai un REACT-STATELESS-COMPONENT, dans un projet avec TypeScript. Il a une erreur, disant que

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

Je ne sais pas trop ce qu'il veut que je fasse. Voici mon code:

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;

Pouvez-vous me dire ce que je dois faire. J'ai besoin de lire sur TS, mais actuellement je ne comprends pas du tout. Et je ne peux pas m'engager maintenant à cause de cela.

javascriptreactjstypescripttypeseslint
10
Dimitris Efst

Je recommanderais d'utiliser les types fournis par react; ils incluront le type de retour. Si vous utilisez la dernière version de React (16.8.0 ou ultérieure), procédez comme suit:

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

Avant la 16.8, vous feriez plutôt:

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

Où SFC signifie "composant fonctionnel sans état". Ils ont changé le nom, car les composants de fonction ne sont plus nécessairement sans état.

12
Nicholas Tower

Pour un type de retour de fonction, il va après les arguments:

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

JSX.Element est ce que TypeScript va inférer, c'est une valeur sûre.

Si vous êtes curieux, vous devriez pouvoir voir ce que TypeScript déduit comme type de retour en survolant Component, cela affichera la signature entière.

10
Robbie Milejczak

Voici comment je déclare généralement un composant à l'aide de 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