函数

函数是JavaScript应用程序的基础。 它帮助你实现抽象层，模拟类，信息隐藏和模块。 在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义 行为的地方。 TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。

和JavaScript一样，TypeScript函数可以创建有名字的函数和匿名函数。 

函数声明

// es5定义函数的方法
//函数的声明类
function run(){
    return "run"
}
//匿名函数
var run2=function(){
    return "run2"
}

//ts中定义函数的方法
//函数声明法
function run():string{
    return "run"  //正确
   // return 123  //错误
}
console.log(run())
//匿名函数法
var fun=function():number{
    //return "run"  //错误
    return 123  //正确
}
console.log(fun())

 

 ts中定义方法传参

//ts中定义方法传参
function getinfo(name:string,age:number):string{
    return `${name}+${age}`;
}
console.log(getinfo("小明",20))

传入参数的时候注意，参数的指定类型，如果传入的参数的类型与指定类型不同就会报错

 

 比如在这里定义name指定类型为number，此时传入的数据为字符串就会报错

 ts中匿名方法传参

var getinfo=function(name:string,age:number):string{
    return  `${name}+${age}`;
}
console.log(getinfo("小明",20))

 

 没有返回值的方法

//没有返回值的方法
function run():void{
    console.log(123)
}
run()

方法的可选参数

//方法的可选参数
// es5中方法的形参和实参可以不一样，但是在ts中必须一样，如果不一样就需要配置可选参数
function getinfo(name:string,age:number):string{
    if(age){
        return `${name}+${age}`;
    }else{
        return name
    }
}
console.log(getinfo("小明"))

此时代码会执行，但是在ts中会编译不通过

 

 编译后的1.js文件

 

 我们可以在age后加一个“？”，表示这个age可传可不传

function getinfo(name:string,age?:number):string{
    if(age){
        return `${name}+${age}`;
    }else{
        return name
    }
}
console.log(getinfo("小明"))

此时就不会编译报错

注意：可选参数必须配置到参数的最后面

此时我们的name参数是可选的

function getinfo(name?:string,age:number):string{
    if(age){
        return `${name}+${age}`;
    }else{
        return name
    }
}
console.log(getinfo("小明"))

在ts编译中会报错，但是会正常输出

 

 这是错误的写法，可选参数必须配置到参数的最后面

默认参数

es5中没法设置默认参数，但是在es6和ts中都可以设置默认参数

function getinfo(name:string,age:number=20):string{
    if(age){
        return `${name}+${age}`;
    }else{
        return name
    }
}
console.log(getinfo("小明"))

看一下编译后的js文件

 

 当我们传入的参数有age时

console.log(getinfo("小明",30));

 

 就会按照传入的参数输出

剩余参数

function sum(a:number,b:number,c:number):number{
    return a+b+c
}
console.log(sum(1,2,3))

　编译后的js文件

 

 此时我们传入的参数较多时，就会报错

console.log(sum(1,2,3,4,5,6))

 

 如果此时我们传入的参数较多怎么办？

用...运算符

function sum(...result:number[]):number{
    var sum=0;
    for(let i=0;i<result.length;i++){
        sum+=result[i]
    }
    return sum
}
console.log(sum(1,2,3))
//三元运算符接收形参传过来的值
console.log(sum(1,2,3,4,5,6))

编译后的js文件

 

 我们看这种情况

function sum(a:number,...result:number[]):number{
    var sum=a;
    for(let i=0;i<result.length;i++){
        sum+=result[i]
    }
    return sum
}
console.log(sum(1,2,3))
//三元运算符接收形参传过来的值
console.log(sum(1,2,3,4,5,6))

此时传入参数，a的值就为第一个参数，剩余的参数都在result中

函数重载

typescript中的重载，通过为同一个函数提供多个函数类型定义来进行函数重载

重载就相当于同名的函数传入不同的参数执行出不同的结果

es5中出现同名的方法，下面的会替换上面的方法

function fun(config:any):any{

}
function fun(config:any,value:any):any{
       //替换上面的函数
}    

在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
        }
    }
console.log(getinfo("小明"))
console.log(getinfo(20))

我们看编译之后的js文件