Functions are the foundation of JavaScript applications. It helps you implement abstraction layers, mock classes, information hiding and modules. In TypeScript, although classes, namespaces, and modules are supported, functions are still the primary place to define behavior. TypeScript adds extra functionality to JavaScript functions to make them easier to use.

Define a type for a function

In general, we don’t have to write out the full function type because TypeScript automatically extrapolate the type for us. It’s important to note that parameter names in types don’t have to match parameter names in values, as long as their types are compatible.

// Write the completion function type
let square: (x: number, y: number) = > number;
square = function (width: number, height: number) :number {
  return width * height;
}
console.log(square(5.6)); / / 30

Copy the code

Optional parameters

Parameter name followed by? , this parameter becomes optional. Note that optional parameters must be followed by required parameters

let square: (x: number, y: number, s? :number) = > number;
square = function (width: number, height: number, scale? :number) :number {
  if(scale) {
    return width * height * scale;
  } else {
    returnwidth * height; }}console.log(square(5.6)); / / 30
console.log(square(5.6.2)); / / 60

Copy the code

The default parameters

When the user didn’t give a parameter value or value is undefined, pass this parameter called can have default values of parameters, we can use = value specified in this case, of all the parameters must be followed by the default values of parameters are optional, and the optional parameters, when the function can be omitted, However, a parameter with a default value does not have to be placed after the required parameter, but can also be placed before it. When undefined is passed, the default value specified by the default parameter is taken.

function square(width = 6, height = 6, scale: number, cut = 10) :number {
  return width * height * scale - cut;
}
square(5.undefined.2); // 5 * 6 * 2 = 50
Copy the code

The remaining parameters

Like ES6, TypeScript supports residual parameters.

function max(a: number, b: number. resArr:number[]) :number {
  return Math.max(a, b, ... resArr); }console.log(max(10.5.6.100.200)); / / 200

Copy the code

This problem

In TypeScript, we can specify the type of this in the first argument. Although this is in the first argument of the method, it really only qualifies the type of this, not passing the value as the first argument

class Person {
  constructor(public name: string.public age: number) {
  }
  show(this: Person, doing: string) {
    console.log(`${this.name} is ${this.age}, now is ${doing}`); }}let me = new Person('funlee'.18);
me.show('Coding'); // funlee is 18, now is Coding

Copy the code

We can qualify this in callback functions:

interface UIElement {
  addClickListener(onclick: (this: void, e: Event) = > void) :void
}
Copy the code

Where this: void means that addClickListener expects the onclick callback not to specify the type of this. So what happens when you qualify this? Here’s an example:

class Handler {
  info: string;
  onClickBad(this: Handler, e: Event) {
    this.info = e.message; }}const h = new Handler();
uiElement.addClickListener(h.onClickBad); // Error because this type does not match

// Fix error: Change this type
class Handler {
  info: string;
  onClickBad(this: void, e: Event) {
    this.info = e.message; }}const h = new Handler();
uiElement.addClickListener(h.onClickBad);

Copy the code

overloading

TypeScript allows us to define multiple function type definitions for function overloading, and the compiler handles function calls based on the list of definitions.

function foo(x: number): string function foo(x: string): string function foo(x): any { if (typeof x === 'number') { return `${x} is a number`; } else if (typeof x === 'string') { return `${x} is a string`; } } console.log(foo(123)); // output: 123 is a number console.log(foo('123')); // Output: '123' is a stringCopy the code