时间戳

首页 > 解决方案 > Typescript中泛型格式的歧义

reactjs - Typescript中泛型格式的歧义

问题描述

我遇到了以下格式的 Typescript generic：

export const Form: <FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>>(
  props: FormProps<FormValues, InitialFormValues>
) => React.ReactElement;

  1. 这是什么泛型？（是泛型类型还是泛型函数？）

  2. 如果它是泛型类型（或函数），为什么代码中没有=符号来为其赋值以及为什么被扩展的类型没有Name如下所示：

export const Form: Name<FormValues = Record<string, any>, InitialFormValues = Partial<FormValues>> = (
  props: FormProps<FormValues, InitialFormValues>
) => React.ReactElement;
  1. 一般来说，这个定义扩展的原始类型是什么？

标签： reactjstypescript

解决方案

Form是一个 React 函数组件。它是一个泛型function，它接受一个参数props并返回一个ReactElement.

参数的类型props是FormProps<FormValues, InitialFormValues>。 是描述特定类型对象FormProps的泛型。interface

该函数Form依赖于两个泛型变量FormValues和InitialFormValues，它们都作为 的泛型变量向下传递FormProps。这两个泛型都有默认类型：FormValues = Record<string, any>和InitialFormValues = Partial<FormValues>. 第二个变量 的默认类型Partial<FormValues>取决于第一个变量的实际类型FormValues。

为什么代码中没有=符号来为其赋值

我猜这是在.d.ts文件中？那是一个类型声明文件，所以它只定义了组件的签名，即。它的参数和返回类型。

在常规.ts文件中，您需要实现该函数，而不仅仅是声明它。

export const Form = <FormValues extends {} = Record<string, any>, InitialFormValues = Partial<FormValues>>(
  props: FormProps<FormValues, InitialFormValues>
): React.ReactElement => {
    return (<div/>);
};

（这extends {}只是为了阻止泛型和 JSX 标签之间的混淆）

Form不扩展任何东西，这就是为什么没有Name<...>. 基于的原始类型是函数签名。

这是一个非常基本的函数的类型：

type Add = (n: number) => number;

这是一个简单的泛型函数的类型：

type ReturnSelf = <T>(value: T) => T;

这是Form没有泛型的类型，希望它更容易理解。

type FormType = ( props: FormProps ) => React.ReactElement;

推荐阅读