前端笔记 -- TypeScript(二) | 青训营笔记

57 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第十四天

最近学习了TypeScript函数相关部分的知识,于是,想写一篇笔记来作为复习总结,回顾一下相关的知识。

函数是一组一起执行一个任务的语句。

您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。

函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。

函数返回值

语法格式如下所示:

function function_name():return_type { 
    // 语句
    return value; 
}
  • return_type 是返回值的类型。
  • return 关键词后跟着要返回的结果。
  • 一般情况下,一个函数只有一个 return 语句。
  • 返回值的类型需要与函数定义的返回类型(return_type)一致。\

实例

// 函数定义 
function greet():string { 
// 返回一个字符串 
    return "Hello World" 
    } 
function caller() { 
    var msg = greet() // 调用 greet() 函数 
    console.log(msg) } 
    // 调用函数 
    caller()

带参数函数

语法格式如下所示:

function func_name( param1 [:datatype], param2 [:datatype]) {   
}
  • param1、param2 为参数名。
  • datatype 为参数类型。

实例

function add(x: number, y: number): number { 
        return x + y; 
    } 
console.log(add(1,2))

可选参数和默认参数

可选参数

在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?。

实例

function buildName(firstName: string, lastName?: string) { 
    if (lastName) return firstName + " " + lastName; 
    else return firstName; 
} 
    let result1 = buildName("Bob"); // 正确 
    let result2 = buildName("Bob", "Adams", "Sr."); // 错误,参数太多了 
    let result3 = buildName("Bob", "Adams"); // 正确

可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面。

如果都是可选参数就没关系。

默认参数

我们也可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数,语法格式为:

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意:参数不能同时设置为可选和默认。

实例

以下实例函数的参数 rate 设置了默认值为 0.50,调用该函数时如果未传入参数则使用该默认值:

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 
    calculate_discount(1000) 
    calculate_discount(1000,0.30)

输出结果为:

计算结果:  500
计算结果:  300

函数重载

重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。

每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。

参数类型不同:

function disp(string):void; 
function disp(number):void;

参数数量不同:

function disp(n1:number):void; 
function disp(x:number,y:number):void;

参数类型顺序不同:

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

实例

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
    disp("abc") 
    disp(1,"xyz");

输出

abc
undefined
1
xyz

总结

本文主要介绍了TypeScript中与函数相关部分的知识,希望能对不了解的同学有所帮助。

参考

菜鸟教程