Relaxed Leaf
Relaxed Leaf

Reputation: 63

Typescript how to define nested objects with different keys

Suppose I have two classes Foo and bar, each class has an attribute called fields such as

// Foo
fields = {
    id: {
        type: 'number',
        display: 'ID'
    },
    name: {
        type: 'string',
        display: 'Name'
    }
    // ...
}

// Bar
fields = {
    version: {
        type: 'number',
        display: 'Version'
    },
    valid: {
        type: 'boolean',
        display: 'Valid'
    }
    // ...
}

Fields in these classes have different keys, but each key value has the same type with type and display. Is there a way to define a type or interface for fields?

Upvotes: 0

Views: 570

Answers (1)

davecardwell
davecardwell

Reputation: 4228

If you don’t need to limit what the keys can be called you can define a Record with keys of string and values of an object with type and display fields:

type MyType = {
  fields: Record<string, {
    type: 'boolean' | 'number' | 'string';
    display: string;
  }>;
};

interface MyInterface {
  fields: Record<string, {
    type: 'boolean' | 'number' | 'string';
    display: string;
  }>;
}

Upvotes: 2

Related Questions