Question

您可以使用以下代码在TypeScript中定义React功能组件的类型：

export const Component: React.FC = () => {
  return // Stuff
};

您如何对非箭头功能执行相同的操作？

function Component() {
  return // Stuff
}

在实践上有区别吗？这个流行的备忘单没有覆盖它，所以我想知道是否有理由不使用该语法？

https://github.com/typescript-cheatsheets/react-typescript-cheatsheet

Answer 1

在某些情况下，使用const声明component时，会提供更好的类型支持。要了解这些情况，您可以查看React.FC类型：

type FC<P = {}> = FunctionComponent<P>;
interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;

}

由于react组件（甚至是函数组件）不仅仅是一个普通函数，因此-为 component 本身指定精确类型可以为您提供更好的类型推断：


function FooAsFunc({ children }) { // children has 'any' type
  return 1234
}

const FooAsConst: React.FC = ({ children }) => {
  return 1234 // type error: typescript knows that 1234 is not valid react component return type
}

FooAsFunc.displayName = new Date()
FooAsConst.displayName = new Date() // type error: 'displayName' suppose to be of a type string

最后，也可以通过function声明来实现相同类型的安全性，但是它只需要更多代码。

Answer 2

如果您要使用函数的完整类型来键入非箭头函数，则可以使用类似以下内容的方法（typescript documentation）：

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

在您的情况下：

const MyComponent: React.FC = function() {
  return <div></div>;
};

Answer 3

您如何对非箭头功能执行相同的操作？

import * as React from 'react';

function NonFatArrow(): React.ReactElement {
    return (
      <>
        Non-fat-arrow function
      </>
    );
}

const FatArrow: React.FunctionComponent = _props => {
  return (
    <section>
      <NonFatArrow/>
    </section>
  );
};

练习上有区别吗？

除了React和Typescript之外，在ES6中，粗箭头功能会捕获包括this在内的一些东西，并且会随身携带捕获内容。因此，如果有成千上万个这样的功能，那么捕获就会产生开销。

回到React和Typescript，this未在React.FunctionComponent中使用，但是如果您选择的Typescript编译器转换为ES6，则将带有带有捕获功能的粗箭头功能。

因此，这全部取决于所选的编译器及其设置。使用Typescript编译器，如果tsconfig.json中有"target": "es5"，则FatArrow组件将被转换为ES5 function。将设置更改为"target": "es6"可确保将FatArrow转换为箭头功能。将Babel用作转译器，您的行驶里程可能会有所不同。

为TypeScript定义非箭头React功能组件吗？

3 个答案: