Category - TypeScript

2023-09-25 08:36:43    15    0    0
  1. const ForwardTable = React.forwardRef(InternalTable) as <RecordType extends object = any>(
  2. props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLDivElement> },
  3. ) => React.ReactElement;
  4. // so u can use
  5. <Table<{id: string, b: number}> />
2023-06-09 17:41:49    9    0    0
  1. type InputRefType<T> = T extends React.Ref<infer ElementType> ? ElementType : never;
  2. const inputRef = useRef<HTMLInputElement>(null)
  3. type MyInputRefType = InputRefType<typeof inputRef>
  4. const a: React.MutableRefObject<MyInputRefType> = inputRef
  5. a.current?.focus()
2023-06-09 17:38:17    9    0    0

React 中,React.RefReact.RefObjectReact.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.MutableRefObjectReact.RefObject 的子类型,它提供了访问该引用的可变版本。通常情况下,我们使用 React.RefObject 来引用 DOM 元素,在某些情况下,可能需要使用 React.MutableRefObject

2023-03-23 16:57:34    13    0    0

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

如:

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

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

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

  1. const foo = <T,>(props: T)=> void
2023-03-21 17:04:57    9    0    0
2023-03-21 06:59:20    15    0    0

获得组件的props类型

React.ComponentProps<typeof Button>

TS内置类型

  1. ConstructorParameters :类构造函数参数类型的元组
  2. Exclude:将一个类型从另一个类型排除
  3. Extract:选择可分配给另一类型的子类型
  4. InstanceType:从一个新类构造函数中获得的实例类型
  5. NonNullable:从类型中排除空和未定义
  6. Parameters:函数的形参类型的元组
  7. Partial:使对象中的所有属性都是可选的
  8. Readonly:将对象中的所有属性设置为只读
  9. ReadonlyArray:创建给定类型的不可变数组
  10. Pick:对象类型的一种子类型,包含其键的子集
  11. Record:从键类型到值类型的映射
  12. Required:使对象中的所有属性都是必需的
  13. ReturnType:函数的返回类型
2023-03-20 16:58:27    8    0    0

any

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

unknown

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

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

never

never 就是 TypeScript 的底部类型

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

void

void 其实可以理解为 nullundefined 的联合类型,它表示空值

2023-02-11 19:06:59    56    0    0

在tsx下使用

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

如果要在函数组件中使用 ref,可以使用 forwardRef 包裹组件函数使用(可与 useImperativeHandle 结合使用)。

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

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

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

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

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

语法

  1. <类型>值

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

  1. as 类型
2022-12-25 09:50:19    6    0    0
1/2