Typescript | 함수의 반환 유형 누락에 대한 경고(ESLint

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에 대해 읽어야 하는데, 현재 전혀 이해가 되지 않습니다.그리고 지금 당장 약속할 수 없어요. 이것 때문에요.

리액션이 제공하는 타입을 사용하는 것을 추천합니다.반품 타입이 포함되어 있습니다.버전 16.8.0 이후의 react를 사용하고 있는 경우는, 다음의 조작을 실시합니다.

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

또는 다음과 같은 약어를 사용합니다.

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

16.8 이전 버전에서는 다음 작업을 수행합니다.

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

여기서 SFC는 "스테이트리스 기능 컴포넌트"를 나타냅니다.함수 구성요소가 더 이상 상태 비저장 상태가 아니므로 이름을 변경했습니다.

함수 반환 유형의 경우 인수 뒤에 옵니다.

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

JSX.ElementTypeScript가 추론하는 것입니다.그것은 꽤 안전한 도박입니다.

궁금하시면 TypeScript가 반환 유형으로 어떤 정보를 제공하는지 확인하실 수 있습니다.Component그러면 시그니처 전체가 표시됩니다.

@types/react를 사용하는 경우 React 컴포넌트의 반환 유형을 지정할 필요가 없습니다.이와 같은 반응 구성 요소에 대해 이 규칙을 사용하지 않도록 설정할 수 있습니다.이것을 .eslintrc.js에 추가합니다.

  overrides: [
    {
      files: ['*.jsx', '*.tsx'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': ['off'],
      },
    },
  ],

보통 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;

이 규칙은 함수에서 반환되는 값이 예상된 유형임을 확인하는 것을 목적으로 합니다.

다음 패턴은 경고로 간주됩니다.

문제:

// Should indicate that no value is returned (void)
function test() {
   return;
}

 // Should indicate that a number is returned
 var fn = function () {
   return 1;
 };

 // Should indicate that a string is returned
 var arrowFn = () => 'test';

 class Test {
   // Should indicate that no value is returned (void)
   method() {
     return;
  }
}

솔루션:

// No return value should be expected (void)
function test(): void {
  return;
}

// A return value of type number
 var fn = function (): number {
  return 1;
};

// A return value of type string
var arrowFn = (): string => 'test';

class Test {
  // No return value should be expected (void)
  method(): void {
    return;
  }
}

링크 : https://github.com/typescript-eslint/typescript-eslint/blob/v4.22.0/packages/eslint-plugin/docs/rules/explicit-function-return-type.md

언급URL : https://stackoverflow.com/questions/54814753/typescript-warning-about-missing-return-type-of-function-eslint