typescript - 如果存在键，则用其他对象类型深度替换对象类型

Question

如何用 A 的值替换 B 的所有属性？并省略 A 中不在 B 中的所有键。

type A = {
  a: {
    a: string
    b: number
    c: boolean
    d: {
      a: any
      b: any
    }
  }
  b: { b: null }

}
type B = {
  a: {
    a: boolean
    b: boolean
    d: { a: boolean }
  }
}
// Result
type C = {
  a: {
    a: string
    b: number
    d: { a: any }
  }
}

编辑:

这是一个 example为什么@catgirlkelly 的回答对我不起作用。

type DeepReplace<T, U> = T extends object ? U extends object ?
  { [K in keyof T]: K extends keyof U ? DeepReplace<T[K], U[K]> : T[K] } : U : U


type Override<Source, Target> = Source extends object ? {
  [K in keyof Source]: K extends keyof Target ? Override<Source[K], Target[K]> : Source[K];
} : Target;


type QueryObj<T> = T extends object ? {
  [Key in keyof T]?: QueryObj<T[Key]>;
} : NonNullable<T> extends object ? never : boolean;


type GRAPH_QL_TYPE = {
  id: string,
  name: string,
  Assets?: {
    items: ({
      id: string,
      name: string,
    } )[],
  } ,
};


function query<Query extends QueryObj<GRAPH_QL_TYPE>>(query: Query) {
  // Doesn't work
  return {} as Override<Query, GRAPH_QL_TYPE>
  // Works
  // return {} as DeepReplace<Query, GRAPH_QL_TYPE>
}

const res = query({
  name: true,
  id: true,
  Assets: {
    items: [
      {
        name: true,
        id: true,
      }
    ]
  }
})
// res.Assets.items[0].name = true with Override, and it equals string with DeepReplace
const reactState: GRAPH_QL_TYPE = res

Answer 1

这类深度对象类型转换往往有很多边缘情况(如 optional properties 、 index signatures 和 union types )，因此遇到“相同”问题的任何人都应该注意测试任何答案很小心。这是一种可能的方法:

type DeepReplace<T, U> =
  T extends object ? U extends object ? {
    [K in keyof T]: K extends keyof U ? DeepReplace<T[K], U[K]> : T[K]
  } : U : U

DeepReplace<T, U> recursively替换(件)T与(件)U .

如果 T或 U不是对象，那么 U按原样返回。这是一个判断调用和一个可能的边缘情况:当 T 之一时或 U是一个对象而另一个不是，还不能 100% 清楚什么是“正确”的行为。

否则我们map关于 T 的属性这样任何属性键 K这也可以在 U 中找到将导致 T 的属性成为DeepReplace d 具有来自 U 的相应属性.这是DeepReplace<T, U>的“核心”并且可能会在大多数实现中找到。

如果有T的任何属性键在 U 中不 ，该属性保持不变，不会被替换。这是另一个判断调用，也是一个可能的边缘案例。

---

无论如何，让我们在您的示例代码上对其进行测试:

type C = DeepReplace<B, A>
/* type C = {
    a: {
        a: string;
        b: number;
        d: {
            a: any;
        };
    };
} */

所以这按预期工作了，万岁!显然它也适用于您的其他用例:

type Query = {
  name: true;
  id: true;
  Assets: {
    items: {
      name: true;
      id: true;
    }[];
  };
};

type GraphQLType = {
  id: string,
  name: string,
  Assets?: {
    items: ({
      id: string,
      name: string,
    })[],
  },
};

type QueryResult = DeepReplace<Query, GraphQLType>
/* type QueryResult = {
    name: string;
    id: string;
    Assets: {
        items: {
            name: string;
            id: string;
        }[];
    } | undefined;
} */

双万岁。围绕可选属性和联合的确切所需类型 undefined对我来说并非 100% 显而易见，但这同样取决于用例的具体情况。

Playground link to code