函数的语法就不一一赘述了,在ts中对函数的使用更加明确
1. 基本用法
function userInfo(name: string, age: number): string {
return `{age}`
}
console.log(userInfo('张三', 20))//输出 张三--20
参数和返回值类型必须一一对应,函数如果没有返回值,用void标识
2.方法可选参数
2.1 在es5中,函数的形参和实参类型可以不一样,但在ts中必须一样,如果不一样就需要设置可选参数,在参数后添加 ? 表示可传可不传
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // 正确
let result2 = buildName("Bob", "Adams", "Sr."); // 错误,参数太多了
let result3 = buildName("Bob", "Adams"); // 正确
可选参数必须跟在必需参数后面,如果都是可选参数就没关系。 如果上例我们想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面。
2.2默认参数
参数如果设置了默认值,在函数调用时不传参数,则使用默认值
例:function calculate_discount(price:number,rate:number = 0.50) {
var discount = price * rate;
console.log("计算结果: ",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.30)
匿名函数除没有函数名,其他与标准函数一样
var res = function(a:number, b:number){
return a*b
}
console.log(res(2,10))//输出20
2.3 剩余参数
使用三点运算符,接受新参传过来的值
function sum(...result:number):number{
var sum = 0;
for( var i=0;i<result.length;i++){
sum+= result[i]
}
return sum
}
console.log(sum(1,2,3,4,5))//输出15
2.4 函数重载
例: function userInfo(){...}
function userInfo(){...}
在ES5中同名函数,执行时后面的函数会覆盖掉前面的函数,而在ts中不会,ts中函数名可以相同,参数不同,返回的值类型也不同,每一个函数必须要有一个独一无二的参数类型列表
function userInfo(name:string):string;
function userInfo(name:string,age:number):string;
function userInfo(name:string,age?:any):any{
if(age){
return '我叫'+ name + '我的年龄是'+ age
} else {
return '我叫:'+name
}
}
console.log(userInfo('张三'))//输出 我叫张三 正确
console.log(userInfo(123))// 错误
console.log(userInfo('张三', 20))//输出 我叫张三,我的年龄是20 正确
2.5 箭头函数
箭头函数中的this指向上下文
var foo = (x:number)=>{
return x + 10
console.log(x)
}
foo(100)//输出110