Create a function with an optional argument when the type can be inferred as an empty object

Question

Create a function with an optional argument when the type can be inferred as an empty object

Is there a way to enforce a function's argument to be required if it has keys in the inferred type, and optional if it does not exist or is an empty object?

I've experimented with conditionals and overloads but have yet to find a solution.

const MyFunc = <T extends {}>(vars?: T): void => {
  // ...
}

// Should be allowed
MyFunc()

// Should be allowed
MyFunc<{}>()

// Should not be allowed - the argument should be required
MyFunc<{ a: string }>()

I've tried using overloads and conditional types like keyof T extends never ? ..., but I am stuck. Is this achievable with current TypeScript features?

Thank you!

typescript

Answer 1

Answer №1

If you want to always have MyFunc as a generic function with only one type parameter T corresponding to the type of the vars argument, then the change should be made in the parameter types of your call signature. If you decide to relax that restriction, using overloads and other methods might achieve similar effects, but it will lead to a different question.

The solution I propose is as follows:

const MyFunc = <T extends {}>(
   ...args: {} extends T ? [vars?: T] : [vars: T]
): void => { }

In this solution, instead of having a single vars parameter, we use an args rest parameter. The type of this rest parameter is a tuple type that depends on whether an empty object type can be assigned to T. If yes, then the tuple contains a single optional element of type T</code, making <code>vars optional. If not, the tuple includes a single required element, making vars mandatory.

You can test it with the following examples:

MyFunc(); // valid
MyFunc<{}>(); // valid
MyFunc<{ a: string }>(); // error!
MyFunc<{ a?: string }>(); // valid

This implementation works correctly. It's worth noting that since {} can be a valid value for {a?: string}, calling MyFunc<{a?: string}>() is allowed.

Link to Playground for Testing

Answer 2

If you want to always have MyFunc as a generic function with only one type parameter T corresponding to the type of the vars argument, then the change should be made in the parameter types of your call signature. If you decide to relax that restriction, using overloads and other methods might achieve similar effects, but it will lead to a different question.

The solution I propose is as follows:

const MyFunc = <T extends {}>(
   ...args: {} extends T ? [vars?: T] : [vars: T]
): void => { }

In this solution, instead of having a single vars parameter, we use an args rest parameter. The type of this rest parameter is a tuple type that depends on whether an empty object type can be assigned to T. If yes, then the tuple contains a single optional element of type T</code, making <code>vars optional. If not, the tuple includes a single required element, making vars mandatory.

You can test it with the following examples:

MyFunc(); // valid
MyFunc<{}>(); // valid
MyFunc<{ a: string }>(); // error!
MyFunc<{ a?: string }>(); // valid

This implementation works correctly. It's worth noting that since {} can be a valid value for {a?: string}, calling MyFunc<{a?: string}>() is allowed.

Link to Playground for Testing

Create a function with an optional argument when the type can be inferred as an empty object

Answer №1

Similar questions

What are the steps to extract information from an observable?

Selecting the appropriate color code based on a specified value

Creating a Jest mock object in Typescript: A step-by-step guide

Best practice in Typescript for "Incompatible types for parameters 'X' and 'X'"

Are there any alternatives to the Safe Navigation Operator specifically for TypeScript files with versions less than 3.7?

Generating TypeScript declarations for legacy CommonJS dependencies with the correct "module" setting

Enhance all React/Html elements with a custom property in React using TypeScript

Prevent TypeScript from generalizing string literals as types

What is the best method for transferring data to Angular routed components?

Is there a way to ensure my custom tslint rule is compatible with the exact version of the TypeScript module being used by tslint?

Solving the issue of interconnected promises in Angular services

Can someone explain how I can extract values from components that have been added using a for each loop in Svelte

Having trouble utilizing a JavaScript file within TypeScript

Encountering the issue: "Property '...' is not found on the type 'typeof "...."'"

React-Bootstrap columns are not displaying in a side by side manner and are instead appearing on separate lines

Error: Unable to attach the "identity" property as the object does not support extension

Create a Node.js Express app that retrieves data using a GET request from an array

Comparing TypeScript's `return;` with `return undefined;`: which is better?

Immutable parameter in constructor

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines