how to use all parameters except the first one in TypeScript

Question

how to use all parameters except the first one in TypeScript

Is there a way to reference one function's parameter types in another function, but only use a subset of them without repeating the entire list of parameters?

//params of bar should be same as foo, except p1 should be a different type

function foo(p1: string, p2: number, p3: boolean){
 ...
}

//i'd like to do something like this, though it's obviously not valid syntax
function bar(p1: string[], ...rest: Parameters<typeof foo>.slice(1)){
}

In my actual code, I have more than just 3 parameters and manually specifying them is not ideal. Any suggestions on how to achieve this efficiently?

typescript

Answer 1

Answer №1

Exploring TypeScript 4.0 Features

Option 1: Simplified Variadic Tuple Syntax

type DropFirst<T extends unknown[]> = T extends [any, ...infer U] ? U : never

function bar(p1: string[], ...rest: DropFirst<Parameters<typeof foo>>) { }
// bar: (p1: string[], p2: number, p3: boolean) => void

A new syntax for inferring tuple elements except the first one has been introduced in TypeScript 4.0. Check out Robby Cornelissen's solution for versions prior to 4.0.

Option 2: Named Tuple Elements

type CommonParams = [p2: number, p3: boolean];

function foo2(p1: string, ...rest: CommonParams){} 
// foo2: (p1: string, p2: number, p3: boolean) => void
function bar2(p1: string[], ...rest: CommonParams) { }
// bar2: (p1: string[], p2: number, p3: boolean) => void

Using named tuples can help retain function parameter names, avoiding data loss during conversions.

Try it Out on TypeScript Playground

Answer 2

Exploring TypeScript 4.0 Features

Option 1: Simplified Variadic Tuple Syntax

type DropFirst<T extends unknown[]> = T extends [any, ...infer U] ? U : never

function bar(p1: string[], ...rest: DropFirst<Parameters<typeof foo>>) { }
// bar: (p1: string[], p2: number, p3: boolean) => void

A new syntax for inferring tuple elements except the first one has been introduced in TypeScript 4.0. Check out Robby Cornelissen's solution for versions prior to 4.0.

Option 2: Named Tuple Elements

type CommonParams = [p2: number, p3: boolean];

function foo2(p1: string, ...rest: CommonParams){} 
// foo2: (p1: string, p2: number, p3: boolean) => void
function bar2(p1: string[], ...rest: CommonParams) { }
// bar2: (p1: string[], p2: number, p3: boolean) => void

Using named tuples can help retain function parameter names, avoiding data loss during conversions.

Try it Out on TypeScript Playground

Answer 3

Answer №2

If you want to create a new type tuple in TypeScript, you can utilize the utility type called Parameters. From there, you can derive a new type by excluding the initial type:

type NewType<T extends any[]> = 
  ((...input: T) => void) extends ((first: infer First, ...rest: infer Rest) => void) ? Rest : never;

function myFunction(firstArg: string, secondArg: number, thirdArg: boolean) {
}

function finalFunction(firstArg: string[], ...restArgs: NewType<Parameters<typeof myFunction>>) {
}


finalFunction([''], 0, true); // works fine
finalFunction('', 0, true); // shows error
finalFunction([''], true, 0); // also displays an error

^{To learn more about this concept, refer to this insightful answer.}

Answer 4

If you want to create a new type tuple in TypeScript, you can utilize the utility type called Parameters. From there, you can derive a new type by excluding the initial type:

type NewType<T extends any[]> = 
  ((...input: T) => void) extends ((first: infer First, ...rest: infer Rest) => void) ? Rest : never;

function myFunction(firstArg: string, secondArg: number, thirdArg: boolean) {
}

function finalFunction(firstArg: string[], ...restArgs: NewType<Parameters<typeof myFunction>>) {
}


finalFunction([''], 0, true); // works fine
finalFunction('', 0, true); // shows error
finalFunction([''], true, 0); // also displays an error

^{To learn more about this concept, refer to this insightful answer.}

Answer 5

Answer №3

Utilizing destructured object parameters can streamline your code. When passing an object into a function, you have the flexibility to specify which fields from that object will be used.

You have the option to define the parameter interface type separately (as shown with example below), or you can define it directly within the function call (like in sample below).

This allows both functions to extract only the necessary information from the object containing all the parameters.

type ExampleParameters = { key1: string, key2: number, key3: boolean }
function example({ key1, key2, key3 }: ExampleParameters) {
  console.log("Extracted keys from example:", key1, key2, key3)
}

//Hypothetical scenario utilizing inline definition
function sample({ key1 }: { key1: string }) {
  console.log("Selected key from sample:", key1)
}

const data = { key1: "Value One", key2: 5, key3: true }

example(data)
sample(data)

Answer 6

Utilizing destructured object parameters can streamline your code. When passing an object into a function, you have the flexibility to specify which fields from that object will be used.

You have the option to define the parameter interface type separately (as shown with example below), or you can define it directly within the function call (like in sample below).

This allows both functions to extract only the necessary information from the object containing all the parameters.

type ExampleParameters = { key1: string, key2: number, key3: boolean }
function example({ key1, key2, key3 }: ExampleParameters) {
  console.log("Extracted keys from example:", key1, key2, key3)
}

//Hypothetical scenario utilizing inline definition
function sample({ key1 }: { key1: string }) {
  console.log("Selected key from sample:", key1)
}

const data = { key1: "Value One", key2: 5, key3: true }

example(data)
sample(data)

Answer 7

Answer №4

One approach that could simplify the code is by introducing a shared rest parameter type:

type SharedParams = [number, boolean];

// Define function foo with parameters p1 and a destructured array of shared params

function foo(p1: string, [p2, p3]: SharedParams){
    ...
}

// Attempting to create function bar with an array for p1 and rest parameter using SharedParams

function bar(p1: string[], ...rest: SharedParams){
    ...
}

Playground

Answer 8

One approach that could simplify the code is by introducing a shared rest parameter type:

type SharedParams = [number, boolean];

// Define function foo with parameters p1 and a destructured array of shared params

function foo(p1: string, [p2, p3]: SharedParams){
    ...
}

// Attempting to create function bar with an array for p1 and rest parameter using SharedParams

function bar(p1: string[], ...rest: SharedParams){
    ...
}

Playground

how to use all parameters except the first one in TypeScript

Answer №1

Option 1: Simplified Variadic Tuple Syntax

Option 2: Named Tuple Elements

Answer №2

Answer №3

Answer №4

Similar questions

Retrieving specific properties from a JSON object and logging them

The requested property map cannot be found within the Array

Creating a unique Angular 2 Custom Pipe tutorial

What is the most effective method to create a versatile function in Angular that can modify the values of numerous ngModel bindings simultaneously?

What is the best way to reload a React/TypeScript page after submitting a POST request?

Unclear on the usage of "this" in arrow functions?

IntelliJ IDEA does not support the recognition of HTML tags and directives

When attempting to utilize the dispatch function in a class-based component, an invalid hook call error may

Is it possible to begin the vue root instance by using a .vue class component?

Utilizing type guards in prop functions for conditional rendering within React TypeScript adds an extra layer

What steps do I need to take in order to set up InfluxDB with Nest

Is there possibly a problem with GridActionsCellItem and its props?

Retrieve the raw text from the input field instead of the date object

"Troubleshooting Angular 2 Directives That Cause Errors

Using a Typescript typeguard to validate function parameters of type any[]

It is possible that req.user may be undefined, especially when using express and passport.js

Finding the right way to cancel a Firestore stream within a Vue component using the onInvalidate callback

Is there a way to insert data from one table into a MySQL Table in Drizzle and update the entry if it already exists?

Connect an Observable to the template with async binding

node-ts displays an error message stating, "Unable to locate the name 'DEV' (TS2304)."

how to use all parameters except the first one in TypeScript

Answer №1

Option 1: Simplified Variadic Tuple Syntax

Option 2: Named Tuple Elements

Answer №2

Answer №3

Answer №4

Similar questions

Retrieving specific properties from a JSON object and logging them

The requested property map cannot be found within the Array

Creating a unique Angular 2 Custom Pipe tutorial

What is the most effective method to create a versatile function in Angular that can modify the values of numerous ngModel bindings simultaneously?

What is the best way to reload a React/TypeScript page after submitting a POST request?

Unclear on the usage of "this" in arrow functions?

IntelliJ IDEA does not support the recognition of HTML tags and directives

When attempting to utilize the dispatch function in a class-based component, an invalid hook call error may

Is it possible to begin the vue root instance by using a .vue class component?

Utilizing type guards in prop functions for conditional rendering within React TypeScript adds an extra layer

What steps do I need to take in order to set up InfluxDB with Nest

Is there possibly a problem with GridActionsCellItem and its props?

Retrieve the raw text from the input field instead of the date object

"Troubleshooting Angular 2 Directives That Cause Errors

Using a Typescript typeguard to validate function parameters of type any[]

It is possible that req.user may be undefined, especially when using express and passport.js

Finding the right way to cancel a Firestore stream within a Vue component using the onInvalidate callback

Is there a way to insert data from one table into a MySQL Table in Drizzle and update the entry if it already exists?

Connect an Observable to the template with async binding

node-ts displays an error message stating, "Unable to locate the name '__DEV__' (TS2304)."

node-ts displays an error message stating, "Unable to locate the name 'DEV' (TS2304)."