Typescript function parameters

typescript function interface
typescript generic function
typescript arrow function
typescript function overloading
typescript named parameters
typescript anonymous function
typescript types
typescript class

I'm encountering a scenario where I have many functions with similar parameters and struggling to find a solution to make everything easily maintainable. Take the following example:

public func1(param1: string, param2: string, param3: string){}
public func2(param1: string, param2: string, param3: string){}
public func3(param1: string, param2: string, param3: string){}

public func4(param1: string, param2: string, param3: string, param4: string){}
public func5(param1: string, param2: string, param3: string, param4: string){}
public func6(param1: string, param2: string, param3: string, param4: string){}

... Etc

Initially I was thinking about an interface such as:

interface IMyInterface {
  param1: string;
  param2: string;
  param3: string;
}

and using it in the fuction:

public func1(args: IMyInaterface) {

}

But then in fuction 4,5,6 I can't really extend it to accept N number of additional args without creating new interfaces and I don't want to maintain all the derived interfaces.

I'd also like to keep my typings (not all parameters are strings and all functions have a defined number of parameters) so something like

func1(...args: string){}

wouldn't work

Any Idea how best to go about this?

in function 4,5,6 I can't really extend it to accept N number of additional args without creating new interfaces

Actually, you could use an intersection type to extend an interface "inline":

interface BaseArgs {
    foo:string, 
    bar: number
}

function func1(a: BaseArgs) {}
function func2(a: BaseArgs & {more: boolean}) {}

func1({foo: "aa", bar: 3}) // ok
func2({foo: "aa", bar:3, more: true}) // ok

Do's and Don'ts · TypeScript, Don't ever have a generic type which doesn't use its type parameter. See more function fn(x: () => void) { var k = x(); // oops! meant to do something else k. typescript documentation: Function as a parameter. Example. Suppose we want to receive a function as a parameter, we can do it like this:

You can use the question mark "?" to represent if a variable is necessary or not, for instance:

public func4(param1?: string, param2?: string, param3?: string, param4?: string){}

In this function you can pass 0, 1, 2, 3 or 4 params.

Are strongly-typed functions as parameters possible in TypeScript , Sure. A function's type consists of the types of its argument and its return type. Here we specify that the callback parameter's type must be "function that accepts a  Even though there is technically no such thing as a named parameter in TypeScript (or JavaScript), the language offers a syntax that makes it possible to use a very similar functionality! Named

Since TypeScript 3.0 we've been able to represent function parameter lists as tuple types. So your use case can be supported by something like this:

type ThreeStrings = [string, string, string];
type FourStrings = [string, string, string, string];

class Blarg {
  public func1(...param: ThreeStrings) {}
  public func2(...param: ThreeStrings) {}
  public func3(...param: ThreeStrings) {}
  //(method) Blarg.func3(param_0: string, param_1: string, param_2: string): void

  public func4(...param: FourStrings) {}
  public func5(...param: FourStrings) {}
  public func6(...param: FourStrings) {}
  // (method) Blarg.func6(param_0: string, param_1: string, param_2: string, param_3: string): void
}

You can see that IntelliSense shows the methods as having distinct parameters like param_0, param_1, etc.


You can also have IntelliSense keep track of parameter names by using the following notation:

type OtherParams = Parameters<
  (name: string, age: number, likesAsparagus: boolean) => void
>;


class Blarg {
  public func7(...param: OtherParams) {}
  public func8(...param: OtherParams) {}
  public func9(...param: OtherParams) {}
  // (method) Blarg.func9(name: string, age: number, likesAsparagus: boolean): void
}

Okay, hope that helps. Good luck!

Link to code

TypeScript Functions, Function Parameters. Parameters are values or arguments passed to a function. In TypeScript, the compiler expects a function to receive the exact number and type of arguments as defined in the function signature. Default Parameters. Same as JavaScript ES6 default parameters, TypeScript also supports default function parameter.In TypeScript, that even works for pre ES6 versions.

Alright, so far as I can see you have two options.

The first one: you can create an interface with all the parameters that the functions must have as a base and then pass an object with the additional attributes. i.e:

interface BaseParams {
  param1: string
  param2: string
}

const params = {
  param1 = 'the 3rd'
  param2 = 'is'
  param3 = 'additional'
}

The key here, is to not add the params object to be part of BaseParams, then you can create the function like this:

const funct = (params: BaseParams) => {
...
}

//call it with the object you created
funct(params)

Typescript will only evaluate if the object you are passing has the fields from the interface you created.

The other option and the less known is to use Partial from Typescript, it makes all the attributes you declared in the interface to be optional, so you won't have to pass each param like param1?: string. In this order, you have to create an interface with all the possible params.

interface Params {
 param1: string
 param2: string
 param3: string
 param4: string
 paramN: string
}

const funct = (params: Partial<Params>) => {
...
}

TypeScript functions optional parameters - Kushal Grover, How do you return a value from a TypeScript function? TypeScript - Functions - Functions are the building blocks of readable, maintainable, and reusable code. A function is a set of statements to perform a specific task.

Typescript Optional Parameters Guide, In functions, parameters are the values or arguments that passed to a function. The TypeScript, compiler accepts the same number and type of arguments as defined in the function signature. If the compiler does not match the same parameter as in the function signature, then it will give the compilation error. TypeScript is a strong typed language. When we declare parameters for a function then all the parameters are required and client has to pass values to every parameter. When client has no value for any parameter then he can pass null value. TypeScript provides a Optional parameters feature.

TypeScript Function Parameter, Although in JavaScript, every parameter is optional. Then how do create functions in TypeScript with same name and different parameters? You  Function type literals are another way to declare the type of a function. They're usually applied in the function signature of a higher-order function. A higher-order function is a function which accepts functions as parameters or which returns a function. It has the following syntax: (arg1: Arg1type, arg2: Arg2type) => ReturnType Example:

Function With Parameter in TypeScript, To call a function, you code the function name followed by the function's parameters or arguments in parentheses. The following uses parameters  Typing Destructured Object Parameters in TypeScript November 13, 2015. In TypeScript, you can add a type annotation to each formal parameter of a function using a colon and the desired type, like this:

Comments
  • One plain object with 4 properties to start? Then you can add as many properties later as you want.
  • is implementation of your functions the same?
  • If my answer doesn't meet your neds then please expand your code to a minimal reproducible example with more detailed use cases. When you say "extend to accept N number of additional args without creating new interfaces" you might want to be more explicit, since it's trivial to prepend arguments (func(newArg: boolean, param1: string, param2: string, param3: string){}) but clunky/messy to append arguments (func(param1: string, param2: string, param3: string, newArg: boolean){}), and I'm not sure if N is something you need to be generic or what. Good luck!
  • what about func1(...args: any[]){}? or func1(one:string,two:number,...rest:any[]){}, see typescriptlang.org/docs/handbook/functions.html#rest-parameters
  • This is exactly what I was looking for, thank you! I just couldn't figure out the syntax for something like that.
  • All parameters on all functions are necessary and they need to be constrained to just those parameters to get the proper typing and ease for refactoring
  • Maintaining the list of tuples would be about the same as a list of interfaces since each tuple is unique instead of inheriting from something like a base tuple.
  • Please post a minimal reproducible example which demonstrates what a solution you'd accept would look like. Obviously you don't have an implementation or you wouldn't ask the question, but you're presumably thinking of a general form of solution that would be acceptable. e.g., "if I could do public func515(...param: MagicStuff<ThreeStrings, SomethingElse>){} which had the effect of ______ and ______, that would be ideal."
  • never mind, I see you wanted to intersect interfaces. Cheers!
  • This was my line of thought as well but neither are a solution that I found to be better than just passing in the parameters by themselves. In the first option param3 would not be known inside funct and would cause an error if you tried to access it. The second option would not cause an error if I did not pass in all the parameters I need to the interface.