这篇“TypeScript函数”助力你突破月薪1.5w+了，赶快收藏吧

前言

目录

目录

前言

目录

进阶TS 函数

1 函数的定义

2 函数表达式

3 没有返回值

4 可选参数

5 默认参数

6 剩余参数

7 函数重载

结语

---

进阶TS 函数

1 函数的定义

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

function hello(name:string):void {
    console.log('hello',name);
}
hello('zfpx');

2 函数表达式

• 定义函数类型

type GetUsernameFunction = (x:string,y:string)=>string;
let getUsername:GetUsernameFunction = function(firstName,lastName){
  return firstName + lastName;
}

3 没有返回值

:void就是函数没有返回值，如果函数后面跟的是：string 就是函数返回值必须是string

let hello2 = function (name:string):void {
    console.log('hello2',name);
    return undefined;
}
hello2('zhufeng');

4 可选参数

在TS中函数的形参和实参必须一样，不一样就要配置可选参数,而且必须是最后一个参数，类似于和变量设置类型一样。

function print(name:string,age?:number):void {
    console.log(name,age);
}
print('zfpx');

5 默认参数

function ajax(url:string,method:string='GET') {
    console.log(url,method);
}
ajax('/users');

6 剩余参数

function sum(...numbers:number[]) {
    return numbers.reduce((val,item)=>val+=item,0);
}
console.log(sum(1,2,3));

7 函数重载

• 在Java中的重载，指的是两个或者两个以上的同名函数，参数不一样
• 在TypeScript中，表现为给同一个函数提供多个函数类型定义

let obj: any={};
function attr(val: string): void;
function attr(val: number): void;
function attr(val:any):void {
    if (typeof val === 'string') {
        obj.name=val;
    } else {
        obj.age=val;
    }
}
attr('zfpx');
attr(9);
attr(true);
console.log(obj);

结语

1.ts就是把js弱类型变成类似强类型。

2.命名一个变量let aa，你可以给aa赋值任何类型，boolen string array function。

3.ts会让代码更规范

更多文章

TypeScripts前端基础篇(1)---ts基本数据类型

2021直击大厂前端开发岗位面试题