TypeScript的函数

1. 函数声明

1.1 函数声明法

function fun1(): string { // 指定返回类型
  console.log("string");
  return "string";
}
fun1();

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

1.2 函数表达式

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

1.3 匿名函数

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

TypeScript中的函数也是可以做类型校验的，不过在返回返回值时与箭头函数返回返回值类似

// (str:string) => number 就是对于函数的类型校验
let fun: (str:string) => number = function(): number {
  console.log(str);
  return 123;
};
fun("string");

// 返回一个具有返回值的函数
let fun: (str:string) => (() => number) = function(): number {
  return () => {
    return 123;
  };
};
/*
  但是一般都只写一边,因为TypeScript有根据上下文的类型推断机制,可以写更少的代码
*/

---

2. 函数传参

在TypeScript中对函数传参，形参也需要指定对应类型，如果实参传入类型错误会报错，但是形参也可以指定多种数据类型，也可以是类

function fun(name: string, age: number) :string {
  return `${name}----${age}`;
}
console.log(fun("张三",18));

function fun(name: string, age :number | string) :string {
  return `${name}----${age}`;
}
console.log(fun("张三","18"));

2.1 可选参数

在JS中函数的形参和实参可以不一样，但是在TypeScript中必须要一一对应，如果不一样就必须要配置可选参数

可选参数必须配置到参数的最后面，可以有多个可选参数

// 通过给最后的参数加上?来设置可选参数
function fun(name: string, age?: number): string {
  if (age) {
    return `${name}----${age}`;
  } else {
    return `${name}----年龄保密`;
  }
}
console.log(fun("张三", 18)); // 张三----18
console.log(fun("李四")); // 李四----年龄保密

2.2 默认参数

在TypeScript中默认参数的传入和JS中一样，如果没有传入该参数那么默认就会使用默认参数

默认参数和可选参数不能在同一个形参变量上使用，而且两者同时存在的时候传入参数的顺序得注意

// 直接给形参赋值
function fun(name: string = "王五", age?: number): string {
  if (age) {
    return `${name}----${age}`;
  } else {
    return `${name}----年龄保密`;
  }
}
console.log(fun("张三", 18)); // 张三----18
console.log(fun()); // 王五----年龄保密

2.3 剩余参数

在TypeScript中的剩余参数也是和JS中的一样，通过扩展运算符(...)接受剩余参数

// 通过扩展运算符传入参数
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

---

3. 函数重载

在TypeScript中通过为同一个函数提供多个函数类型定义来实现多种功能的目的

在JS中，如果出现了同名方法，下面的方法会替换掉上面的方法

// 函数重载
function fun(name: string): string;
function fun(age: number): string;
function fun(str: any): any { // 如果要进行函数重载判断,那么这个形参和返回值的类型必须要包含上面函数
  // 根据传入参数的不同进入不同的重载函数中,虽然这里的类型为any,但主要是为了包含上面,传参由上面判断
  if (typeof str === "string") {
    return "我是" + str;
  } else {
    return "我的年龄为" + str;
  }
}
// fun函数能传入的参数只能是string和number,传入其他参数会报错
console.log(fun("张三")); // 我是张三
console.log(fun(18)); // 我的年龄为18
console.log(fun(true)); // 错误写法,报错

// 函数重载
function fun(name: string): number; // 返回不同的类型
function fun(name: string, age: number): string;
function fun(name: any, age?: any): any { // 也可以传入可选参数,根据参数的不同进入不同的重载函数
  if (age) {
    return "我是" + name + ",年龄为" + age;
  } else {
    return 123;
  }
}

console.log(fun("张三", 18)); // 我是张三,年龄为18
console.log(fun("张三")); // 123
console.log(fun("张三", true)); // 错误写法,在重载函数中无法找到对应函数

---

4. 箭头函数

在TypeScript中箭头也是和JS中的一样的用法

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

---

5. this

TypeScript中的this是可以在函数传参数时手动指定其类型限定，这个类型限定可以为TypeScript提供推断依据

class Animale {
  name: string = "动物";
  eat(this: Animale) {
    console.log(this.name);
  }
}

class Animal {
  name: string = "动物";
  eat(this: void) { // 而如果指定的void再调用下面的则会报错,因为类型不匹配了
    console.log(this.name);
  }
}

let a = new Animal();
a.eat();