Leanote's Blog

const ForwardTable = React.forwardRef(InternalTable) as <RecordType extends object = any>(
  props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLDivElement> },
) => React.ReactElement;
// so u can use
<Table<{id: string, b: number}>  />

type InputRefType<T> = T extends React.Ref<infer ElementType> ? ElementType : never;
const inputRef = useRef<HTMLInputElement>(null)
type MyInputRefType = InputRefType<typeof inputRef>
const a: React.MutableRefObject<MyInputRefType> = inputRef
a.current?.focus()

在 React 中，React.Ref，React.RefObject 和 React.MutableRefObject 是三个不同的类型。

• React.Ref 是一个泛型接口，它定义了 React 元素的类型，用于表示该元素所引用的对象的类型，例如 DOM 元素和自定义组件。

• React.RefObject<T> 是一个泛型类型，它是 React.Ref 的具体实现，用于引用可变的对象。它表示一个引用，该引用可以包含对某个具体对象的引用，并且可以通过 current 属性访问引用对象。在大多数情况下，当我们需要引用 DOM 元素时，我们使用 React.RefObject。

• React.MutableRefObject<T> 也是一个泛型类型，它是 React.RefObject 的子类型，它提供了一种访问当前引用的可变版本。current 属性是一个可变的对象，可以通过它来更改当前引用指向的对象。在某些情况下，例如使用 useRef 创建引用对象时，可能需要使用 React.MutableRefObject。

综上所述，React.Ref 是一个泛型接口，React.RefObject 是它的具体实现，并且用于引用不可变对象，而 React.MutableRefObject 是 React.RefObject 的子类型，它提供了访问该引用的可变版本。通常情况下，我们使用 React.RefObject 来引用 DOM 元素，在某些情况下，可能需要使用 React.MutableRefObject。

箭头函数在.tsx添加泛型报错

如:

// a.tsx
// 箭头函数添加泛型报错(Error: JSX element ‘T’ has no corresponding closing tag.ts(17008))
const foo = <T>(props: T)=> void

原因: 因为泛型的语法与 JSX 的语法冲突，导致 TS 解析成 JSX 而产生 unexpected token 的问题

解决:
1. 不要写在 .tsx 文件里面就不会报错
2. 在后面加一个逗号就能正确解析了
3.

const foo = <T,>(props: T)=> void

https://zhuanlan.zhihu.com/p/457217602
React TypeScript 速查表

获得组件的props类型

React.ComponentProps<typeof Button>

TS内置类型

ConstructorParameters ：类构造函数参数类型的元组
Exclude：将一个类型从另一个类型排除
Extract：选择可分配给另一类型的子类型
InstanceType：从一个新类构造函数中获得的实例类型
NonNullable：从类型中排除空和未定义
Parameters：函数的形参类型的元组
Partial：使对象中的所有属性都是可选的
Readonly：将对象中的所有属性设置为只读
ReadonlyArray：创建给定类型的不可变数组
Pick：对象类型的一种子类型，包含其键的子集
Record：从键类型到值类型的映射
Required：使对象中的所有属性都是必需的
ReturnType：函数的返回类型

any

当我们将某个变量定义为 any 类型后，TypeScript 将会跳过对这个变量的类型检查

unknown

TypeScript 在3.0版本引入了 unknown 类型，它可以理解为类型安全的 (type-safe)any

• 任何类型都可以赋值给 unknown 类型的对象
• unknown 类型的对象不可以直接赋值给其它非 unknown 或 any 类型的对象，并且不可以访问上面的任何属性

never

never 就是 TypeScript 的底部类型

• never 类型只接受 never 类型的对象, any 也不接受
• never 会从联合类型中移除，类似于将零和其他数字相加时结果等于该数字。即 type Res = never | string // string
• never 会覆盖交叉类型中的其他类型，类似于零乘其他数字时结果等于零。即 type Res = never & string // never

void

void 其实可以理解为 null 和 undefined 的联合类型，它表示空值

在tsx下使用

默认情况下，我们不能在函数组件上使用 ref 属性，因为它们没有实例。

如果要在函数组件中使用 ref，可以使用 forwardRef 包裹组件函数使用（可与 useImperativeHandle 结合使用）。

被 forwardRef 包裹的组件函数除 props，还要多传入第二个参数：ref，即从外部传入的 ref。

useImperativeHandle 接收三个参数，第一个是 forwardRef 传入的 ref；第二个参数是 handle 函数，返回要向外暴露的值，通常是对象；第三个参数是依赖数组，根据依赖变化执行更新，非必需参数。

import { useRef, forwardRef, Ref, useImperativeHandle, ElementRef, useEffect } from "react";
// 组件，有两种定义类型的方式
// 组件1，一种是使用 forwardRef 的泛型
// forwardRef 泛型第一个参数是 Ref 类型，
// 第二个参数是 props 类型，不传时默认类型为{}，
// 注意，forwardRef 泛型与内部包裹函数的参数顺序恰恰相反，易造成歧义
const Component1 = forwardRef<HTMLInputElement, {}>((props, ref) => <input ref={ref} />);
// 组件2，另一种是是在函数参数上直接定义类型, **该方式验证有效**
// 注意，在函数参数上定义类型时，ref 参数类型需要使用Ref泛型包裹，而 forwardRef 泛型则不需要
const type useImperativeHandle返回的类型 = React.Ref<{
    sayHello: () => void
}>
const Component2 = forwardRef(
  // ref 类型使用了 Ref 泛型包裹
  (props: {}, ref: useImperativeHandle返回的类型) => {
    // ref 为第一个参数，返回带有 sayHello 方法对象的函数为第二个参数
    us

Type ‘undefined’ is not assignable to type ‘Function’.

null 和 undefined 是其它类型（包括 void）的子类型，可以赋值给其它类型（如：数字类型），赋值后的类型会变成 null 或 undefined
使用第三方/自己的代码声明里没有定义 null | undefined, 可强制转换值的类型

语法

<类型>值

或者(tsx中只能使用这种方式)

值 as 类型