1. Function declaration

1.1 Function declaration method

function fun1() :string { // Specify the return type
    console.log("string");
    return "string";
}
fun1();

function fun2() :void {
    console.log("void");
}
fun2();
Copy the code

1.2 Function Expression

let fun = function() :number {
    console.log(123);
    return 123;
}
fun();
Copy the code

1.3 Anonymous Functions

let result: number = (function() :number {
    return 10; }) ();console.log(result); / / 10
Copy the code

TypeScript functions can also do type validation, but return values similar to those returned by arrow functions

// (STR :string) => number is the type check of the function
let fun: (str:string) = > number = function() :number {
  console.log(str);
  return 123;
};
fun("string");

// Returns a function with a return value
let fun: (str:string) = > (() = > number) = function() :number {
  return () = > {
    return 123;
  };
};
/* This is usually done on one side, since TypeScript has a context-based type inference mechanism that allows you to write less code */
Copy the code

2. Function parameters are passed

In TypeScript, to pass parameters to a function, you need to specify a type for the parameter. An error will be reported if the parameter is passed in the wrong type. However, parameters can specify multiple data types as well as classes

function fun(name: string, age: number) :string {
    return `${name}----${age}`;
}
console.log(fun("Zhang".18));
Copy the code
function fun(name: string, age: number | string) :string {
    return `${name}----${age}`;
}
console.log(fun("Zhang"."18"));
Copy the code

2.1 Optional Parameters

Function parameters and arguments can be different in JS, but in TypeScript they must correspond one to one. If they are different, optional arguments must be configured

Optional parameters must be set to the end of the parameter. Multiple optional parameters can be configured

// By adding? To the last argument To set optional parameters
function fun(name: string, age? :number) :string {
  if (age) {
    return `${name}----${age}`;
  } else {
    return `${name}---- Age confidential; }}console.log(fun("Zhang".18)); / / zhang SAN - 18
console.log(fun("Bill")); // Li Si ---- Age confidential
Copy the code

2.2 Default Parameters

Default parameters are passed in TypeScript just as they are in JS. If they are not passed in, they are used by default

Default and optional parameters cannot be used on the same parameter, and the order in which they are passed must be considered when both exist

// Assign the parameter directly
function fun(name: string = "Fifty", age? : number) :string {
  if (age) {
    return `${name}----${age}`;
  } else {
    return `${name}---- Age confidential; }}console.log(fun("Zhang".18)); / / zhang SAN - 18
console.log(fun()); // Wang Wu ---- Age confidential
Copy the code

2.3 Remaining Parameters

The remaining arguments in TypeScript are the same as in JS by extending the operators (…). Accept residual parameters

// Pass the argument through the extension operator
function sum(a: number, b: number. result:number[]) :number {
  let sum: number = a + b;
  sum = result.reduce(function(prev: number, next: number) :number {
    return prev + next;
  }, sum);
  return sum;
}

console.log(sum(0.1.1.2.3.4.5)); / / 16
Copy the code

3. Function overload

Multiple functions are achieved in TypeScript by providing multiple function type definitions for the same function

In JS, if a method of the same name appears, the following method replaces the above method

// Function overload
function fun(name: string) :string;
function fun(age: number) :string;
function fun(str: any) :any { // The type of the parameter and return value must contain the above function if the function is overloaded
  // Enter different overloaded functions depending on the parameters passed in. Although the type here is any, the main purpose is to include the above
  if (typeof str === "string") {
    return "I am" + str;
  } else {
    return "My age is"+ str; }}// Fun can pass only string and number arguments. If you pass other arguments, an error will be reported
console.log(fun("Zhang")); // I am Zhang SAN
console.log(fun(18)); // MY age is 18
console.log(fun(true)); // Error
Copy the code
// Function overload
function fun(name: string) :number; // Return different types
function fun(name: string, age: number) :string;
function fun(name: any, age? :any) :any { // You can also pass in optional arguments to enter different overloaded functions depending on the arguments
  if (age) {
    return "I am" + name + ", age is" + age;
  } else {
    return 123; }}console.log(fun("Zhang".18)); // MY name is Zhang SAN. I am 18 years old
console.log(fun("Zhang")); / / 123
console.log(fun("Zhang".true)); // The function cannot be found in the overloaded function
Copy the code

Arrow function

Arrows are used in TypeScript the same way they are in JS

setTimeout(() :void= > {
    console.log(123);
});
Copy the code

5. this

This in TypeScript allows you to manually specify a type qualification when a function is passed as an argument. This type qualification provides TypeScript with a basis for inference

class Animale {
  name: string = "Animal";
  eat(this: Animal) {
    console.log(this.name); }}Copy the code
class Animal {
  name: string = "Animal";
  eat(this: void) { // If the specified void calls the following void, an error is reported because the types do not match
    console.log(this.name); }}let a = new Animal();
a.eat();
Copy the code