TypeScript函数

最新推荐文章于 2024-05-06 10:59:44 发布

原创最新推荐文章于 2024-05-06 10:59:44 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

typeScript 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了TypeScript中函数的定义方式，包括函数声明、匿名函数、参数类型检查、可选参数、默认参数、剩余参数及函数重载。同时对比了ES5与TypeScript在函数定义上的差异，并介绍了箭头函数的使用。

TypeScript函数

//es5定义函数的两种方法
//函数声明法
function fun(){

}

//匿名函数
var run = function(){
}

//ts 中定义函数的方法
 
 function(name: string, age: number): number {

         return '${name} -- ${age}';
 };

var getInfo  = function(name:string,age:number):string {
          return '${name} -- ${age}';

}
alert(getInfo('zs',100));

es5里面方法的实参和形参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数；

//如果age 可以传可以不传，那么写法如下

function getInfo(name:string,age?:number):string{

    if(age){

        return '${name} ----------${age}';
    }else{

        return '${name}----年龄保密'；
    }

}

alert(getInfo('xx',123));

es5中参数没有默认值，但是ts中方法可以有默认值

//如果age 可以传可以不传，那么写法如下

function getInfo(name:string,age:number=20):string{

    if(age){

        return '${name} ----------${age}';
    }else{

        return '${name}----年龄保密'；
    }

}

alert(getInfo('xx',123));

剩余参数

function (a:number,b:number,c:number,d:number):number{

    return a+b+c+d;
}

如果这里传入第5个参数那么就需要改函数，所以可以用es6的三点运算符，接受形参值

function sum(...result:number[]):number{

    var sum = 0;
    for(var i = 0;i<rsult.length;i++){
        sum += result[i];
    }
}

函数重载

java中方法的重载：两个或两个以上函数名相同，参数不同，这是会出现重载；

typescript中的重载：通过同一个函数提供多个函数类型定义来实现不同的多种功能；

ts为了兼容es5，以及es6重载的写法和java有了区别。

function css(con){

}

function css(con,val){

}
很明显在es5中下面的会替换上面的方法

//ts中的重载
function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any{
    if(typeof str ==='string'){
        return '我叫'+str;
    }else{
        return '我的年龄是'+str;
    }
}

箭头函数：

//es5中的箭头函数
setTimeout(function(){
    alert('run');
},1000)

//es6中的箭头函数
setTimeout(()=>{
    alert('run');
},1000)

箭头函数的this 指向上下文。