函数介绍
// 函数:封装了一些重复使用的代码,在需要的时候直接调用即可
(() => {
// js写法
// 函数声明,命名函数
// function add(x, y) {
// return x + y
// }
// 函数表达式,匿名函数
// const add2 = function (x, y) {
// return x + y
// }
// ts写法
// 函数声明,命名函数
// 函数中的x和y参数的类型是string类型,小括号后面的:string,代表的是该函数的返回值也是string类型
function add(x: string, y: string): string {
return x + y
}
console.log(add('123', '456'));
// 函数表达式,匿名函数
const add2 = function (x: number, y: number): number {
return x + y
}
console.log(add2(11, 22));
// 函数的完整写法
const add3: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y
}
console.log(add3(10, 100));
})()
可选参数和默认参数
// 可选参数:函数在声明的时候,内部的参数使用了?进行修饰,那么就表示该参数可以传入也可以不用传入,叫可选参数
// 默认参数:函数在声明的时候,内部的参数有自己的默认值,此时这个参数叫默认参数
(() => {
const getFullName = function (firstName: string = '东方', lastName?: string): string {
if (lastName) {
return firstName + '_' + lastName
} else {
return firstName
}
}
// 函数调用
// 什么也不用传入
console.log(getFullName());
// 只传入姓氏
console.log(getFullName('诸葛'));
// 传入姓氏和名字
console.log(getFullName('诸葛', '孔明'));
})()
剩余参数
// 剩余参数(rest参数)
// 剩余参数是放在函数的声明的时候所有的参数的最后
(() => {
// ...args:string[] --->剩余的参数,放在一个字符串的数组中,args里面
function showMsg(str: string, str2: string, ...args: string[]) {
console.log(str);
console.log(str2);
console.log(args);
}
showMsg('a', 'b', 'c', 'd', 'e', 'f')
})()
函数重载
// 函数重载:函数名字相同,函数的参数及个数不同
(() => {
// 函数重载声明
function add(x: string, y: string): string
function add(x: number, y: number): number
// 函数声明
function add(x: string | number, y: string | number) {
if (typeof x === 'string' && typeof y === 'string') {
return x + y
} else if (typeof x === 'number' && typeof y === 'number') {
return x + y
}
}
// 函数调用
console.log(add('诸葛', '孔明'));
console.log(add(10, 20));
// 如果此时传入的为非法数据,ts会提示错误
console.log(add('12', 20));
console.log(add(10, '21'));
})()