What is the method to ensure that the children of an object strictly adhere to a specific interface or inherit from it?

Question

What is the method to ensure that the children of an object strictly adhere to a specific interface or inherit from it?

Is there a way to ensure that an interface extends from another interface in TypeScript?
For example:

export interface Configuration {
  pages: {
    home: IHome;
    about: IAbout; // How can we make IAbout extend IPage?
    contact: IPage;
  };
}
interface IPage {
  displayName: string;
}

interface IHome extends IPage {
  slider: any; // Unique property for Home
}

interface IAbout { // How can we enforce this interface to extend IPage like IHome does?
  map: any; // Unique property for About
}

How can we force IAbout to extend IPage?
The method [pageName: string]: IPage doesn't guarantee that it will extend IPage.
Is there a method to mandate that the values inherit properties from IPage?

typescript typescript-typings

Answer 1

Answer №1

It seems like the intention is for each nested object to conform to both a specified interface and the IPage interface.

One approach is to utilize intersection types with IPage and mapped objects with computed keys.


type ChildrenWithIPage<T extends object> = {
  [key in keyof T]: T[key] & IPage;
};

export interface Configuration {
  pages: ChildrenWithIPage<{
    home: IHome;
    about: IAbout;
    contact: IPage;
  }>;
}
interface IPage {
  displayName: string;
}

interface IHome {
  slider: any;
}

interface IAbout {
  map: any;
}

By using [key in keyof T], we iterate over all keys of T, T[key] retrieves the value at property key, and & IPage creates an intersection resembling inheritance in interfaces.

Answer 2

It seems like the intention is for each nested object to conform to both a specified interface and the IPage interface.

One approach is to utilize intersection types with IPage and mapped objects with computed keys.


type ChildrenWithIPage<T extends object> = {
  [key in keyof T]: T[key] & IPage;
};

export interface Configuration {
  pages: ChildrenWithIPage<{
    home: IHome;
    about: IAbout;
    contact: IPage;
  }>;
}
interface IPage {
  displayName: string;
}

interface IHome {
  slider: any;
}

interface IAbout {
  map: any;
}

By using [key in keyof T], we iterate over all keys of T, T[key] retrieves the value at property key, and & IPage creates an intersection resembling inheritance in interfaces.

What is the method to ensure that the children of an object strictly adhere to a specific interface or inherit from it?

Answer №1

Similar questions

Utilizing Typescript to define key-value pairs within a structured form

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

Is it possible to import in TypeScript using only the declaration statement?

Engage with the item provided to an Angular2 component as an Input parameter

In TypeScript, both 'module' and 'define' are nowhere to be found

Redux Saga effect does not have a matching overload for this call

Angular child component displaying of table data is not looping properly

Collection of assorted objects with varying sizes that are all subclasses of a common superclass

Course completed following the module

Typescript error: The value "X" cannot be assigned to this type, as the properties of "Y" are not compatible

Guide to initializing the state in pinia with Typescript

Converting TypeScript query string values into GUIDs

Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

Simple method for wrestling with objects in TypeScript HTTP POST responses

Do you think it's wise to utilize React.Context for injecting UI components?

Typescript not being transpiled by Webpack

Utilizing Express JS to make 2 separate GET requests

Challenges arise when incorporating interfaces within a class structure

What is the reason behind continuously receiving the error message stating "Not all code paths return a value here"?

Understanding the connection between two unions through TypeScript: expressing function return types