Typescript's interface for key-value pairing with generic types

Question

Typescript's interface for key-value pairing with generic types

Consider the example Object below:

let obj1: Obj = {
  'key1': { default: 'hello', fn: (val:string) => val },
  'key2': { default: 123, fn: (val:number) => val },

  // this should throw an error, because the types of default and fn do not match
  'key3': { default: true, fn: (val:string) => val }
}

An ideal Interface for this object would be as follows:

interface Obj {
  [key: string]: { default: T, fn: (val:T) => any }
}

This however does not work due to lack of definition for T.

To address this issue, one could attempt the following solution:

interface ObjValue<T> {
  default: T;
  fn: (val:T) => any;
}

interface Obj {
  [key: string]: ObjValue<?>
}

Unfortunately, defining the generic type for ObjValue also presents challenges.

If one uses ObjValue<any>, then everything is typed as any, which is not desired.

The goal is to ensure that the type of default and parameter type of fn always match. Is there a solution to achieve this, or is it impossible?

typescript generics type-inference typescript2.0 typescript-generics

Answer 1

Answer №1

Consider defining Foo<T> as a mapped type, like this:

interface FooValue<T> {
  default: T;
  fn: (val: T) => any;
}

type Foo<T> = {
  [K in keyof T]: FooValue<T[K]>
}

If you have an object type

{a: string, b: number, c: boolean}

, then Foo<T> will be similar to

{a: FooValue<string>, b: FooValue<number>, c: FooValue<boolean>

}. You can create a function that accepts an object literal only if it is inferred as a Foo<T> for some type T:

function asFoo<T>(foo: Foo<T>): Foo<T> {
  return foo;
}

The TypeScript compiler can infer T from Foo<T> using inference from mapped types. Here is an example:

let foo = asFoo({
  key1: { default: 'foo', fn: (val: string) => val },
  key2: { default: 42, fn: (val: number) => val }
});
// inferred as { key1: FooValue<string>; key2: FooValue<number>;}

And here is an example where inference fails:

let badFoo = asFoo(
  key1: { default: 'foo', fn: (val: string) => val },
  key2: { default: 42, fn: (val: number) => val },
  key3: { default: true, fn: (val: string) => val }
}); 
// error! Types of property 'key3' are incompatible. Type 'boolean' is not assignable to type 'string'.

I hope this explanation helps. Good luck!

An update suggests a different approach for the helper function to remember the output types of properties' fn methods:

function asFoo<T, F>(foo: F & Foo<T>): F {
  return foo;
}

let foo = asFoo({
  key1: { default: 'foo', fn: (val: string) => val },
  key2: { default: 42, fn: (val: number) => val }
})

const key1fnOut = foo.key1.fn('s') // known to be string
const key2fnOut = foo.key2.fn(123) // known to be number

This method verifies that the input is a Foo<T> without coercing the output type to a Foo<T>. Choose the solution that fits your use case best. Good luck once again.

Answer 2

Consider defining Foo<T> as a mapped type, like this:

interface FooValue<T> {
  default: T;
  fn: (val: T) => any;
}

type Foo<T> = {
  [K in keyof T]: FooValue<T[K]>
}

If you have an object type

{a: string, b: number, c: boolean}

, then Foo<T> will be similar to

{a: FooValue<string>, b: FooValue<number>, c: FooValue<boolean>

}. You can create a function that accepts an object literal only if it is inferred as a Foo<T> for some type T:

function asFoo<T>(foo: Foo<T>): Foo<T> {
  return foo;
}

The TypeScript compiler can infer T from Foo<T> using inference from mapped types. Here is an example:

let foo = asFoo({
  key1: { default: 'foo', fn: (val: string) => val },
  key2: { default: 42, fn: (val: number) => val }
});
// inferred as { key1: FooValue<string>; key2: FooValue<number>;}

And here is an example where inference fails:

let badFoo = asFoo(
  key1: { default: 'foo', fn: (val: string) => val },
  key2: { default: 42, fn: (val: number) => val },
  key3: { default: true, fn: (val: string) => val }
}); 
// error! Types of property 'key3' are incompatible. Type 'boolean' is not assignable to type 'string'.

I hope this explanation helps. Good luck!

An update suggests a different approach for the helper function to remember the output types of properties' fn methods:

function asFoo<T, F>(foo: F & Foo<T>): F {
  return foo;
}

let foo = asFoo({
  key1: { default: 'foo', fn: (val: string) => val },
  key2: { default: 42, fn: (val: number) => val }
})

const key1fnOut = foo.key1.fn('s') // known to be string
const key2fnOut = foo.key2.fn(123) // known to be number

This method verifies that the input is a Foo<T> without coercing the output type to a Foo<T>. Choose the solution that fits your use case best. Good luck once again.

Typescript's interface for key-value pairing with generic types

Answer №1

Similar questions

Is there a way to achieve this using a fresh and sleek typescript assertion function?

Is it advisable to specify data types for my JSON data in TypeScript?

A function in Typescript designed to take in two objects that possess identical keys

When the route changes, routerCanReuse and routerOnReuse are not invoked

Utilizando Typescript com Ionic 2 e AngularJS para autenticar através de um método de post na requisição HTTP e

What is the best way to retrieve the current complete URL in a Next.js/Typescript component?

When selecting a MenuItem, only a ReactOwner has the ability to add a ref using addComponentAsRefTo(...)

The outcome from using Array.reduce may not always match the expected result

Angular data table is currently displaying an empty dataset with no information available

Utilizing environment variables in the root files of your SvelteKit project: A guide

Exploring the power of async/await and promise in TypeScript

Creating a null array of a specific size can easily be accomplished in Typescript

Utilizing a function as a prop with varying parameter types in React using Typescript

Is there a way to signal an error within an Observable function that can handle multiple scenarios depending on the specific page being viewed in an Angular application?

What is the process of TypeScript module resolution within the Play framework?

In React-Redux, attempting to assign a value to an empty string is not permitted

Guide on generating a video thumbnail using JavaScript Application

Broaden material-ui component functionality with forwardRef and typescript

Can an Angular application be developed without the use of the app-root tag in the index.html file?

When using `useSWR`, it will return { null, null } for a successful request