reactjs - Typescript - 从对象道具值推断泛型类型

问题描述

我读了很多，发现了类似的东西，但不是我想要的。

我想通过在对象内使用道具值来定义类型，并使用该信息来定义该对象内的其他属性。

JSX.IntrinsicElements 包括所有反应元素的定义。让我们专注于 SVG 元素circle和path这个例子。

所以让我们尝试定义类型防御：

export type svgCustomType<T extends "path" | "circle"> = {
  svgElem: T;
  svgProps?: { [key in keyof JSX.IntrinsicElements[T]]: JSX.IntrinsicElements[T] };
};

在这里，我尝试获取类型值 T（可以是“路径”或“圆”）并使用该值来定义适当的属性类型svgProps。（可以是React.SVGProps<SVGCircleElement>或React.SVGProps<SVGPathElement>

示例用法：

const test: svgCustomType = {  //Error: "Generic type 'svgCustomType' requires 1 type argument(s)", why?
  svgElem: "path",
  svgProps: {
    cx: 10,  // next step: should be error here because cx is not defined in `SVGPathElement`
  },
};

为什么我会得到Generic type 'svgCustomType' requires 1 type argument(s)？我想从svgElem价值中得到这种类型。

我只想提一下，使用const test: svgCustomType<"path"> = {...}会起作用并且cx不会被接受。

很清楚：
我不确定在打字稿中是否可能。
我正在编写一个反应库，我希望我的用户能够在输入时获得 IntelliSense 建议，如果用户运行 typescript（而不是 javascript），他也会收到类型错误。
假设我的 lib 组件具有svgHeadProptype的 prop svgCustomType。
所以我希望用户能够写：

svgHeadProp={svgElem:"path",svgProps:{...}}

并不是：

svgHeadProp<"path">={svgElem:"path",svgProps:{...}}

因为不是我所有的用户都使用打字稿（对于那些使用打字稿的人，它烦人的为 prop 指定类型）

标签： reactjstypescript

解决方案

问题是要SvgCustomTypeGeneric在类型签名中使用，您必须传递该类型参数。使用SvgCustomTypeGeneric<'path' | 'circle'>将不起作用，因为这只会允许每次出现T或者'path'它们'circle'之间没有任何依赖关系。不过可以使用的是联合类型，SvgCustomTypeGeneric<'path'> | SvgCustomTypeGeneric<'circle'>它可以从'path' | 'circle'联合中创建。

为了展示它是如何工作的，让我们将通用函数重命名为SvgCustomTypeGeneric，并将JSX.IntrinsicElements[T]其用作的类型svgProps（否则值是嵌套的，例如svgProps: cx: {cx: 10})）：

type SvgKey = 'path' | 'circle'

export type SvgCustomTypeGeneric<T extends SvgKey> = {
  svgElem: T;
  svgProps?: JSX.IntrinsicElements[T]
}

要创建类型的联合SvgCustomTypeGeneric类型，您可以使用映射类型为每个键创建一个对象SvgCustomTypeGeneric，并从中提取值：

type SvgCustomType = {[K in SvgKey]: SvgCustomTypeGeneric<K>}[SvgKey]
//  evaluates to: SvgCustomTypeGeneric<"path"> | SvgCustomTypeGeneric<"circle">

在测试它时，该cx属性没有帮助，因为它也允许在上SVGPathElement，但是该ref属性需要正确键入的值，并且可以改为使用：

const test: SvgCustomType[] = [{
    svgElem: 'path',
    svgProps: {
      cx: 10, // No error, SVGPathElement can have 'cx' properties.
      ref: createRef<SVGPathElement>(),
    },
  }, {
    svgElem: 'circle',
    svgProps: {
      cx: 10,
      ref: createRef<SVGCircleElement>(),
    },
  }, { // ERROR
    svgElem: 'circle',
    svgProps: {
      cx: 10,
      ref: createRef<SVGPathElement>(),
    },
  },
]

另一种解决方案是创建一个通用构造函数来验证对象。它更简单一些，并提供更漂亮的错误消息，但确实需要添加实际代码而不仅仅是类型：

const mkSvg =<K extends SvgKey>(x: SvgCustomTypeGeneric<K>) => x

const test = mkSvg({
  svgElem: 'circle',
  svgProps: {
    ref: createRef<SVGPathElement>(),
    // Type 'RefObject<SVGPathElement>' is not assignable to type 'LegacyRef<SVGCircleElement> 
  },
})

TypeScript 游乐场

更新：通过使用条件类型来引入类型变量并将其分布在联合上，也可以编写SvgCustomType为单行代码：

export type SvgCustomTypeOneLiner =
  SvgKey extends infer T ? T extends SvgKey ? {
    svgElem: T;
    svgProps?: JSX.IntrinsicElements[T]
  } : never : never

如果你真的想全力以赴，你甚至可以放弃对SvgKey：

type SvgCustomTypeUltimate = 
  keyof JSX.IntrinsicElements extends infer T ? T extends keyof JSX.IntrinsicElements ? {
    svgElem: T;
    svgProps?: JSX.IntrinsicElements[T]
  } : never : never

这两种类型的行为与SvgCustomType上面定义的相同。

TypeScript 游乐场

reactjs - Typescript - 从对象道具值推断泛型类型

问题描述

解决方案

推荐阅读