What is the best way to create an abstract typescript generic type?

Question

What is the best way to create an abstract typescript generic type?

When working with the specified types below

interface Base {
  id: string;
}

interface A extends Base {
  propA: string;
}

interface B extends Base {
 propB: string;
}

I am looking to create a unique MyGeneric<T> with specific constraints:

T must be an object
T keys should be of type string
T values must be of type instanceOf Base (either directly of type Base, or extending Base)

(The third requirement has been rephrased for clarity and better understanding)

In my initial attempt, I created

interface MyConstraint {
  [key: string]: Base
}

interface MyGeneric<T extends MyConstraint> {
  data: T
}

However, this approach presents two drawbacks when used by the user:

interface userDefinedInterface1 {
  a: A;
  b: B;
}

function foo1(p: MyGeneric<userDefinedInterface1>):void {
  //drawback 1: encountering TS2344 error:
  //Type 'userDefinedInterface1' does not satisfy the constraint 'userDefinedInterface1'.   //Index signature is missing in type 'userDefinedInterface1'.
}

//To address drawback 1, the user must extend MyConstraint
interface userDefinedInterface2 extends MyConstraint {
  a: A;
  b: B;
}

function foo2(p: MyGeneric<userDefinedInterface2>):void {
  //drawback 2: all string properties are considered valid due to [key: string]
  console.log(p.data.arbitraryKey);//this is considered valid
}

Can we define interface MyGeneric<T> in a way that meets the three aforementioned constraints without these two issues?

typescript generics typescript-generics

Answer 1

Answer №1

Here is a solution that addresses both of your concerns:

type NewConstraint<M> = {
  [S in keyof M]: M[S] extends Original ? M[S] : never;
};

interface NewGenericType<M extends NewConstraint<M>> {
  info: M;
}

By making the NewConstraint generic, you can now use it in both of your scenarios. If you were to try:

interface CustomInterface2 {
  x: X;
  y: Y;
  z: string;
}

type NotCorrect = NewGenericType<CustomInterface2>;

You would receive an error indicating that the types of property z are not compatible.

Answer 2

Here is a solution that addresses both of your concerns:

type NewConstraint<M> = {
  [S in keyof M]: M[S] extends Original ? M[S] : never;
};

interface NewGenericType<M extends NewConstraint<M>> {
  info: M;
}

By making the NewConstraint generic, you can now use it in both of your scenarios. If you were to try:

interface CustomInterface2 {
  x: X;
  y: Y;
  z: string;
}

type NotCorrect = NewGenericType<CustomInterface2>;

You would receive an error indicating that the types of property z are not compatible.

Answer 3

Answer №2

There is just one condition - you must specify extra keys if you wish to add them.

interface Base {
  id: string;
  num: number;
}

interface A extends Base {
  propA: string;
}

interface B extends Base {
 propB: string;
}

type MyGeneric<T extends Base, K extends keyof any = never> = {
  data: T & {
    [key in K | keyof T]: key extends keyof T ? T[key] : string;
  }
}


const test1: MyGeneric<B, 'test'> = {
  data: {
    id: '123',
    num: 123,
    propB: '123',
    test: '123',
  },
};
const test2: MyGeneric<B> = {
  data: {
    id: '123',
    num: 123,
    propB: '123',
    test: '123', // fails, it has to be provided in current TS.
  },
};

Playground

If you want to rely solely on the keys of T.

then use this version:

type MyGeneric<T extends Base> = {
  data: T & {
    [key in keyof T]: key extends keyof Base ? Base[key] : string;
  }
}

Answer 4

There is just one condition - you must specify extra keys if you wish to add them.

interface Base {
  id: string;
  num: number;
}

interface A extends Base {
  propA: string;
}

interface B extends Base {
 propB: string;
}

type MyGeneric<T extends Base, K extends keyof any = never> = {
  data: T & {
    [key in K | keyof T]: key extends keyof T ? T[key] : string;
  }
}


const test1: MyGeneric<B, 'test'> = {
  data: {
    id: '123',
    num: 123,
    propB: '123',
    test: '123',
  },
};
const test2: MyGeneric<B> = {
  data: {
    id: '123',
    num: 123,
    propB: '123',
    test: '123', // fails, it has to be provided in current TS.
  },
};

Playground

If you want to rely solely on the keys of T.

then use this version:

type MyGeneric<T extends Base> = {
  data: T & {
    [key in keyof T]: key extends keyof Base ? Base[key] : string;
  }
}

What is the best way to create an abstract typescript generic type?

Answer №1

Answer №2

Similar questions

Tips on avoiding updates to a defined object when a new object is filtered (created from the original object)

The type 'HTMLDivElement | null' cannot be assigned to the type 'HTMLDivElement' in this context

New Requirement for Angular Service: Subclass Constructor Must Be Provided or Unable to Resolve all Parameters for ClassName (?)

Dynamic Angular select options with ngFor causing cascading changes in subsequent selects

Refreshing Form in Angular 2

Enhance Graphql Queries with TypeOrm using Dynamic Filters

React's componentDidUpdate being triggered before prop change occurs

Keep going in the for await loop in NodeJS

Tips for triggering useEffect just once when various dependencies are updated simultaneously

Is it possible to set the filtered information to the Reducer's state?

Having trouble retrieving form values in Typescript React, only receiving HTML tag as output

Refine the search outcomes by specifying a group criteria

Implementing context menus on the Material-UI DataGrid is a straightforward process that can enhance the user experience

What is the best way to transform a string into emojis using TypeScript or JavaScript?

What is the best approach to upgrade this React Native code from version 0.59.10 to version 0.72.5?

How can we create external labels for a polar chart in ng2-charts and chart.js, with a set position outside the circular rings?

When using Angular's .navigateByUrl() method, it successfully navigates to the desired page, however the html content is not

Can a reducer be molded in ngrx without utilizing the createReducer function?

The switchMap function in Angular does not trigger the async validator as expected

Separate an array in TypeScript based on the sign of each number, and then replace the empty spaces with null objects