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