带你读《现代TypeScript高级教程》三、函数(1)

简介: 带你读《现代TypeScript高级教程》三、函数(1)

三、函数

TypeScript提供了丰富的函数类型定义方式,可以对函数参数、返回值进行类型注解,从而提供了更为强大的类型检查。


1.函数声明


在TypeScript中,你可以在函数声明中对函数的参数和返回值进行类型注解。以下是一个例子:

 

function add(x: number, y: number): number {
    return x + y;}

在这个例子中,我们定义了一个add函数,它接受两个参数xy,这两个参数都是number类型,函数的返回值也是number类型。

 

如果你尝试调用这个函数并传入一个非数字类型的参数,TypeScript编译器会报错:

 

add("Hello", 1); // Error: Argument of type '"Hello"' is not assignable to parameter of type 'number'.


2.函数表达式


在JavaScript中,函数不仅可以通过函数声明的方式定义,还可以通过函数表达式定义。在TypeScript中,函数表达式也可以使用类型注解:

 

let myAdd: (x: number, y: number) => number = function(x: number, y: number): number {
return x + y;
};

在上面的例子中,我们首先定义了myAdd变量的类型为一个函数类型(x: number, y: number) => number,然后将一个匿名函数赋值给myAdd。这个匿名函数的参数xy的类型是number,返回值的类型也是number


3.可选参数和默认参数


TypeScript支持可选参数和默认参数。你可以使用?来标记可选参数,或者使用= 来指定参数的默认值:

 

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;}
let result1 = buildName("Bob");  // works correctly nowlet result2 = buildName("Bob", "Adams");  // ah, just right

 

在上面的例子中,lastName是一个可选参数。你可以不传这个参数调用buildName函数。

function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;}
let result1 = buildName("Bob");  // returns "Bob Smith"let result2 = buildName("Bob", "Adams");  // returns "Bob Adams"

 

在上面的例子中,lastName有一个默认值"Smith"。如果你不传这个参数调用buildName函数,lastName的值将是"Smith"。


4.剩余参数(Rest Parameters)


当你不知道要操作的函数会有多少个参数时,TypeScript提供了剩余参数的概念。与JavaScript一样,你可以使用三个点...定义剩余参数:

 

 

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

 

在上面的例子中,restOfName就是剩余参数,它可以接受任意数量的参数。


带你读《现代TypeScript高级教程》三、函数(2)https://developer.aliyun.com/article/1348559?groupCode=tech_library

相关文章
|
5月前
|
JavaScript 前端开发 编译器
TypeScript 函数第一章
TypeScript 函数第一章
50 4
|
4月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
28 0
|
10天前
|
JavaScript 前端开发 编译器
TypeScript中的高级类型:联合类型、交叉类型与条件类型深入解析
【4月更文挑战第23天】探索TypeScript的高级类型。这些特性增强类型系统的灵活性,提升代码质量和维护性。
|
2月前
|
JavaScript 安全
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
|
3月前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
45 0
|
3月前
|
JavaScript 前端开发 编译器
10分钟让你吃透 《TypeScript》 函数
TypeScript提供了丰富的函数类型定义方式,可以对函数参数、返回值进行类型注解,从而提供了更为强大的类型检查。
|
4月前
|
JavaScript 前端开发 编译器
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
26 0
|
4月前
|
JavaScript 前端开发 程序员
TypeScript【枚举、联合类型函数_基础、函数_参数说明 、类的概念、类的创建】(二)-全面详解(学习总结---从入门到深化)
TypeScript【枚举、联合类型函数_基础、函数_参数说明 、类的概念、类的创建】(二)-全面详解(学习总结---从入门到深化)
19 0
|
4月前
|
JavaScript 前端开发 API
2020你应该知道的TypeScript学习路线【函数类型】
2020你应该知道的TypeScript学习路线【函数类型】
30 0
|
4月前
|
JavaScript 前端开发 API
TypeScript: 常用的高级类型
TypeScript: 常用的高级类型