《现代Typescript高级教程》函数

简介: 函数TypeScript提供了丰富的函数类型定义方式,可以对函数参数、返回值进行类型注解,从而提供了更为强大的类型检查。函数声明在TypeScript中,你可以在函数声明中对函数的参数和返回值进行类型注解。以下是一个例子:

函数

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

函数声明

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

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

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

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

typescript

复制代码

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

函数表达式

在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

可选参数和默认参数

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

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

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

typescript

复制代码

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"。

剩余参数(Rest Parameters)

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

...来定义剩余参数:

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

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

this和箭头函数

箭头函数可以保留函数创建时的 this值,而不是调用时的值。在TypeScript中,你可以使用箭头函数来确保this的值:

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);
            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}
let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
alert("card: " + pickedCard.card + " of " + pickedCard.suit);

在上面的例子中,createCardPicker函数返回一个箭头函数,这个箭头函数可以访问创建时的this值。

重载

在JavaScript中,根据传入不同的参数调用同一个函数,返回不同类型的值是常见的情况。TypeScript通过为同一个函数提供多个函数类型定义来实现这个功能:

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}
reverse(12345);  // returns 54321
reverse('hello');  // returns 'olleh'

在上面的例子中,我们定义了两个重载:一个是接受number类型的参数,另一个是接受string类型的参数。然后我们在实现函数中处理了这两种情况。

目录
相关文章
|
6月前
|
人工智能 JavaScript 程序员
一文彻底搞明白HarmonyOS基础TypeScript中的泛型函数
程序员Feri是一位拥有12年+经验的技术专家,擅长嵌入式、鸿蒙、人工智能和Java等领域。本文深入探讨TypeScript中的泛型函数,涵盖基础语法、类型约束、高级技巧及应用场景。通过泛型函数,实现代码逻辑与具体类型的解耦,提升类型安全性和复用性。内容包括集合操作、API抽象、工具类开发等实际应用,以及条件类型、默认类型参数和工具类型的高级技巧。最后提醒开发者注意过度泛型化和性能权衡问题,总结泛型函数在TypeScript类型系统中的核心地位及其未来发展方向。
142 1
一文彻底搞明白HarmonyOS基础TypeScript中的泛型函数
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
868 2
|
12月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
12月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
12月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
225 1
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
184 0
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
267 0
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理

热门文章

最新文章