What is the best way to define a function that accepts an object with a specific key, while also allowing for any additional keys to be passed

Question

What is the best way to define a function that accepts an object with a specific key, while also allowing for any additional keys to be passed

Typescript allows us to define an interface for an object that must have a key and can also allow additional keys:

interface ObjectWithTrace {
  trace: string;
  [index: string]: any
}
const traced: ObjectWithTrace = { trace: 'x', foo: 'bar' }; // valid
const untraced: ObjectWithTrace = { foo: 'bar' }; // Error: Property 'trace' is missing in type '{ foo: string; }' but required in type 'ObjectWithTrace'. ts(2741)

In the case above, the key trace is necessary. We can freely add any keys to an object as long as the trace key is included, making typescript content.

However, when trying to extend this concept to function arguments, an error arises:

type FunctionWithParamWithTrace = (args: {
  trace: string;
  [index: string]: any
}) => any;
const doSomethingAndTrace: FunctionWithParamWithTrace = (args: { trace: string }) => {}; // valid
const doSomethingElseAndTrace: FunctionWithParamWithTrace = (args: { trace: string, foo: 'bar' }) => {} /*
 Error: Type '(args: { trace: string; foo: "bar"; }) => void' is not assignable to type 'FunctionWithParamWithTrace'.
  Types of parameters 'args' and 'args' are incompatible.
    Property 'foo' is missing in type '{ [index: string]: any; trace: string; }' but required in type '{ trace: string; foo: "bar"; }'.ts(2322)
*/

It seems like something is missing. Is there a way to define a type for a function that expects only one parameter - allowing any keys with any values, while also requiring a specific key to exist (e.g., a property named trace)?

I am looking to achieve the following scenario:

const doSomethingWithTrace: FunctionWithParamWithTrace = (args: { trace: string, foo: string }) => {}; // valid
const doSomethingWithoutTrace: FunctionWithParamWithTrace = (args: { foo: string }) => {} // Error: Property 'trace' is missing in type '{ foo: string; }'...

typescript typescript-generics

Answer 1

Answer №1

If you want to expand a specific type with subtypes, you can achieve this by using generic parameters:

type FunctionWithParamWithTrace<Args extends {
  trace: string;
  [index: string]: any
}> = (args: Args) => any;

const doSomethingAndTrace: FunctionWithParamWithTrace<{ trace: string }> 
= (args) => {}; // seems good
const doSomethingElseAndTrace: FunctionWithParamWithTrace<{ trace: string, foo: 'bar' }> 
= (args) => {} // works fine

The limitation of using a stricter type as an argument becomes apparent in the following code:

type FunctionWithParamWithTrace = (args: {
  trace: string;
  [index: string]: any
}) => any;

type FunctionWithMoreStrictParameters = (args: { trace: string, foo: string }) => any

type NoItDoesNotExtends 
= FunctionWithMoreStrictParameters extends FunctionWithParamWithTrace 
? true 
: false // returns false

This means that a stricter function type is not a subset of the original one and therefore cannot be used as such. Why is that? Consider a function that specifically requires certain arguments, like a function that always expects foo, this function cannot replace a function that can accept any object. That's why this substitution is not valid.

Let's explore another example that illustrates why using a more strict function with arguments is not advisable, and how TypeScript prevents it:

function f(arg: {a: string, b: string | number}) {
    return arg.b.concat('b cannot be used as string as it can be number') // error
}

function g(arg: {a: string, b: string}) {
    return arg.b.concat(' b can be used as string') // compiles successfully
}

The argument type of function g is a subset of the argument type of function f, so theoretically it should be usable in place of

f</code, right? Actually, it's the opposite. Function <code>f

can replace g because it can handle a wider range of types and requires additional checks. In function f, we cannot simply treat string | number as string, additional checks are necessary. However, in function g, since it only works with string, no extra checks are needed. If we were to use g instead of f and pass a number argument, it would result in a runtime error.

To sum it up, a function type is considered a subset of another function type if it is more flexible in terms of argument types, not stricter.

Answer 2

If you want to expand a specific type with subtypes, you can achieve this by using generic parameters:

type FunctionWithParamWithTrace<Args extends {
  trace: string;
  [index: string]: any
}> = (args: Args) => any;

const doSomethingAndTrace: FunctionWithParamWithTrace<{ trace: string }> 
= (args) => {}; // seems good
const doSomethingElseAndTrace: FunctionWithParamWithTrace<{ trace: string, foo: 'bar' }> 
= (args) => {} // works fine

The limitation of using a stricter type as an argument becomes apparent in the following code:

type FunctionWithParamWithTrace = (args: {
  trace: string;
  [index: string]: any
}) => any;

type FunctionWithMoreStrictParameters = (args: { trace: string, foo: string }) => any

type NoItDoesNotExtends 
= FunctionWithMoreStrictParameters extends FunctionWithParamWithTrace 
? true 
: false // returns false

This means that a stricter function type is not a subset of the original one and therefore cannot be used as such. Why is that? Consider a function that specifically requires certain arguments, like a function that always expects foo, this function cannot replace a function that can accept any object. That's why this substitution is not valid.

Let's explore another example that illustrates why using a more strict function with arguments is not advisable, and how TypeScript prevents it:

function f(arg: {a: string, b: string | number}) {
    return arg.b.concat('b cannot be used as string as it can be number') // error
}

function g(arg: {a: string, b: string}) {
    return arg.b.concat(' b can be used as string') // compiles successfully
}

The argument type of function g is a subset of the argument type of function f, so theoretically it should be usable in place of

f</code, right? Actually, it's the opposite. Function <code>f

can replace g because it can handle a wider range of types and requires additional checks. In function f, we cannot simply treat string | number as string, additional checks are necessary. However, in function g, since it only works with string, no extra checks are needed. If we were to use g instead of f and pass a number argument, it would result in a runtime error.

To sum it up, a function type is considered a subset of another function type if it is more flexible in terms of argument types, not stricter.

What is the best way to define a function that accepts an object with a specific key, while also allowing for any additional keys to be passed

Answer №1

Similar questions

Ways to transfer selected options from a dropdown menu to a higher-level component

Seeking assistance with TypeScript promises

Tips for automatically scrolling the Google Maps view in a React application

Is it possible to set up an automatic redirection to the Identity Provider sign-in page when accessing a protected page in Next.js using Auth.js?

Cannot upload the same file to both Spring and Angular twice

When you use Array.push, it creates a copy that duplicates all nested elements,

Issue with ng-multiselect-dropdown where clearing selected items programmatically does not visually work as expected

A method for consolidating multiple enum declarations in a single TypeScript file and exporting them under a single statement to avoid direct exposure of individual enums

When running jest unit tests, an error is thrown stating that includes() and toLowerCase are not functions

Using Typescript to overload functions with varying first parameters

What exactly is the data type of setInterval in TypeScript?

Angular: Enable function to await Observable completion before returning result

Angular TextInput Components don't seem to function properly when dealing with arrays

What could be causing FormArrayName to consistently display as undefined in my HTML code, even when the safe-navigation operator is employed

What is the best way to utilize await in promises instead of using then?

Customizing the Switch component individually for each item fetched from an API in React Native

Ways to update the UI dynamically in Angular without the need to refresh the entire page

Using the ternary operator will always result in a TRUE outcome

What is the best way to retrieve a nested data type?

TypeScript Angular Forms: Implementing correct typing for dynamic form fields