TypeSrcipt一起学习（二）

之前我们学习了TypeScript的数据类型，我们来看看TS中是如何声明函数的

我们先看看js中的函数声明

    function fn(){
            console.log(1)
    }

function声明函数，我们看看ts是如何声明的

    function getAge(age:number):string{
            return '我今年'+age+'岁' 
    }
    var age:number = 18
    var result:string = getAge(age)
    console.log(result)

声明（定义）函数必须加 function 关键字；
函数名与变量名一样，命名规则按照标识符规则；
函数参数可有可无，多个参数之间用逗号隔开；
每个参数参数由名字与类型组成，之间用分号隔开；
函数的返回值可有可无，没有时，返回类型为 void；
大括号中是函数体。

第二条需要注意一下，函数声明也需要按照标识符规则，这个规范是根据return的数据类型决定的,当我们声明函数表达式的时候变量类型与函数声明类型必须相同

形参实参就不解释了，需要注意的是一旦声明变量命名就需要按照标识符规则，声明数据类型

在js的es6中，参数是存在默认值的，js中默认是undefined，TS是可以设置参数的默认值的，我们来看看TS中的函数参数

有可选参数的函数

可选参数，就是我们定义形参的时候，可以定义一个可传可不传的参数。这种参数，在定义函数的时候通过?标注

比如我们继续作找年龄的函数，这回不仅可以传递年龄，还可以选择性的传递名字。我们来看如何编写

    function getAge(age:number,name?:string):string{
            let sui:string=''
            sui='我今年'+age+'岁'
            if(name!=undefined){
              sui=sui+',我的名字是'+name
            }
            return sui
    }
    var age:number = 18
    var result:string = getAge(age) //我今年18岁
    console.log(result)

注意下方，我并没有传入name，因此打印的时候打印的是年龄，而且函数不会报错

    function getAge(age:number,name?:string):string{
            let sui:string=''
            sui='我今年'+age+'岁'
            if(name!=undefined){
              sui=sui+',我的名字是'+name
            }
            return sui
    }
    var age:number = 18
    var result:string = getAge(age,'TS') //我今年18岁,我的名字是TS
    console.log(result)

其实很简单有没有，类似js的三目运算，但还是要注意变量的声明，测试的时候别忘记转换js哦

有默认参数的函数

有默认参数就更好理解了，就是我们不传递的时候，他会给我们一个默认值，而不是undefined了。我们改造上边的函数，也是两个参数，但是我们把年龄和名字都设置默认值

    function getAge(age:number=18,name:string='TS'):string{
            let sui:string=''
            sui='我今年'+age+'岁'
            if(name!=undefined){
              sui=sui+',我的名字是'+name
            }
            return sui
    }
    var result:string = getAge()
    console.log(result)

此时我们不传递参数也是不会报错的

有剩余参数的函数

有时候我们有这样的需求，我传递给函数的参数个数不确定。例如：我这个人比较开放，告诉你年龄名字还要告诉你我喜欢什么

说的技术点，剩余参数就是形参是一个数组，传递几个实参过来都可以直接存在形参的数组中

    function getAge(...me:string[]):string{   ...展开  是不是觉得TS 很牛逼了    ：string[]指的是数组项都是string
            let sui:string=''
            for(let i=0;i<me.length;i++){
                    sui=sui+me[i]
                    if(i<me.length){
                            sui=sui+'、'
                    }
            }
            return sui
    }
    //无论我们传多少个参数都能操作
    var result:string = getAge('18','TS','我喜欢打游戏','还喜欢撩妹','但是我撩不来')
    //18、TS、我喜欢打游戏、还喜欢撩妹、但是我撩不来、
    console.log(result)

喜欢小伙伴自己敲一下，其实还是很简单的

三种函数的定义方式

我们上面定义的函数并不能完全包含所有的定义方法，所以再以声明的形式，而不是参数来总结几个方法。

函数声明法

函数声明法创建函数是最常用的函数定义法。使用function关键字和函数名去定义一个函数。

            function add(n1:number,n2:number):number{
                    return n1+n2
            }

函数表达式法

函数表达式法是将一个函数赋值给一个变量，这个变量名就是函数名。通过变量名就可以调用函数了。这种方式定义的函数，必须在定义之后，调用函数。下面例子中等号右边的函数没有函数名，称为匿名函数。

            var add = function(n1:number,n2:number):number{
                    return n1+n2
            }
            console.log(add(1,4))

箭头函数

箭头函数是 ES6 中新增的函数定义的新方式，我们的 TypeScript 语言是完全支持 ES6 语法的。箭头函数定义的函数一般都用于回调函数中。

    var add = (n1:number,n2:number):number=>{
            return n1+n2
    }
    console.log(add(1,4));

   var resolves=(a:number):number=>{
       return a
   }

函数中变量的作用域

通过前面对TypeScript的学习，再加上如果你以前JavaScript的知识很扎实，你一定知道函数类似于一个封闭的盒子。盒子里面的世界和外面的世界是不一样的。定义在函数内部的变量与定义在函数外部的变量也是不一样的，他们起作用的范围也不一样。

关于作用域的问题其实跟js是一样的，也是全局与局部的关系，这一块我会快速带过

function zhengXing():void{
    var yangzi = '刘德华'
    console.log(yangzi)
}
zhengXing()
console.log(yangzi)  你会发现取不到变量，其实ts中已经报错了
------------------------------------------------------------------------------------------------
    var yangzi = '刘德华'
    function zhengXing():void{   =>因为没有return 所以函数类型是:void   小伙伴有时候分不清 直接any
    console.log('我整形成了'+yangzi+'的样子')
    }
    zhengXing()
    console.log(yangzi)  此时我们是可以取到数据的
    -----------------------------------------------------------------------------------
    var yangzi:string = '刘德华'
    function zhengXing():void{
    var yangzi:string = '马德华'
    console.log('我整形成了'+yangzi+'的样子')
    }
    zhengXing()
    console.log(yangzi)  其实很明显我变成马德华了

作用域其实与js是相同的 ，作用域掌握不好的小伙伴，我这有篇预解析的文章可以看看

https://www.jianshu.com/p/a4c9598d10a6

函数还是很重要的小伙伴多敲敲