之前我们学习了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
网友评论