动态对象的Typescript接口

Question

假设我可以有这样的对象：

const filters = {
    name: { value: 'some-value', rank: 'some-value' },
    place: { value: 'some-value', population: 'some-value' },
}

它也可以是这样的...

const filters = {
    name: { value: 'some-value', rank: 'some-value' },
    place: { value: 'some-value', population: 'some-value' },
    description: { value: 'some-value', translation: 'some-value' },
    popularity: { value: 'some-value', ranking: 'some-value' },
}

我该如何为那个动态对象创建一个接口？

- jthinam

---

这个回答是否解决了你的问题？ - Tommi

Answer 1

一个可能的方法是通过添加 ? 来使 description 和 popularity 变为可选项，如下所示：

方法1

interface Filters {
    name: object,
    place: object,
    description?: object,
    popularity?: object,
}

有关属性修饰符的更多信息，请参阅文档

另一种方法是使用接口继承，使用关键字extends

方法2

interface ParentFilters {
    name: object,
    place: object
}

对于派生接口

interface derivedFilters extends parentFilter {
   description: object,
   popularity: object,
}

- Simon Rosengren

Answer 2

无法创建强制为{ a }或{ a，b，c }的类型。这被称为辨别联合，您可以在此处阅读有关此问题的更多信息。

您可以使用@SimonRosengren提到的两种方法。要在定义对象时强制执行类型安全性，必须隐式说明哪种类型是什么：

interface FilterTypeBase {
    name: { value: string, rank: string },
    place: { value: string, population: string }
}

interface FilterTypeExtended extends FilterTypeBase {
    description: { value: string, translation: string },
    popularity: { value: string, ranking: string }
}

//  OK
const filters: FilterTypeBase = {
    name: { value: 'some-value', rank: 'some-value' },
    place: { value: 'some-value', population: 'some-value' },
}

// ❌ ERROR: Property 'popularity' is missing
const filters2: FilterTypeExtended = {
    name: { value: 'some-value', rank: 'some-value' },
    place: { value: 'some-value', population: 'some-value' },
    description:  { value: "string", translation: "string" }
}

如果您想在函数中决定您的类型是哪个变量，您可以使用缩小操作：

type FilterType = FilterTypeBase | FilterTypeExtended 

function doSomething(filter: FilterType) {
    if('description' in filter) {
        // Here it's the extended type
    }
}

Typescript文档：缩小范围

- Lars Flieger