TypeScript类型挑战 - UndefinedToNull

Following the coding question 176. undefined to null on BFE.dev, please implement UndefinedToNull<T>.

type A = UndefinedToNull<string> // string
type B = UndefinedToNull<undefined> // null
type C = UndefinedToNull<[undefined, null]> // [null, null]
type D = UndefinedToNull<{
a: undefined,
b: [1, undefined]
}> // {a: null, b: [1, null]}

题目出处：https://bigfrontend.dev/zh/typescript/implement-UndefinedToNull-T

实现思路分析

UndefinedToNull接收一个泛型，判断是否为基础数据类型，

如果是，判断是否为undefined类型，如果是，返回null，否则返回当前的类型

如果是对象类型(Object和Array)，判断键的值是否为undefined类型，如果是，返回null，否则返回当前的类型

遇到这种可能有嵌套的，层次不确定的，可以使用递归的方式进行处理

流程图

实现

type UndefinedToNull<T> =
  T extends undefined ? null :
  T extends object ?
    { [K in keyof T]: UndefinedToNull<T[K]> } :
  T;

知识点总结

• ts的extends关键字，可以用来继承类型，也能用来做类型判断。通过类型判断和三元操作符，做条件判断。

• 对于对象的类型，如果是键值对，可以考虑以递归的方式去解决。