如何在 JavaScript 中將對象中所有元素的類型（typeof）分配給變量 | 打字稿？

Question

我有一個看起來像的 javascript 對象

我試圖將對象中所有元素的類型分配給我面臨問題的變量，

而當我單獨提到常量而不是在第二個代碼片段的對象中使用它們時，我可以分配它

 const a = Object.freeze({ REMOVE_ITEM:'REMOVE_ITEM' ADD_ITEM:'ADD_ITEM' }); //How to assign the types of all elements in the above object const b = typeof ? // All Properties in the above object ((Facing Problem Here)); //I Can do it if const REMOVE_ITEM ='REMOVE_ITEM'; const ADD_ITEM = 'ADD_ITEM'; const b = typeof REMOVE_ITEM | typeof ADD_ITEM;

Answer 1

您可以使用 TypeScripts as const符號（ 在這里找到）。

const a = Object.freeze({
  REMOVE_ITEM: 'REMOVE_ITEM',
  ADD_ITEM: 'ADD_ITEM'
} as const);

// assign typeof 
const b: typeof a = {} as any; // you can ignore `{} as any` - only here for example

b; // type is { REMOVE_ITEM: 'REMOVE_ITEM', ADD_ITEM: 'ADD_ITEM' }
b.REMOVE_ITEM; // = 'REMOVE_ITEM'
b.ADD_ITEM; // = 'ADD_ITEM'

// destructure
const { REMOVE_ITEM, ADD_ITEM } = a;

REMOVE_ITEM; // = 'REMOVE_ITEM'
ADD_ITEM; // = 'ADD_ITEM'

這是一個stackblitz，因此您可以看到正在運行的類型。

Answer 2

據我了解，您正在嘗試export一種type以在另一個文件中使用它。 這很容易：

包含類型定義的文件 (myType.ts / myType.d.ts)：

export type MyType = {
  foo: boolean
  bar: 'foo' | 'bar' 
}

要在其中使用該類型的文件：

import { MyType } from './myType' // should be in the same folder, otherwise correct the path

const myVar: MyType = false // error
const myVar: MyType = { foo: false, bar: 'foo' } //working

您不能在運行時定義任何類型，因為類型將在轉換時被刪除。 但是您可以定義一個enum並使用它來定義您的類型：

enum MyEnum {
  FOO_BAR = 'foo_bar',
  LORD_OF = 'the_rings'
}
type MyOhterType = {
  fooBar: MyEnum
}

const myOtherVar: MyOtherType = {
  fooBar: MyEnum.FOO_BAR
}

Answer 3

看起來您正在將 JavaScript 的typeof運算符與 TypeScript 混合使用 - 兩者都不能完成相同的事情。

在 JS 中， typeof something將評估為一個簡單的運行時字符串（例如'number' 、 'string' 、 'object' ...），然后您的應用程序可以將其用於比較目的。 這不是你想要的。

在 TS 中， typeof可以幫助您從 JS 變量中提取隱含的 TS 類型，作為一個有意義的結構 - 真正的TypeScript 類型。 當您想從現有的 JS 代碼中定義復雜的 TS 類型時，這很有用。

const a = Object.freeze({
  REMOVE_ITEM: 'REMOVE_ITEM',
  ADD_ITEM: 'ADD_ITEM'
});

// ^ to TypeScript, this is similar to this type:
// Readonly<{ REMOVE_ITEM: string; ADD_ITEM: string; }>

提取其隱含類型：

type AObject = typeof a;
// Readonly<{ REMOVE_ITEM: string; ADD_ITEM: string; }>

要使類型定義與該對象中的鍵匹配， keyof在定義與任何鍵匹配的 TS 類型時使用keyof ：

type AKey = keyof AObject;
// "REMOVE_ITEM" | "ADD_ITEM"

// or in a strictly similar way:

type AKey = keyof typeof a;
// "REMOVE_ITEM" | "ADD_ITEM"

現在，回到運行時代碼。 提取與a的鍵匹配的AKey類型后，您可以在需要時為某些 JS 值和參數強制類型一致性：

function createActionObject(actionType: AKey) {
  return { type: actionType };
}

const action1 = createActionObject('REMOVE_ITEM');
// compiles and works as expected

const action2 = createActionObject('SOME_BAD_KEYNAME');
// TypeScript Error ->
// Type '"SOME_BAD_KEYNAME"' is not assignable to type '"REMOVE_ITEM" | "ADD_ITEM"'

---

最后，您不能將 TS 類型“分配”給 JS 變量，您只能描述 JS 變量需要的樣子，以便 TypeScript 在最終轉換為 JS 之前對其進行驗證。 如果您嘗試獲取一個列出a中所有鍵的數組，則需要使用傳統的 JS 方法：

const b = Object.keys(a);
// to JavaScript: will be ['REMOVE_ITEM', 'ADD_ITEM']
// to TypeScript: string[]

// or, to get stronger typings for `b` rather than just `string[]`:

const b = Object.keys(a) as (keyof typeof a)[];
// to JavaScript: will be ['REMOVE_ITEM', 'ADD_ITEM']
// to TypeScript: ('REMOVE_ITEM' | 'ADD_ITEM')[]