Typescript's dynamic arguments feature allows for passing varying numbers of parameters without using ell

Question

Typescript's dynamic arguments feature allows for passing varying numbers of parameters without using ell

  // Defining function:
  lm( vv: number, kk: string[] )
  {
    console.log( kk )
  }

  // Invoking the function
  this.lm( 33, ["dd","ff","da"] )

I have thoroughly tested the provided code and it is working flawlessly.

But why do we need ellipses?

Refer to: https://www.typescriptlang.org/docs/handbook/functions.html

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

The compiler collects all arguments after the specified parameter following the ellipsis (...) into an array, allowing for flexible usage within the function.

typescript

Answer 1

Answer №1

After analyzing your query, it appears that you are comparing two distinct elements. Although both examples lead to the same result on display, they are implemented differently.

Essentially, these represent two separate concepts (syntax) with unique use cases.

  // Defining a function:
  lm( vv: number, kk: string[] )
  {
    console.log( kk )
  }

  // Invoking the function
  this.lm( 33, ["dd","ff","da"] )

and

  // Defining a function:
  lm( vv: number, ...kk: string[] )
  {
    console.log( kk )
  }

  // Invoking the function
  this.lm( 33, "dd","ff","da" )

An instance where ellipsis proves to be more advantageous :

type funcDefinition = (commandName: number, ...params: string[]) => void;

const funcA: funcDefinition = (vv: number, p1: string = 'defA', p2: string = 'defB', ...othersParams: string[]) => {
  console.log(vv, p1, p2, othersParams);
}

const funcB: funcDefinition = (vv: number, p1: string, ...othersParams: string[]) => {
  console.log(vv, p1, othersParams);
}

const funcC: funcDefinition = (vv: number, ...othersParams: string[]) => {
  console.log(vv, othersParams);
}

Answer 2

After analyzing your query, it appears that you are comparing two distinct elements. Although both examples lead to the same result on display, they are implemented differently.

Essentially, these represent two separate concepts (syntax) with unique use cases.

  // Defining a function:
  lm( vv: number, kk: string[] )
  {
    console.log( kk )
  }

  // Invoking the function
  this.lm( 33, ["dd","ff","da"] )

and

  // Defining a function:
  lm( vv: number, ...kk: string[] )
  {
    console.log( kk )
  }

  // Invoking the function
  this.lm( 33, "dd","ff","da" )

An instance where ellipsis proves to be more advantageous :

type funcDefinition = (commandName: number, ...params: string[]) => void;

const funcA: funcDefinition = (vv: number, p1: string = 'defA', p2: string = 'defB', ...othersParams: string[]) => {
  console.log(vv, p1, p2, othersParams);
}

const funcB: funcDefinition = (vv: number, p1: string, ...othersParams: string[]) => {
  console.log(vv, p1, othersParams);
}

const funcC: funcDefinition = (vv: number, ...othersParams: string[]) => {
  console.log(vv, othersParams);
}

Typescript's dynamic arguments feature allows for passing varying numbers of parameters without using ell

Answer №1

Similar questions

Issue encountered: Jest database test does not end when using testcontainers

Best practices for initializing model objects in a Redux or NgRx application architecture

Having trouble deploying Firebase Cloud function following the migration to Typescript

Exploring Methods to Define Class Types as Parameter Types in Typescript

Tips for implementing pagination on a large JSON file without traditional pagination controls

Encountering build errors in .xproj file when working with Type Script in ASP.Net Core

Encountering Error 203 while trying to establish a connection between Angular and Django Rest Api

Encountering a Runtime Exception while utilizing MapQuest's direction routing feature on Ionic 3

having difficulty interpreting the information from angular's httpclient json request

Pass the type of object property as an argument in the function

Oops! Looks like you forgot to provide a value for the form control named <name>. Make sure to fill

Retrieving information from BlobStorage using Service.ts and triggering the NgOnit function

Conflicting TypeScript enum types: numbers and numbers in NestJS/ExpressJS

Utilizing Type Script 1.8 with Visual Studio 2017 for older projects: A step-by-step guide

TypeScript combines strong typing for arrays into a unified array of objects

How is it that TypeScript still expects a valid return from an overridden method, even when it cannot be reached?

Typescript's implementation of AngularJs provider

What is a Generic Type in an Array?

What is the best approach to re-establish a websocket connection in TypeScript?

Discovering the steps to showcase _app.tsx within next.js 13 through module federation