TypeScript 映射类型 : Flag type with nesting

Question

在 TypeScript 中有没有办法创建 Flags 的嵌套版本？ Advanced types 中提到的类型文档？

这很好用:

type Flags<T> = {
  [P in keyof T]: boolean;
}

interface Colors {
  red: string;
  green: string;
  blue: string;
}

const activeColors: Flags<Colors> = {
  red: true,
  green: true,
  blue: false
}

但是如果我想创建一个 NestedFlags 怎么办？能够像这样处理嵌套对象的类型？

interface NestedColors {
  red: string;
  green: string;
  blue: string;
  more: {
    yellow: string;
    violet: string;
    black: string;
  }
}

const activeNestedColors: NestedFlags<NestedColors> {
  red: true,
  blue: false,
  green: true,
  more: {
    yellow: false,
    violet: true,
    black: true
  }
}

我能够创建一个 NestedFlags输入 [P in keyof T]: boolean | NestedFlags<T[P]> .该解决方案效果很好，除了它允许我用例如创建一个对象。 more: false这对我来说是不可取的。

谢谢!

Answer 1

你可能想要 mapped conditional types ，将从 TypeScript v2.8 开始提供，将于本月某个时候(2018 年 3 月)发布。您现在可以将其与 typescript@next 一起使用.这是我如何实现它的第一枪:

type NestedFlags<T> = {
  [K in keyof T]: T[K] extends object ? NestedFlags<T[K]> : boolean
}

上面一行使用了conditional types三元类型语法。这意味着:对于 T 中的每个键, NestedFlags<T> 的属性类型将取决于原始属性是否为对象类型。如果原始属性不是对象类型，则对应的属性将为 bool 值。如果原始属性是一个对象类型，那么相应的属性将是一个NestedFlags<>。应用于该对象类型。

这会给你以下行为:

interface NestedColors {
  red: string;
  green: string;
  blue: string;
  more: {
    yellow: string;
    violet: string;
    black: string;
  }
}

// okay    
const activeNestedColors: NestedFlags<NestedColors> = {
  red: true,
  blue: false,
  green: true,
  more: {
    yellow: false,
    violet: true,
    black: true
  }
}

// error
const badActiveNestedColors: NestedFlags<NestedColors> = {
  red: true,
  blue: false,
  green: true,
  more: false
} 
// Types of property 'more' are incompatible.
// Type 'boolean' is not assignable to ...

TypeScript 提示 badActiveNestedColors ，说 more不应该是 boolean .

希望对您有所帮助。祝你好运!