『TypeScript』函数

来让我们看一下 TypeScript 中的函数

 1. 箭头函数

let fn = () => console.log('fn');

type TFn = (s: number, b: number) => void;
let fnn:Fn = function (a: number, b: number){

}

2. 参数类型和返回类型

函数的参数类型 可以按照普通数据类型加注解的方式直接写 x: number, y: number

函数的返回值 注解 () :number=>{} 如果没有返回值 类型用 void

function myFn(name: string, age: number): string {
    return name + '-' + age;
}

1. 函数中的参数是对象的时候

属性之间可以使用 , 号进行分割；

每个属性的类型也是可以指定，如果不指定默认就是any类型；

function getData(data: {name:string, age:number, flag?:boolean}){
    console.log(data.name)
    console.log(data.age)
    console.log(data.flag)
}

getData({name:"1",age:2, flag:true})
getData({name:"1",age:2})

 3. 可选参数及默认参数

// 可选参数
function optional(name: string, id: number, age?: number): string {
  return name + id;
}

// 默认参数
function default(
  name: string = "愣头青",
  id: number,
  age?: number
): string {
  return name + id;
}

在声明函数是，可以通过 ? 号来定义可选参数，通过 name: string = '我不是愣头青' 来定义默认参数。

4. 剩余参数

function myPush(array, ...items) {
  items.forEach(function (item) {
    array.push(item);
  });
}

myPush([], 1, 2, 3);

3. 可推导的this类型

ts在编译时,认为我们的this是可以正确去使用的:
ts认为sayHello函数有一个对应this的外部对象(obj),所以在使用是,就会把this当作该对象

let obj = {
    name: "你好世界",
    sayHello(){
        console.log(this.name)
    }
    // sayHello: function(){
    //     console.log(this.name)
    // }
};
obj.sayHello()

4. 不确定的this类型

function sayHello() {
    console.log(this.name)
}
sayHello();//==>this ==>window
let obj = {
    name: "你好世界",
    sayHello
};
obj.sayHello();//==>this ==>obj

// 原因:首先我们使用ts来编写代码 主要就是为了检测类型使我们的代码更加的安全

5. 指定this的类型

type Obj = {
    name: string
}
//this:Obj ==>只是为了告诉ts当前的this是谁,并不是当前方法的第一个参数,他在执行的时候是被忽略的
function sayHello(this:Obj, a: number) {
    console.log(this.name, a)
}
let obj = {
    name: "你好世界",
    sayHello
};
obj.sayHello(123);//==>this ==>obj

6. 函数的重载

函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种能力。

// 函数签名  通过函数签名的形式来实现函数重载
function sum(a1:number, a2:number): number;
function sum(a1:string, a2:string): string;
function sum(a1: any, a2: any){
    return a1+a2
}
// 在调用sum函数的时候，它会根据我们传入的参数类型，来决定执行函数时，到底执行哪一个函数签名
sum(1,2); // 3
sum("1","2"); // "12"

// 有重载的情况下，那么哪怕数据类型是any只要不符合任意一个重载函数签名，那么都是不能使用的
// sum({a1:1},{a2:2});//"12"


// 需求: 定义一个函数,可以传入字符串或者数组，要求获取他们的长度
// 通过联合类型来去实现效果
/*function getLength(arg: string | any[]){
    return arg.length
}*/
// 通过函数重载来实现效果
function getLength(arg: string): number;
function getLength(arg: any[]): number;
function getLength(arg: any){
    return arg.length
}
getLength("hahaha");
getLength([1,2,3,4,5]);

// 在可能的情况下，尽量来选择通过联合类型去实现