Typescript - 循环映射类型的键

Question

是否有比以下方法更好的方法来遍历对象的键并返回具有相同键但转换值并确保生成的类型包含与输入相同的键的新对象。

const env = {
  KEY_1: "VALUE_1",
  KEY_2: "ANOTHER_VALUE_2"
};

function mapValuesToLength<TEnv extends Record<string, string>>(
  env: TEnv
): Record<keyof TEnv, number> {
  const result: Partial<Record<keyof TEnv, number>> = {};

  for (const envKey in env) {
    result[envKey] = env[envKey].length;
  }

  return result as Record<keyof TEnv, number>;
}

// expecting result = {KEY_1: 7, KEY_2: 15}
const result = mapValuesToLength(env);

// expecting type resultType = { KEY_1: number; KEY_2: number; }
type resultType = typeof result

Answer 1

下面的方法(单行)怎么样:

const env = {
    KEY_1: "VALUE_1",
    KEY_2: "ANOTHER_VALUE_2"
};

type InputType = Record<string, string>;
type OutputType<T> = Record<keyof T, number>;

function mapValuesToLength<TEnv extends InputType>(env: TEnv): OutputType<TEnv> {
    return Object
            .entries(env)
            .reduce((acc, [key, value]) => ({ ...acc, [key]: value.length }), {} as OutputType<TEnv>);
}

const result = mapValuesToLength(env);
console.log(result);

步骤:

1. Object.entries() : 返回给定对象自身的可枚举字符串键控属性 [key, value] 对的数组。
2. Array.prototype.reduce() :对数组的每个元素执行 reducer 函数。
   1. ({ ...acc, [key]: value.length }) :返回带有新元素(当前)的当前累加器(结果对象)key: value (长度)。
   2. {} as OutputType<TEnv> : 将累加器初始化为具有正确输出类型的空对象。

Typescript Playground