TypeScript中通用null转undefined实现方案及相关技术疑问

嘿，这个需求在处理API返回或者数据格式化时特别常见，咱们一步步来拆解你的问题和实现方案：

1. 应该使用Generics还是Any？ #

绝对优先选择泛型！用any虽然写起来省事，但会完全丢掉TypeScript的类型校验优势——调用函数后你拿到的结果类型会变成any，等于白用TS了。而泛型可以精准保留原对象的类型结构，只是把所有原本可能为null的类型替换成undefined，全程保持类型安全。

2. 若使用Generics，能否在发现新类型时动态分配泛型类型？ #

其实你不需要手动“动态分配”泛型，TypeScript的递归条件类型可以自动帮你遍历所有嵌套类型——不管对象嵌套多少层、数组里的元素是什么类型，都能自动完成null到undefined的类型映射，完全不用你手动声明每个层级的泛型。

比如我们可以定义一个递归类型，自动处理对象、数组和基本类型：

type NullToUndefined<T> = 
  // 如果是null类型，直接替换为undefined
  T extends null ? undefined :
  // 如果是数组，递归处理数组里的每个元素
  T extends Array<infer U> ? Array<NullToUndefined<U>> :
  // 如果是对象（排除基本类型和数组），递归处理每个属性
  T extends object ? { [K in keyof T]: NullToUndefined<T[K]> } :
  // 其他基本类型保持不变
  T;

3. TypeScript是否有更简便的递归解析对象的方式？ #

上面的NullToUndefined就是最简便的方式了——利用TS的条件类型和递归特性，几行代码就能完成所有嵌套结构的类型转换，不需要额外的工具或者复杂语法。

实现思路与代码示例 #

接下来咱们写具体的函数实现，用DFS递归的方式最简洁（业务场景下嵌套深度一般不会触发栈溢出，若真有极端深嵌套的情况，再改成BFS迭代即可）：

type NullToUndefined<T> = 
  T extends null ? undefined :
  T extends Array<infer U> ? Array<NullToUndefined<U>> :
  T extends object ? { [K in keyof T]: NullToUndefined<T[K]> } :
  T;

function convertNullToUndefined<T>(input: T): NullToUndefined<T> {
  // 处理null的情况，直接返回undefined
  if (input === null) {
    return undefined as NullToUndefined<T>;
  }

  // 处理数组：遍历每个元素递归转换
  if (Array.isArray(input)) {
    return input.map(item => convertNullToUndefined(item)) as NullToUndefined<T>;
  }

  // 处理对象（排除null和数组后的对象类型）
  if (typeof input === 'object' && input !== null) {
    const result: Record<string, unknown> = {};
    for (const key in input) {
      if (Object.prototype.hasOwnProperty.call(input, key)) {
        result[key] = convertNullToUndefined(input[key]);
      }
    }
    return result as NullToUndefined<T>;
  }

  // 基本类型直接返回
  return input as NullToUndefined<T>;
}

BFS vs DFS的选择 #

• DFS递归：代码最简洁，符合直觉，业务场景下完全够用。唯一需要注意的是极端深嵌套（比如嵌套1000+层）会触发栈溢出，但这种情况在实际业务中极少出现。
• BFS迭代：适合极端深嵌套的场景，用队列来遍历所有节点，不会有栈溢出问题，但代码会稍微繁琐一点。如果你的业务中确实有这种极端情况，可以把上面的递归改成迭代版。

测试示例 #

// 测试对象
const testObj = {
  name: 'Alice',
  age: null,
  address: {
    street: '123 Main St',
    zip: null
  },
  hobbies: ['reading', null, { name: 'gaming', level: null }]
};

// 转换后类型会自动推导，age、zip、数组里的null、level都会变成undefined
const converted = convertNullToUndefined(testObj);
// converted的类型：
// {
//   name: string;
//   age: undefined;
//   address: {
//     street: string;
//     zip: undefined;
//   };
//   hobbies: (string | undefined | { name: string; level: undefined; })[];
// }

内容的提问来源于stack exchange，提问作者Grant Williams