在Typescript中进行类型转换：将具有统一类型字段的对象转换为数组类型。

huangapple
go评论94阅读模式
英文:

Type conversion: Convert type of Object with uniformly typed fields to Array type in Typescript

问题

如果我想将字段类型均为字符串的对象的类型转换为字符串数组类型，该怎么做？

  1. // index.d.ts
  3. const event = {
  4.   RAIN: "RAIN",
  5.   SUN: "SUN",
  6.   CLOUDY: "CLOUDY",
  7. }
  9. // 我只能使用这个
  10. export type eventType = (typeof event)[keyof typeof event]

如何将eventType转换为字符串数组类型？

EDIT：我应该补充一下，我不能控制event类型，它来自第三方。

英文:

Say I want to convert an the type of an object whose fields are uniformly typed, as string for example:

  2. // index.d.ts
  4. const event = {
  5.  RAIN: "RAIN",
  6.  SUN: "SUN",
  7.  CLOUDY: "CLOUDY",
  8. }
  10. // I can only use this
  11. export type eventType = (typeof event)[keyof typeof event]

How would I go about converting that eventType to the Array of strings type ?

EDIT : I should have added that I don't control the eventtype, it's from a third party

答案1

得分: 1

Sure, here are the translated code snippets:

  1. 你必须使用 [const assertion](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions) 来防止编译器将值的类型扩展为 `string`:
  3. ```typescript
  4. const events = {
  5.  RAIN: "RAIN",
  6.  SUN: "SUN",
  7.  CLOUDY: "CLOUDY",
  8. } as const
  10. // type EventType = {
  11. //     readonly RAIN: "RAIN";
  12. //     readonly SUN: "SUN";
  13. //     readonly CLOUDY: "CLOUDY";
  14. // }
  15. type EventType = typeof events

playground

更新

由于对象来自第三方且无法操作，我唯一想到的方法是创建另一个对象，使其满足原始对象并进行 const 断言:

  1. const myEvents ={
  2.   RAIN: 'RAIN',
  3.   SUN: 'SUN',
  4.   CLOUDY: 'CLOUDY'
  5. } as const satisfies typeof events;
  7. type EventType = typeof myEvents

请注意，上述代码中的 satisfies 不是 TypeScript 中的合法关键字，可能需要根据实际情况调整代码。

英文:

You have to use const assertion to prevent the compiler from extending the type of values to string:

  1. const events = {
  2.  RAIN: "RAIN",
  3.  SUN: "SUN",
  4.  CLOUDY: "CLOUDY",
  5. } as const
  7. // type EventType = {
  8. //     readonly RAIN: "RAIN";
  9. //     readonly SUN: "SUN";
  10. //     readonly CLOUDY: "CLOUDY";
  11. // }
  12. type EventType = typeof events

playground

Update

Since the object is coming from a third party I can't be manipulated, the only approach I could think of is to create another object that satisfies the original one and const assert it:

  1. const myEvents ={
  2.   RAIN: 'RAIN',
  3.   SUN: 'SUN',
  4.   CLOUDY: 'CLOUDY'
  5. } as const satisfies typeof events;
  7. type EventType = typeof myEvents

答案2

得分: 1

  1. const event1 = {
  2.     RAIN: "雨",
  3.     SUN: "太阳",
  4.     CLOUDY: "多云",
  5. }
  6. type EventType = typeof event1
  8. const keys1 = Object.keys(event1) as (keyof typeof event1)[]
  10. const event2 = {
  11.     RAIN: "雨",
  12.     SUN: "太阳",
  13.     CLOUDY: "多云",
  14. } as const
  15. type EventType2 = typeof event2
  17. type ValuesOf<T> = T[keyof T];
  18. const values2 = Object.values(event2) as ValuesOf<typeof event2>[];
  20. enum event3 {    
  21.     RAIN = "雨",
  22.     SUN = "太阳",
  23.     CLOUDY = "多云",
  24. }
  25. type EventType3 = event3
  27. const values3 = Object.values(event3) as event3[]
英文: 
  1. const event1 = {
  2.     RAIN: &quot;RAIN&quot;,
  3.     SUN: &quot;SUN&quot;,
  4.     CLOUDY: &quot;CLOUDY&quot;,
  5. }
  6. type EventType = typeof event1
  7. // type EventType = {
  8. //     RAIN: string;
  9. //     SUN: string;
  10. //     CLOUDY: string;
  11. // }
  12. const keys1 = Object.keys(event1) as (keyof typeof event1)[]
  13. // const keys1: (&quot;RAIN&quot; | &quot;SUN&quot; | &quot;CLOUDY&quot;)[]
  15. const event2 = {
  16.     RAIN: &quot;RAIN&quot;,
  17.     SUN: &quot;SUN&quot;,
  18.     CLOUDY: &quot;CLOUDY&quot;,
  19. } as const
  20. type EventType2 = typeof event2
  21. // type EventType2 = {
  22. //     readonly RAIN: &quot;RAIN&quot;;
  23. //     readonly SUN: &quot;SUN&quot;;
  24. //     readonly CLOUDY: &quot;CLOUDY&quot;;
  25. // }
  26. type ValuesOf&lt;T&gt; = T[keyof T];
  27. const values2 = Object.values(event3) as ValuesOf&lt;typeof event2&gt;[];
  28. // const values2: (&quot;RAIN&quot; | &quot;SUN&quot; | &quot;CLOUDY&quot;)[]
  30. enum event3 {    
  31.     RAIN = &quot;RAIN&quot;,
  32.     SUN = &quot;SUN&quot;,
  33.     CLOUDY = &quot;CLOUDY&quot;,
  34. }
  35. // const event3 = {
  36. //     RAIN: &quot;RAIN&quot;,
  37. //     SUN: &quot;SUN&quot;,
  38. //     CLOUDY: &quot;CLOUDY&quot;,
  39. // }
  40. type EventType3 = event3
  41. // ~= type EventType3 = &quot;RAIN&quot; | &quot;SUN&quot; | &quot;CLOUDY&quot;
  42. // ~= type EventType3 = event3.RAIN | event3.SUN | event3.CLOUDY
  43. const values3 = Object.values(event3) as event3[]

huangapple
  • 本文由 发表于 2023年6月13日 18:39:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/76464041.html
  • types
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定