🎬 江城开朗的豌豆：个人主页
🔥 个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想，就是为了理想的生活 !
目录
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 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"。
剩余参数（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 54321reverse('hello'); // returns 'olleh'在上面的例子中，我们定义了两个重载：一个是接受number类型的参数，另一个是接受string类型的参数。然后我们在实现函数中处理了这两种情况。
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧
来源地址：https://blog.csdn.net/qq_48652579/article/details/132857261
