【Typescript 入门手册】之函数类型在 TypeScript 中的应用

快来打我* 2022-09-02 11:34 348阅读 0赞

【Typescript 入门手册】之函数类型在 TypeScript 中的应用

本篇文章篇幅较小，起到一个承上启下的作用，尽可能利用我们熟悉的例子并加入一些Ts的类型检测，让我们对函数类型有一个概念

上一篇文章《【Typescript 入门手册】之函数类型在 TypeScript 中的应用》在这里，本篇文章将继续聊一聊Ts中的函数与我们熟知的有什么不同？

系列文章，收藏不走丢哦

在这里插入图片描述

一、函数声明

在 JavaScript 中，有两种常见的定义函数的方式——函数声明和函数表达式：

  1. // 函数声明（Function Declaration）
  2. function sum(x, y) { 
  3.   return x + y;
  4. }
  6. // 函数表达式（Function Expression）
  7. const mySum = function(x, y) { 
  8.   return x + y;
  9. };

1.1 函数声明

一个函数有输入和输出，要在 TypeScript 中对其进行约束，两者都要考虑到，其中函数声明的类型定义较简单：

  1. function sum(x: number, y: number): number { 
  2.   return x + y;
  3. }

输入多余的（或者少于要求的）参数，是不被允许的：

  1. function sum(x: number, y: number): number { 
  2.   return x + y;
  3. }
  5. sum(1);
  6. // 应有 2 个参数，但获得 1 个。ts(2554)
  7. // index.ts(1, 25): 未提供 "y" 的自变量。
  9. sum(1, 2, 3); // 应有 2 个参数，但获得 3 个

1.2 函数表达式

如果要我们现在写一个对函数表达式定义它的输入输出，应该是怎么样的呢？

  1. let mySum1 = function(x: number, y: number): number { 
  2.   return x + y;
  3. };

这段代码不会报错，也是正确的，而还有一种函数表达式的定义是这样的:

  1. let mySum2: (x: number, y: number) => number = function(
  2.   x: number,
  3.   y: number
  4. ): number { 
  5.   return x + y;
  6. };

注意：此箭头，并不是 ES6 中我们熟知的箭头函数哦～

两者的区别是 mySum1 的类型是推导出来的，而 mySum2 是直接定义的，但两者其实一样，不需要深究。

1.3 用接口定义函数的形状

我们也可以使用接口的方式来定义一个函数需要符合的形状：之前我们都是用接口来定义对象和数组，自然函数也可以定义“形状”

  1. interface expFunc { 
  2.   (x: number, y: number): number;
  3. }
  5. let mySum1: expFunc;
  6. let mySum2: expFunc;
  7. mySum1 = function(x: number, y: number) { 
  8.   return x + y;
  9. };
  10. mySum2 = function(x, y) { 
  11.   return x + y;
  12. };

这样可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。

1.4 可选参数

前面提到，输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？

与接口中的可选属性类似，我们用?表示可选的参数：

  1. function hello(name1: string, name2?: string): void { 
  2.   console.log(`hello! ${ name1} ${ name2 ? "and" + " " + name2 : ""}`);
  3. }
  5. hello("余光1", "余光2"); // hello! 余光1 and 余光2
  6. hello("余光"); // hello! 余光

需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了：

1.5 参数默认值

在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数：

  1. function hello(name1: string = "余光", name2: string = "yuguang"): void { 
  2.   console.log(`hello! ${ name1} ${ name2 ? "and" + " " + name2 : ""}`);
  3. }
  5. hello(); // hello! 余光 and yuguang
  6. hello("小明"); // hello! 小明 and yuguang

是不是又拉回到了我们熟悉的领域？

1.6 剩余参数

ES6 中，可以使用 …rest 的方式获取函数中的剩余参数（rest 参数）：

  1. function func(a, ...arg) { 
  2.   console.log(a);
  3.   console.log(arg);
  4. }
  6. func(1, 2, 3, 4); // 1, [2, 3, 4]

注意： rest参数只能是最后一个参数

在这里插入图片描述

写在最后

本篇文章是《Typescript基础入门》第三篇，到这里就结束了，主要带大家了解一下函数Ts中的表现，其实到这里有关一门语言中基础部分——类型相关的知识已经聊得差不多了，下一篇文章我们来聊一聊Ts中特殊的，或者说会让我们“陌生”的概念，希望大家通过这三篇文章能打消对Ts的抵触和迷茫，一起加油～

系列文章传送门：

  1. 【Typescript入门手册】之基本类型在TypeScript中的应用
  2. 【Typescript入门手册】之引用类型在TypeScript中的应用
  3. 本篇

关于我

其他沉淀

  • Github: Js版LeetCode题解
  • 前端进阶笔记
  • CSDN博客汇总

blog-bottom.gif

发表评论

表情：
评论列表 （有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读