打字稿：有递归键吗？

debugcn 发表于 Dev

丹尼尔·卡普兰

有没有办法让这样的代码编译并保持类型安全？

type ComplexObject = {
  primitive1: boolean;
  complex: {
    primitive2: string;
    primitive3: boolean;
  }
};

interface MyReference {
  myKey: keyof ComplexObject;
}

const works1: MyReference = {
  myKey: "primitive1"
}

const works2: MyReference = {
  myKey: "complex"
}

const iWantThisToCompile1: MyReference = {
  myKey: "complex.primitive2" // Error: Type '"complex.primitive2"' is not assignable to type '"primitive1" | "complex"'.
}

const iWantThisToCompile2: MyReference = {
  myKey: "complex['primitive3']" // Error: Type '"complex['primitive3']"' is not assignable to type '"primitive1" | "complex"'.
}

// const iDontWantThisToCompile1: MyReference = {
//  myKey: "primitive2"
// }

// const iDontWantThisToCompile2: MyReference = {
//  myKey: "primitive3"
// }

您可以在此处使用此代码。

大卫·谢瑞

使用TypeScript 4.1中的新模板文字类型和递归类型，可以做到这一点。

属性和索引访问类型

这里有几种定义此方法的方法，它们可以作用于单个级别。我建议第一种方法，因为它的公共API中没有其他未使用的类型参数。

export type RecursiveKeyOf<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfInner<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    RecursiveKeyOfHandleValue<TObj[TKey], RecursiveKeyOfAccess<TKey>>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfHandleValue<TValue, Text extends string> =
  TValue extends object
    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
    : Text;

type RecursiveKeyOfAccess<TKey extends string | number> =
  | `['${TKey}']`
  | `.${TKey}`;

export type RecursiveKeyOf<TObj extends object, isFirstLevel extends boolean = true> = {
  [TKey in keyof TObj & (string | number)]:
    isFirstLevel extends true
      ? RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`>
      : RecursiveKeyOfHandleValue<TObj[TKey], RecursiveKeyOfAccess<TKey>>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfHandleValue<TValue, Text extends string> =
  TValue extends object
    ? Text | `${Text}${RecursiveKeyOf<TValue, false>}`
    : Text;

type RecursiveKeyOfAccess<TKey extends string | number> =
  | `['${TKey}']`
  | `.${TKey}`;

仅属性访问类型

如果只需要属性访问，则要简单得多：

export type RecursiveKeyOf<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    TObj[TKey] extends object
      ? `${TKey}` | `${TKey}.${RecursiveKeyOf<TObj[TKey]>}`
      : `${TKey}`;
}[keyof TObj & (string | number)];

说明与细目

export type RecursiveKeyOf<TObj extends object> = (
  (
    // 1. Create an object type from `TObj`, where all the individual
    // properties are mapped to a string type if the value is not an object
    // or union of string types containing the current and descendant
    // possibilities when it's an object type.
    {
      // Does this for every property in `TObj` that is a string or number
      [TPropName in keyof TObj & (string | number)]:
        HandleProperty<TObj[TPropName], TPropName>;
    }
  )[
    keyof TObj & (string | number) // for every string or number property name
  ] // 2. Now flatten the object's property types to a final union type
);

type HandleProperty<TValue, TPropName extends string | number> =
  // If the value of the property is an object type...
  TValue extends object
    // Then...
      // 1. Return the current property name as a string
    ? `${TPropName}`
      // 2. And return the property name concatenated with a `.` and
      //    all the return values of `RecrusiveKeyOf<TValue>`
      | `${TPropName}.${RecursiveKeyOf<TValue>}`
    // Else, only return the current property name as a string
    : `${TPropName}`;

例如：

// this type
{
  prop: { a: string; b: number; };
  other: string;
}

// goes to
{
  prop: "prop" | "prop.a" | "prop.b";
  other: "other";
}

// goes to
"prop" | "prop.a" | "prop.b" | "other"

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。