javascript - JavaScript中如何将对象中所有元素的类型(typeof)分配给变量 | typescript ？

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

看起来您正在将 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; }>

要使类型定义与该对象中的键匹配，请在定义与任何键匹配的 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')[]