TS入门——02.函数

函数定义

函数就是一组可以执行某种特定功能的代码段，函数声明告诉编译器函数的名称、返回类型和参数

函数就是使用了关键词 function把代码块包裹在花括号中，如下

// 函数声明
function fn() {
  console.log('函数执行了')
}
// 函数调用
fn() // 函数执行了
           

大多时候，我们需要通过函数指定返回值给调用处，在js中我只需通过关键字return即可返回任意类型的值，但是在ts中我们需要给返回值指定一个返回类型，如果没有返回值，编译器默认返回类型为void，也就是没有返回值，所以上面的代码就等价于：

// 函数声明
function fn(): void {
  console.log('函数执行了')
}
// 函数调用
fn() // 函数执行了
           

有返回值的函数如下

// 带返回值的函数
function fn1(): string {
  return 'lucky'
}
console.log(fn1()) // lucky
           

我们在调用函数时有时需要给函数内部传递某些值，在js中只需根据相关形参个数传入实参即可，但在ts中则需要规定传入参数的数据类型，例：

// 带参数的函数
function fn(age: number, name: string): string {
  return name + '今年' + age + '岁'
}

console.log(fn(18, 'lucky')) //lucky今年18岁
           

总结ts定义函数的语法有：

通过function关键字定义函数

function 函数名(参数1：参数类型，参数2：参数类型，…)： 返回类型 { return 返回值 }

通过匿名函数的方法定义函数

var 函数名 = function(参数1：参数类型，参数2：参数类型，…): 返回类型 { return 返回值 }

通过Function构造函数的方式来定义函数，但是不建议使用

var 函数名 = new Function(‘a’, ‘b’, ‘return a + b’)

函数定义拓展

可选参数

带可选参数的函数 在参数的后面加入’?’（可选参数必须放在必选参数的后面）

function fn3(a: number, b?: number): number {
  if (b) {
    return a + b
  } else {
    return a
  }
}

console.log(fn3(2, 3)) // 5
console.log(fn3(2)) // 2
           

默认参数

带默认参数的函数 给参数赋值，可以不传值，可以重新赋值

function fn14(name: string, age: number = 18) {
  return name + age + '岁'
}

console.log(fn14('lucky')) // lucky18岁
console.log(fn14('lucky', 22)) // lucky22岁
           

剩余参数

如果函数不指定参数个数，可以通过扩展运算符来实现传递若干数量的参数

function fn(...arr: number[]): number {
  let sum = 0;
  arr.forEach(value => {
    sum += value
  })
  return sum
}

console.log(fn(1, 2)) // 3
console.log(fn(1, 2, 3)) // 6
console.log(fn(1, 2, 3, 4)) // 10
           

函数重载

定义一个函数名相同，参数的数量或者类型不同的函数就叫做函数的重载，在ts中的函数重载方式案例如下

function overload(name: string): void;
function overload(name: string, age: number): void;
function overload(age: number, name: string): void;

function overload(m: any, n?: any): void {
  console.log(m, n)
};

overload('lucky') // lucky undefined
overload('lucky', 22) // lucky 22
overload(22, 'lucky') // 22 lucky
           

箭头函数

ts支持es6语法，箭头函数示例写法如下

// 箭头函数
var fn = (x:number): number => {
  return x
}

console.log(fn(1000)) // 1000
           

以上便是本人学习ts函数的基础知识了，若有不正，谨听指教