Typescript function参数

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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. ie:

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>) => {
...
}