函数是 JavaScript 应用程序的基础，将程序中重复的代码通过函数封装起来，提高代码复用。

基本示例

和 JavaScript 一样，TypeScript 函数可以创建有名字的函数和匿名函数。 TypeScript支持原生的JavaScript函数格式

  1. (() => {
  2.   // 命名函数(函数声明)
  3.   function add(x, y) {
  4.     return x + y
  5.   }
  7.   // 匿名函数(函数表达式)
  8.   let myAdd = function (x, y) {
  9.     return x + y;
  10.   }
  11.   // 调用命名函数
  12.   console.log(add(1,2))
  13.   // 调用匿名函数
  14.   console.log(myAdd(2,3))
  15. })()
  16. // 输出结果
  17. // 3
  18. // 5

函数类型

TypeScript是一门强类型语言，推荐在使用函数时，给函数的参数和返回值指定类型

  1. (() => {
  2.   // 命名函数(函数声明)
  3.   function add(x:string, y:string):string {
  4.     return x + y
  5.   }
  7.   // 匿名函数(函数表达式)
  8.   let myAdd = function (x:number, y:number):number {
  9.     return x + y;
  10.   }
  11.   // 调用命名函数
  12.   console.log(add('1','2'))
  13.   // 调用匿名函数
  14.   console.log(myAdd(2,3))
  15. })()
  16. // 输出结果
  17. // 12
  18. // 5

完整写法

  1. (() => {
  2.   // myAdd——变量名
  3.   // (x: number, y: number) => number——当前这个myAdd函数的类型
  4.   // function (x: number, y: number): number { return x + y }——符合上面这个函数类型的值
  5.   let myAdd: (x: number, y: number) => number = function (x: number, y: number): number {
  6.     return x + y
  7.   }
  8.   // 调用函数
  9.   console.log(myAdd(2, 3))
  10. })()
  11. // 输出结果
  12. // 5

可选参数和默认参数

默认参数：函数在声明的时候，内部的参数用=指定一个默认值，表示该参数是默认参数 可选参数：函数在声明的时候，内部的参数用？修饰，表示该参数可有可无 示例：定义一个函数，传入姓氏和名字，得到姓名

  • 需求：如果不传入任何内容，返回默认的姓氏（姓氏默认参数）
  • 需求：如果只传入姓氏，就返回姓氏（名字可选参数）
  • 需求：如果传入姓氏和名字，就返回姓名
    1. (() => {
    2. let fullName = function (firstName: string = '诸葛', lastName?: string): string {
    3.   // 判断是否传入了名字
    4.   if (lastName) {
    5.     return firstName + '-' + lastName
    6.   } else {
    7.     return firstName
    8.   }
    9. }
    10. // 什么也不传入
    11. console.log(fullName())
    12. // 传入姓氏
    13. console.log(fullName('欧阳'))
    14. // 传入姓氏和名字
    15. console.log(fullName('欧阳', '峰'))
    16. })()
    17. // 输出结果
    18. // 诸葛
    19. // 欧阳
    20. // 欧阳-峰

    剩余参数

    有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在 TypeScript 里，你可以把所有参数收集到一个变量里：

剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以 有任意个。 

  1. (() => {
  2.   function showMsg(str1: string, str2: string, ...other: string[]): void {
  3.     console.log(str1)
  4.     console.log(str2)
  5.     console.log(other)
  6.   }
  7.   showMsg('欧', '杨', '峰', '是', '好', '人', '吗')
  8. })()
  9. // 输出结果
  10. // 欧
  11. // 杨
  12. // (5) ["峰", "是", "好", "人", "吗"]

函数重载

函数名字相同，但函数的参数和个数不同

需求：定义一个函数，当传入两个string时，进行拼接。当传入两个number时，进行相加。

  1. (() => {
  2.   // 函数重载声明
  3.   function add(x:string,y:string):string
  4.   function add(x:number,y:number):number
  5.   function add(x: string|number, y: string|number): string|number {
  6.     if (typeof x==='string' && typeof y==='string'){
  7.       return x+y //字符串拼接
  8.     }else if (typeof x==='number' && typeof y==='number'){
  9.       return x+y //数字相加
  10.     }
  11.   }
  12.   console.log(add('1','2'))
  13.   console.log(add(1,2))
  14.   // 如果传入数据非法，ts编译直接报错
  15.   console.log(add('1',2))
  16. })()
  17. // 输出结果
  18. // 12
  19. // 3
  20. //   Overload 1 of 2, '(x: string, y: string): string', gave the following error.
  21. //     Argument of type 'number' is not assignable to parameter of type 'string'.
  22. //   Overload 2 of 2, '(x: number, y: number): number', gave the following error.
  23. //     Argument of type 'string' is not assignable to parameter of type 'number'.