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

Implement conditional props for a React component by linking them to existing props

"Exploring Angular 9: A guide to retrieving form data with an array of objects [Revised as of July 29th, 2020

Ensuring the presence of TypeScript variables

The server has access to an environment variable that is not available on the client, despite being properly prefixed

Modify a single parameter of an element in a Map

Utilizing Typescript and sinon to mock the functionalities of jsonwebtoken

Module error caused by Typescript path inconsistency

Angular v15 Footer Component Table

Generate a Jest dummy for testing an IncomingMessage object

Include type declarations for property values that resemble arrays in a generic object

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

Angular - passing information to a nested component

TS2304 TypeScript (TS) Unable to locate the specified name

Is it feasible to evaluate a Typescript method parameter decorator at request time in a nodejs+nestjs environment rather than just at build time?

What is the best way to test for errors thrown by async functions using chai or chai-as-promised?

Setting up Next Js to display images from external domains

Exploring generic types using recursive inference

Ways to align the label at the center of an MUI Textfield

What is the best way to transform the request query id = ' [12eetftt76237,jhgasduyas7657] ' into an array of elements or strings like [12eetftt76237,jhgasduyas7657]?

Creating a dynamic selection in Angular without duplicate values