【问题标题】:Creating a weird type in TypeScript在 TypeScript 中创建一个奇怪的类型
【发布时间】:2017-11-18 22:55:54
【问题描述】:

如何在 TypeScript 中创建一种可以表示如下对象的类型?

const definition = {
    'with_boolean_prop': {
        prop1: true
    },
    'with_object_prop': {
        prop2: {
            options: {}
        }
    }
    'with_multiple_props': {
        prop3: {
            options: {}
        }
        prop4: true
    }
};

键将是{ [key: string]: any } 中的字符串。任何东西都可以用于名称 prop1 和 prop2。但它们的类型必须是boolean 或只包含options 属性的接口。

这是我目前所拥有的:

type ItemSchema = { options: string };
type Item = { [key: string]: Boolean | ItemSchema };
type Schema = { [key: string]: Item };

const schema: Schema = {
    'item1': {
        'prop1': true,
        'prop2': {
            options: 'some options'
        }
    }
};

有效,但我只能使用字符串作为道具名称,因为 TypeScript 中的索引器只能是字符串或数字,这是一种限制。

编辑 有一些误解,可能是因为我的英语:-) 我不反对使用字符串或数字作为索引器。我想要实现的是定义一个类型,其属性只能是一组预定义类型。

像这样:

myObject = {
    aProperty: Can be Boolean | Object
    bProperty: Can be Boolean | Object
    xxxProperty: Can be Boolean | Object
    anyProperty: Can be Boolean | Object
}

如果我对属性名称使用字符串索引器,那么我可以实现我想要的,正如您从上面的示例(ItemSchema 和其他类型)中看到的那样,因为可以在字符串索引器中使用任何值。如果我尝试在没有字符串键的情况下执行此操作,则无法限制属性可以接受的类型。

【问题讨论】:

  • 是的,马上-1 :-)
  • 你不能简单地使用const schema: Schema = { item1: { prop1: true, prop2: { options: 'some options' } } }; 属性名称中不带引号吗?似乎可行。此外,我认为仅限制属性名称的字符串或数字是非常合理的。 :)
  • 没有,因为我事先不知道属性的名称。
  • 然后考虑包含Schema的示例用法
  • 请举一个js对象的例子,其中索引器类型string或`number`对你来说是一个限制。

标签: typescript


【解决方案1】:

您当前的解决方案与您想要实现的目标相距不远。如果我理解正确,问题是您还想使用number 作为道具名称而不是仅使用string,对吧?

如果是,那么您可以使用& 创建一个 Intersection 类型。这是您实现此功能的示例:

type ItemSchema = { options: string };
type Item = { [key: string]: Boolean | ItemSchema } & { [key: number]: Boolean | ItemSchema };
type Schema = { [key: string]: Item };

const schema: Schema = {
    'item1': {
        'prop1': true,
        'prop2': {
            options: 'some options'
        },
        4: true,
        5: {
            options: 'an other option'
        },
    }
};

这是代码的TypeScript Playground

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-08-12
    • 2016-05-14
    • 1970-01-01
    • 2016-05-28
    • 1970-01-01
    • 1970-01-01
    • 2013-03-27
    • 2012-01-16
    相关资源
    最近更新 更多