10分钟让你吃透 《TypeScript》 函数

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

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


函数声明


在TypeScript中,你可以在函数声明中对函数的参数和返回值进行类型注解。


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


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


如果你尝试调用这个函数并传入一个非数字类型的参数,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。这个匿名函数的参数x和y的类型是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函数。

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类型的参数。然后我们在实现函数中处理了这两种情况。


请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.


✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式


✅ 认为我部分代码过于老旧,可以提供新的API或最新语法


✅ 对于文章中部分内容不理解


✅ 解答我文章中一些疑问


✅ 认为某些交互,功能需要优化,发现BUG


✅ 想要添加新功能,对于整体的设计,外观有更好的建议


最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧

相关文章
|
2月前
|
JavaScript 前端开发 编译器
TypeScript 函数第一章
TypeScript 函数第一章
53 4
|
2月前
|
JavaScript 前端开发
TypeScript - 函数(上)
TypeScript - 函数(上)
|
2月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
42 0
|
2月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
25天前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数
|
25天前
|
JavaScript 前端开发
typescript 函数类型
typescript 函数类型
|
27天前
|
JavaScript 编译器 前端开发
11.【TypeScript 教程】函数(Function)
11.【TypeScript 教程】函数(Function)
8 0
|
2月前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
55 0
|
2月前
|
JavaScript 前端开发 API
2020你应该知道的TypeScript学习路线【函数类型】
2020你应该知道的TypeScript学习路线【函数类型】
39 0
|
2月前
|
JavaScript 前端开发 安全
详细介绍 TypeScript 函数的各种特性、用法和最佳实践
详细介绍 TypeScript 函数的各种特性、用法和最佳实践
58 3