函数 - 5

TS 中的函数

1. type 用来定义一个 类型 或者 类型别名

1. 函数的定义

可以指定参数的类型和返回值的类型

function hello(name: string): void {
  console.log(name);
};
hello("ruhua")

2. 函数表达式

定义函数类型

type UserNameType = (firstName: string, lastName: string) => string;
let UserName: UserNameType = function(firstName, lastName){
  return firstName + lastName;
};
// 等同于
let UserName = function(firstName, lastName): string {
  return firstName + lastName;
}

3. 没有返回值 即返回类型是: void

let hello = function(name: string): void {
  console.log(name);
  return undefined
}
hello("ruhua")

4. 可选参数

在TS中函数的形参和实参必须一样，不一样就要配置可选参数，而且必须是最后一个参数

function print(name: string, age: number, home?: string) {

}
print("ruhua", 18, "HongKong");
print("ruhua", 18);

TS中的函数，形参和实参要么不传，要么必须保持一致。如果形参有三个，那么实参必须是 0 个和 3个，这两种情况。我们可以用 ? 问号来表示该参数为可选参数

5. 默认参数

function ajax(url: string, method: string = "GET") {
  console.log(url, method);
};
ajax("/user"); // /user GET
ajax("/user", "POST"); // /user POST

6. 剩余参数

function sum(...number: Array<number>) {
  return number.reduce((accu, item) => accu + item, 0);
};

7. 函数重载 overload

举例1：

let obj: any = {};

function attr(val: string): void; // 第一个重载，表示函数可以接收一个 string 类型
function attr(val: number): void; // 第二个重载，表示函数也可以接收一个 number 类型
function attr(val: any): void { // 重载和函数之间必须紧紧挨在一起，不能有其它代码
  if (typeof val === "string") {
    obj.name = val
  } else if(typeof val === "number") {
    obj.age= val
  };
};

attr("ruhua");
attr(18);
console.log(obj);

这个例子，也可以用 联合类型 来实现：function attr(val: string | number): void {};
但是某些复杂的情况，还得用到 函数重载，比如下面的例子中，规定函数中的两个参数必须同时是 数字 或者同时是 字符串
举例2：

function sum2(a: number, b: number): void;
function sum2(a: string, b: string): void;
function sum2(a: any, b: any): void{

};
// sum2(1, "d"); // 报错
sum2(1, 2);
sum2("s", "d");

8. 箭头函数

TS 写箭头函数跟JS中是一样的

let delay = (ms: number) => {
  setTimeout(function() {
    console.log("123")
  }, ms);
}