TS入门——02.函数

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函数的基础知识了,若有不正,谨听指教

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值