如题。
ts中函数语法大致和es6一致,因为ts中也兼容es5的语法,故es5的代码在ts中也并不会报错。又因为ts比js多了可选的类型,故ts的语法看起来更像传统面向对象编程语言(如java、c#等)的语法。
ts中函数(方法):
函数的定义
可选参数
默认参数
剩余参数
函数重载
箭头函数 es6
===========================================
1、函数定义。
//1 函数的定义
//es5函数声明
function f(){
console.log("hello f");
}
//es5 匿名函数
var f2=function () {
console.log("hello f2");
}
f2();//调用函数
//ts中没有返回值的函数
function run():void{ console.log('run')
}
run();//调用函数
//ts中指定返回值类型(number)的函数
var run2=function():number{
//return "aa";//ts编译报错
return 123;
}
console.log(run2());//调用函数
2、函数可选参数
//2 可选参数
// es5里面方法的实参和形参数量可以不一样,但是ts中必须一样,如果不一样就需要配置函数可选参数。
//注意:可选参数必须放到形参列表的最后
function getInfo(name:string,age?:number):string{
if(age){
return "我的姓名:"+name+",年龄:"+age;
}else{
return "我的姓名:"+name;
}
}
console.log((getInfo('zhangsan')));
console.log((getInfo('zhangsan', 123)));
3、函数默认参数
//3 默认参数
// es5里面函数没法设置默认参数,es6和ts中函数都可以设置默认参数
//这里设置age参数的默认值为20,默认参数只能放到形参列表最后。
function getInfo(name:string,age:number=20):string{
if(age){
return "我的姓名:"+name+",年龄:"+age;
}else{
return "我的姓名:"+name;
}
}
console.log( getInfo('张三'));
console.log( getInfo('张三',30));
4、函数剩余(rest)参数
// 4、剩余参数
// function sum(a:number,b:number,c:number,d:number):number{
// return a+b+c+d;
// }
// alert(sum(1,2,3,4)) ;
//三点运算符 接收所有多余的参数
// ...rest 参数是一个数组,可接收函数剩下的所有参数,rest参数只能放在函数形参列表最后。
function sum(a:number,b:number,...rest:number[]):number{
var total=a+b;
for(var i=0;i<rest.length;i++){
total+=rest[i];
}
return total;
}
console.log(sum(1,2,3,4,5,6)) ;//21
5、ts中函数重载
// 5、ts函数重载 (比较特殊)
// java中方法的重载:重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况。
// typescript中的重载:通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
//ts为了兼容es5 以及 es6 重载的写法和java中有区别。
//es5中若出现同名方法,后声明的会覆盖之前声明的(前声明的方法失效)
/*
function css(config){
}
function css(config,value){
}
*/
//ts中的重载
//下面的两行函数声明,指明getInfo函数接收的参数s可为string或number类型
function getInfo(name:string):string;
function getInfo(age:number):string;
//下面是getInfo函数的实现
function getInfo(s:any):any{
if(typeof s==='string'){
return '我叫:'+s;
}else{
return '我的年龄是'+s;
}
}
console.log(getInfo('张三')); //正确
console.log(getInfo(20)); //正确
// console.log(getInfo(true)); //错误写法 ts编译报错
6、ts中箭头函数
// 6、箭头函数 es6
//注意:this指向的问题 箭头函数里面的this指向当前函数定义所在的上下文,而普通函数中this是指向运行时上下文
//es5
// setTimeout(function(){
// //this 指向运行时上下文
// console.log('run...')
// },1000);
//ts es6中箭头函数
setTimeout(()=>{
//this指向当前函数定义所在的上下文
console.log('run...')
},1000);