如何将 TypeScript 泛型用于可以返回对象或数组的函数？答案

【问题标题】：How can I use TypeScript Generics for a function that can return either objects or arrays?如何将 TypeScript 泛型用于可以返回对象或数组的函数？
【发布时间】：2021-10-27 10:01:31
【问题描述】：

类似于Object is of type 'unknown' typescript generics，但该问题未在问题中指定返回类型。

我有一些现有的工作 JS 代码，它们使用经典的 JSON.parse(JSON.stringify()) 技术来克隆对象。

当我第一次把它变成 TS 时，我使用Record<string, unknown> 来指定它会返回一个带有字符串键和未知值的对象。

const deepClone = (
  object: Record<string, unknown> 
): Record<string, unknown> => {
  return JSON.parse(JSON.stringify(object));
};

这很好用。但后来我意识到接受和返回数组所需的函数，所以我补充说：

const deepClone = (
  object: Record<string, unknown> | Array<unknown>
): Record<string, unknown> | Array<unknown> => {
  return JSON.parse(JSON.stringify(object));
};

但这未能通过测试：

  describe(`deepClone`, () => {
    it(`Deep clones object`, () => {
      const names = ["frank"];
      const original = { names };
      const clone = deepClone(original);
      names.push("nancy");
      expect(clone.names).toEqual(["frank"]);
    });
  });

      Property 'names' does not exist on type 'unknown[]'.

我了解错误 - 即使对象可以，数组也不能具有属性“名称”。

这需要泛型！所以关注generics documentation

const deepClone = <Type>(
  object: Record<string, unknown> | Array<unknown>
): Type => {
  return JSON.parse(JSON.stringify(object));
};

但是这仍然失败：

error TS2571: Object is of type 'unknown'.

如何将 TypeScript 泛型用于可以返回对象或数组的函数？

【问题讨论】：

标签： typescript generics

【解决方案1】：

也许我遗漏了一些东西，但我认为这只是定义一个泛型类型T 并使用T 作为函数参数和返回值的问题：

const deepClone = <T extends Record<string, unknown> | Array<unknown>>
  (object: T): T => {
  
  return JSON.parse(JSON.stringify(object));
};

const object = deepClone({a: 1});
const array = deepClone(['a', 1]);

【讨论】：