A TypeScript interface that corresponds to a function and its input parameters

Question

A TypeScript interface that corresponds to a function and its input parameters

I have multiple functions with various argument types:

function foo(a: number) {...}
function bar(a: string) {...}
...

To tackle this, I want to define a TypeScript interface (or type) that can handle these scenarios:

interface MyInterface {
   method: typeof foo | typeof bar;
   args: Parameters<foo | bar>;
}

The goal is to ensure that if the method provided is foo, TypeScript will raise an error if args is passed as [string], since it should actually expect [number]. Similarly, if method is bar, then args must be of type [string].

Ultimately, method could represent any of the functions specified in the interface, with args corresponding to the arguments required for that particular function.

typescript

Answer 1

Answer №1

To utilize generics, modify MyInterface to be a generic that accepts a type argument.

// Creating a generic interface that needs a type argument
interface MyInterface<T> {
  method: (arg: T) => void,
  args: T
}

// Implementing your functions
const foo = (thing: string) => { console.log(thing) }
const bar = (thing: number) => { console.log(thing) }

// An object that fulfills the requirements of MyInterface needs a type argument
// The type argument must match the function foo:
const makeAGoodArgument: MyInterface<string> = {
  method: foo,
  args: 'whatever'
}

const makeAnotherGoodArgument: MyInterface<number> = {
  method: bar,
  args: 80
}

const makeABadArgument: MyInterface<string> = {
  method: foo,
  args: 800 // <---- this causes an error
}

Typescript playground

If you find it cumbersome to specify type arguments every time you create an object, you can set it up in advance:

type MyInterfaces = MyInterface<string> | MyInterface<number>

const makeAGoodArgument: MyInterfaces = { ... }

You will achieve the same outcome. While it may require more upfront interface and type declarations, once you start writing your objects, you won't need to provide a type argument for each one.

If you were looking for an interface structure that could infer this without a type argument, I would refer back to this answer: There might not be a way (or at least not a straightforward way) to have the type of one class property rely on another property's current value.

Answer 2

To utilize generics, modify MyInterface to be a generic that accepts a type argument.

// Creating a generic interface that needs a type argument
interface MyInterface<T> {
  method: (arg: T) => void,
  args: T
}

// Implementing your functions
const foo = (thing: string) => { console.log(thing) }
const bar = (thing: number) => { console.log(thing) }

// An object that fulfills the requirements of MyInterface needs a type argument
// The type argument must match the function foo:
const makeAGoodArgument: MyInterface<string> = {
  method: foo,
  args: 'whatever'
}

const makeAnotherGoodArgument: MyInterface<number> = {
  method: bar,
  args: 80
}

const makeABadArgument: MyInterface<string> = {
  method: foo,
  args: 800 // <---- this causes an error
}

Typescript playground

If you find it cumbersome to specify type arguments every time you create an object, you can set it up in advance:

type MyInterfaces = MyInterface<string> | MyInterface<number>

const makeAGoodArgument: MyInterfaces = { ... }

You will achieve the same outcome. While it may require more upfront interface and type declarations, once you start writing your objects, you won't need to provide a type argument for each one.

If you were looking for an interface structure that could infer this without a type argument, I would refer back to this answer: There might not be a way (or at least not a straightforward way) to have the type of one class property rely on another property's current value.

A TypeScript interface that corresponds to a function and its input parameters

Answer №1

Typescript playground

Similar questions

Assign a dynamic class to an element within an ngFor iteration

Make sure to include `jquery` in the types section of your tsconfig file

Step-by-step guide on deploying Angular Universal

Is OnPush Change Detection failing to detect state changes?

The mongoose fails to establish a connection with the Mongo Db Atlas

TypeScript purity - "The variable exports is not defined"

Setting up the TypeScript compiler locally in the package.json file

Executing vitest on compiled javascript files

What sets apart an inlined return type from a return type defined in a separate type definition within a function?

"Encountered a TypeError while attempting to send a server action to a custom

Can a function cast an object automatically if it meets certain conditions?

Incorporating typings for bootstrap-table while compiling TypeScript in an ASP.NET Core application

Step-by-step guide on developing a fresh zod schema while automatically determining its type

"Exploring the best practice: Defining types in React with Typescript before or after

Getting the Angular component class reference within a triggered Highcharts selection event callback - what's the best approach?

Having trouble with Nextjs API Integration - encountering error 404

A class or another interface is the only type that an interface is allowed to extend

Managing the outcome of numerous asynchronous calls before accessing the database post-result collection

Adding connected types to a list using Typescript

The function screen.getByText is not available in this context