​TypeScript基本知识点整理——函数

 函数

1. 函数定义

定义函数有函数声明和函数表达式两种形式。定义函数的参数和返回值可以指定其类型；当调用函数时，传入参数类型必须与定义函数参数类型保持一致。

函数声明定义

function f(age:number) : string {    return `找到了${age}的小哥哥`;}let age : number = 22;let res : string = f(age);

函数表达式定义

let f1 = (age:number) : string => {    return `找到了${age}的小哥哥`;}let age1 :number = 21;let res1 : string = f1(age1);

注意：表达式定义完以后，必须调用函数

函数表达式还有一种写法： 函数表达式：指定变量fn的类型

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

/ let fn: (x: Type, y: Type) => Type = (x, y) => {} //例子var run3: (x: number, y: number) => string = function(x: number, y: number): string{    return 'run3';}console.log(run3(1, 2))  //当给变量run3指定类型的时候，应该是函数的参数和返回值的约束类型。如果用后面学到的ts类型推论，可以简写为： var run4: (x: number, y: number) => string = function(x, y){ // 类型推论可以确定函数的参数和返回值类型，也就可以省略类型指定    return 'run4';}console.log(run4(1, 2))

2. 函数没有返回值可以使用void类型值定返回值

function  f3() : void {    console.log('没有返回值')}f3()

3. 可选参数的函数

注意：可选参数一定要放在参数的最后面

function f4(age:number, cm?:number) : string {//cm为可选参数，可传可不传    if (cm) {        return `可选参数------身高为${cm}厘米`;    } else {        return `可选参数-----年龄${age}岁`    }}console.log(f4(12))console.log(f4(24, 175))

4. 有默认值参数的函数

注意：ts会将添加了默认值的参数识别为可选参数，有默认值的参数的位置不受【可选参数必须放在后面】的限制

function f5(age:number, cm:number = 188) : string {    return `默认参数----年龄为${age}岁---身高为${cm}cm`}console.log(f5(25))

5. 剩余参数的函数

//当有很多参数的时候，或者参数个数不确定，可以用三点运算符function f6(...rest:number[]) : number[] {    return [...rest];}console.log(f6(1,2,3,4,5,6,7,8,9)) function f7(a:number, b:number, ...rest:number[]) : number[] {    return [a, b, ...rest]} console.log(f7(100,200,1,2,3,4,5,6))

6. 接口中的函数

第一种写法

interface int1 {    say (age:number) : void  //抽象方法}

第二种写法

interface int2 {    say : (age:number) => void  //抽象方法}

7.函数的重载

注意：

先声明所有方法重载的定义，不包含方法的实现

再声明一个参数为any类型的重载方法

实现any类型的方法并通过参数类型（和返回类型）不同来实现重载

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

TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。

function f1(x: number, y: number): number;function f1(x: string, y: string): string; // 上面定义函数的格式，下面定义函数的具体实现function f1(x: any, y: any): any {    return x + y;} f1(1, 2);f1('a', 'b');

总结

      学过java的同学可能会感觉到有内味了~。Ts函数和Java的方法有这很相似的地方。

    下一篇文章会出关于TypeScript的类的知识点，敬请期待。

 

 

扫描关注公众号，更多前端技能Get

 

你点的每个赞，我都认真当成了喜欢