Typescript - 使用泛型扩展具有联合类型属性的接口

阿尔贝托·里维拉

我有一个这样的界面

interface Test {
  values: string[] | number[] | Date[]
  // more properties
}

我想创建另一个使类型特定的接口。我正在尝试的是:

interface TestWithType<T extends string | number | Date> extends Test {
  values: T[];
}

但这失败并显示错误Type 'string' is not assignable to type 'Date'

什么是正确的语法?如果属性values不是数组,这将正常工作

interface Test {
  values: string | number | Date
}

interface TestWithType<T extends string | number | Date> extends Test {
  values: T;
}
杰卡兹

正如您所注意到的,您不能通过string[] | number[] | Date[]apply 制作类型为 的元素数组来获得string | number | Date由于(string | number | Date)[]比 更宽string[] | number[] | Date[],您会收到编译器错误,因为您无法扩大子类型的属性。

@MattMcCutchen 的回答提供了一些解决方法。这是另一种方式:

如果您有一个类似的联合string | number | Date并希望以编程方式将其转换为类似数组的联合string[] | number[] | Date[],则可以使用分布条件类型

type DistributeArray<T> = T extends any ? T[] : never;

然后你可以定义TestWithTypeDistributeArray

// no error:
interface TestWithType<T extends string | number | Date> extends Test {
  values: DistributeArray<T>;
}

并验证它的行为是否符合您的预期:

declare const testWithString: TestWithType<string>
testWithString.values; // string[]

declare const testWithDate: TestWithType<Date>
testWithDate.values; // Date[]

declare const testWithStringOrNumber: TestWithType<string | number>
testWithStringOrNumber.values; // string[] | number[]

希望有帮助。祝你好运!


编辑:

作为一个相关的问题,有没有办法禁止将联合类型传递给泛型?(如要求最多只指定字符串、数字或日期之一)

是的,这是可能的,但它需要以一种让我不舒服的方式滥用类型系统。如果您不需要,我建议您不要这样做。这里是:

type DistributeArray<T> = T extends any ? T[] : never;
type NotAUnion<T> = [T] extends [infer U] ? U extends any ? 
  T extends U ? unknown : never : never : never
type ErrorMsg = "NO UNIONS ALLOWED, PAL"
interface TestWithType<T extends (
  unknown extends NotAUnion<T> ? string | number | Date : ErrorMsg
)> extends Test {
  values: DistributeArray<T>
}

declare const testWithString: TestWithType<string> // okay

declare const testWithDate: TestWithType<Date> // okay

declare const testWithStringOrNumber: TestWithType<string | number> // error:
// 'string | number' does not satisfy the constraint '"NO UNIONS ALLOWED, PAL"'.

如果不是联合,则该类型NotAUnion<T>评估为unknown(顶部类型)T...否则评估为never(底部类型)。然后,在TestWithType类型T被限制为 时unknown extends NotAUnion<T> ? string | number | Date : ErrorMsg,几乎没有绕过针对循环引用的规则。如果你通过一个非联合作为T,它会变得T extends string | number | Date和以前一样。如果你传递一个联合,它就会变成T extends ErrorMsg, 一个字符串文字类型。由于联合永远不会扩展字符串文字,它会失败......并且您得到的错误消息将涉及ErrorMsg,因此它应该足以让开发人员意识到发生了什么。它有效,但它是非常非常粗略的东西。不过是你要求的。

再次祝你好运!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

TypeScript泛型:React中具有联合类型的道具

来自分类Dev

TypeScript泛型:React中具有联合类型的道具

来自分类Dev

在TypeScript中使用泛型扩展接口

来自分类Dev

Typescript:泛型,使用泛型扩展类型

来自分类Dev

如何使用泛型缩小TypeScript联合类型

来自分类Dev

创建仅使用字符串键扩展接口的 TypeScript 泛型类型

来自分类Dev

Typescript我如何扩展使用泛型的接口?

来自分类Dev

如何在TypeScript中使用具有接口联合类型的实例?

来自分类Dev

Typescript泛型扩展类和接口

来自分类Dev

使用 TypeScript checkJs 在 JSDoc 中扩展泛型类型的方法?

来自分类Dev

Typescript中具有泛型的子类型约束

来自分类Dev

Typescript从具有泛型类型的对象索引调用函数

来自分类Dev

具有类型依赖参数的 TypeScript 泛型方法

来自分类Dev

具有相同类型属性的接口或类型的 Typescript 简写

来自分类Dev

即使具有相同的数据类型,也无法在具有数据属性的Typescript中扩展接口

来自分类Dev

在 Typescript 中使用具有联合类型的 Mixin

来自分类Dev

Typescript联合类型:处理接口

来自分类Dev

生成生成器功能类型的接口的Typescript泛型

来自分类Dev

使用泛型+联合类型从类中实现抽象方法时,类型安全性问题[Typescript]

来自分类Dev

在TypeScript中,如何获取具有多个类型参数的方法中的泛型类型参数?

来自分类Dev

泛型类型推断的 Typescript 泛型

来自分类Dev

我可以告诉TypeScript泛型类型具有构造函数吗?

来自分类Dev

每个项目的键之间具有相同泛型的Typescript数组式类型

来自分类Dev

具有泛型和谓词的Typescript数组原型,并允许推断类型

来自分类Dev

具有泛型类型的 angular2/typescript 类继承

来自分类Dev

使用Typescript泛型从AngularFire的已定义结构创建接口

来自分类Dev

TypeScript:从接口动态创建联合类型

来自分类Dev

Typescript-联合类型和泛型类型引发不兼容错误

来自分类Dev

在vscode扩展中使用来自javascript的Typescript泛型

Related 相关文章

  1. 1

    TypeScript泛型:React中具有联合类型的道具

  2. 2

    TypeScript泛型:React中具有联合类型的道具

  3. 3

    在TypeScript中使用泛型扩展接口

  4. 4

    Typescript:泛型,使用泛型扩展类型

  5. 5

    如何使用泛型缩小TypeScript联合类型

  6. 6

    创建仅使用字符串键扩展接口的 TypeScript 泛型类型

  7. 7

    Typescript我如何扩展使用泛型的接口?

  8. 8

    如何在TypeScript中使用具有接口联合类型的实例?

  9. 9

    Typescript泛型扩展类和接口

  10. 10

    使用 TypeScript checkJs 在 JSDoc 中扩展泛型类型的方法?

  11. 11

    Typescript中具有泛型的子类型约束

  12. 12

    Typescript从具有泛型类型的对象索引调用函数

  13. 13

    具有类型依赖参数的 TypeScript 泛型方法

  14. 14

    具有相同类型属性的接口或类型的 Typescript 简写

  15. 15

    即使具有相同的数据类型,也无法在具有数据属性的Typescript中扩展接口

  16. 16

    在 Typescript 中使用具有联合类型的 Mixin

  17. 17

    Typescript联合类型:处理接口

  18. 18

    生成生成器功能类型的接口的Typescript泛型

  19. 19

    使用泛型+联合类型从类中实现抽象方法时,类型安全性问题[Typescript]

  20. 20

    在TypeScript中,如何获取具有多个类型参数的方法中的泛型类型参数?

  21. 21

    泛型类型推断的 Typescript 泛型

  22. 22

    我可以告诉TypeScript泛型类型具有构造函数吗?

  23. 23

    每个项目的键之间具有相同泛型的Typescript数组式类型

  24. 24

    具有泛型和谓词的Typescript数组原型,并允许推断类型

  25. 25

    具有泛型类型的 angular2/typescript 类继承

  26. 26

    使用Typescript泛型从AngularFire的已定义结构创建接口

  27. 27

    TypeScript:从接口动态创建联合类型

  28. 28

    Typescript-联合类型和泛型类型引发不兼容错误

  29. 29

    在vscode扩展中使用来自javascript的Typescript泛型

热门标签

归档