【typescript入门手册】函数

简介: 【typescript入门手册】函数

在TypeScript中,可选参数和默认参数、剩余参数以及函数重载可以帮助我们更灵活地定义和使用函数。

1、可选参数和默认参数:


可选参数允许我们在调用函数时省略一些参数,而默认参数为函数的参数提供了默认值。


举个例子,假设我们有一个函数greet用于问候,接受一个名称参数和一个可选的消息参数:


function greet(name: string, message?: string) {
    if (message) {
        console.log(`Hello, ${name}! ${message}`);
    } else {
        console.log(`Hello, ${name}!`);
    }
}


当我们调用这个函数时,可以只传递名称参数,而可选的消息参数可以省略:


greet("Alice"); // 输出:Hello, Alice!


如果我们想要提供消息参数,可以在调用时传递它:


greet("Bob", "How are you?"); // 输出:Hello, Bob! How are you?


此时,函数内部会打印带有消息的完整问候语。可选参数和默认参数可以使函数使用更加方便和灵活。


2、剩余参数:


剩余参数允许我们在函数中接受不定数量的参数,并将它们作为数组在函数内部使用。


举个例子,我们有一个函数sum用于计算一组数字的总和:


function sum(...numbers: number[]) {
    let total = 0;
    for (let number of numbers) {
        total += number;
    }
    return total;
}


我们可以传递任意数量的参数给函数,并且函数内部会将这些参数相加并返回结果:


console.log(sum(1, 2, 3)); // 输出:6
console.log(sum(4, 5, 6, 7, 8)); // 输出:30


剩余参数使用三个点(...)前缀来表示,它将多个参数收集到一个数组中,方便在函数内部进行处理。这样,我们可以更便捷地传递和处理不定数量的参数。


3、重载:


重载允许函数根据不同的参数类型或个数来执行不同的逻辑。它在类型检查和类型推断方面提供了更强大的功能。


举个例子,假设我们有一个函数getInfo用于根据参数输出一个字符串:


function getInfo(param: string): string;
function getInfo(param: number): string;
function getInfo(param: string | number): string {
    if (typeof param === 'string') {
        return `Name: ${param}`;
    } else if (typeof param === 'number') {
        return `Age: ${param}`;
    } else {
        return "";
    }
}


通过使用函数重载,我们对函数getInfo进行了多个函数签名的声明。当我们传递字符串参数时,函数会返回以名称为前缀的字符串;当我们传递数字参数时,函数会返回以年龄为前缀的字符串。


例如:


console.log(getInfo("Alice")); // 输出:Name: Alice
console.log(getInfo(25)); // 输出:Age: 25


通过函数重载,我们可以在编译时进行类型检查,以确保我们使用正确的参数类型调用函数。重载用于在根据不同的参数类型或个数执行不同的逻辑时提供更好的类型安全性和可读性。

相关文章
|
3月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
206 2
|
2月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
2月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
3月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
3月前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
35 0
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
90 0
|
5月前
|
JavaScript
TypeScript(六)函数
TypeScript(六)函数
32 0
|
6月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
35 0
|
6月前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数
|
6月前
|
JavaScript 前端开发
typescript 函数类型
typescript 函数类型