javascript - 将 Typescript 泛型限制为对象

Question

大家好，

我不太熟悉 Typescript ，但这是我想要实现的目标，而我目前正在努力:

使用下面定义的函数 createObject 创建一个对象。作为参数，您可以仅传入一个对象类型的参数。

它返回传入的参数，但由 type 和 detail 属性修改)。

这就是我到目前为止所做的。

function createObject<T extends object>(options: T): T {
  if (!options.type) {
    if (options.showDetail) {
      options.type = 'text';
      options.detail = 'Some detail';
    } else {
      options.type = 'simple';
      options.detail = '';
    }
  }
  return options
}

当我执行我的功能时:

const objectConfig = {
  name: 'Steven',
  age: 28,
}

const newObj = createObject(objectConfig);

在函数 createObject 中，options.type、options.showDetail、options.detail 以红色突出显示。 typescript 提示:

[Line 4] Property 'type' does not exist on type 'T'.

[Line 3] Property 'showDetail' does not exist on type 'T'.

[Line 5, 8] Property 'detail' does not exist on type 'T'.

此外，返回 Generic 不会返回修改后的参数，而只会返回输入参数。 IE。我不会得到有关 newObj 的详细信息/类型属性的 Typescript 提示。

我的 IDE 只给我 age 和 name 属性的类型提示。正如预期的那样，因为我错误地只返回了输入参数。

如何获得合适的 typescript 解决方案？谢谢!

Answer 1

嗯...问题是你正在编写 TypeScript，就好像它就像 JavaScript 一样。它不是这样工作的。这是一个可行的解决方案，但您需要像编写任何其他 OOP 语言一样开始编写 TypeScript¹。

interface OptionExtensions {
    type?: string,
    showDetail?: boolean,
    detail?: string
}

function createObject<T extends object>(options: T): T & OptionExtensions {
    let optionsExtended: T & OptionExtensions = options;
    if (!optionsExtended.type) {
        if (optionsExtended.showDetail) {
            optionsExtended.type = 'text';
            optionsExtended.detail = 'Some detail';
        } else {
            optionsExtended.type = 'simple';
            optionsExtended.detail = '';
        }
    }
    return optionsExtended;
}

let foo = createObject({
    name: "Steven",
    age: 28
});

这是一个 demo .您可以检查 foo 是否具有您期望的所有属性(通过编写“foo.”并查看建议)。

脚注 1:我的意思是因为 TypeScript 有很好的 type inference和 duck typing它将允许您在不显式编写类型和创建接口(interface)的情况下使事情正常进行，但时间不会太长。想想你会如何用 OOP 语言编写东西，然后进行适当的抽象和模型。