TypeScript学习笔记之函数

函数
函数是一组可以随时随地运行的语句。是 ECMAScript 的核心。和JavaScript一样，TypeScript函数可以创建有名字的函数和匿名函数。
javascript中的函数：

/*普通函数*/
function add(x, y) {
    console.log(x + y);
}
add(1, 2);
/*匿名函数*/
var addFun = function (x, y) {
    console.log(x + y);
};
addFun(2, 3);

在TypeScript中，我们可以给函数指定类型，这样在编译阶段会规避很多错误.函数类型分为参数类型和返回值类型，如下代码所示，参数类型直接在参数后指定，返回值类型则在该函数后面指定。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。

/*普通函数*/
function add(x:number,y:number):number{
return x+y;
}
add(1,2);
/*匿名函数*/
var addFun=function (x:number,y:number):number {
return x+y;
}

addFun(2,3);

完整函数类型
在TypeScript中，为了提高代码的可读性，提供给我们另一种写法，这种写法会明确的指出参数的意义。
如下代码所示，我们很容易就明白这个方法传的参数是数学分数和英语分数，该方法返回的是数学和英语分数的和。返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。

let myAdd:(mathScores:number,englishScores:number)=>number=function (x:number,y:number):number {
return x+y;
}

推断类型
如果你在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会自动识别出类型

let myAdd:(mathScores:number,englishScores:number)=>number=function (x:number,y:number) {
return x+y;//这里会推断返回的是number类型的数据
}

可选参数
TypeScript里的每个函数参数都是必须的。也就是说我们在函数中定义了几个参数在调用的时候就要传几个参数。而在javaScript中，参数是可传可不传的，如果不传，默认是undefined。 在TypeScript里我们可以在参数名后加上 ?实现可选参数的功能。
如下图代码所示，z是个可选参数，看打印结果可以看到，如果不传，默认就是undefined。需要注意的是，可选参数必须跟在必须参数后面。也就是说，如果x是可选参数，那么，x就要放到y的后面。

/*可选参数 可选参数用?表示 调用的时候可传可不传 不传的话默认值是undefined 可选参数必须放到其他参数后面*/
function add1(x:string,y?:string):string{
    console.log(x+y);
return x+y;
}
add1("888");//888undefined
add1("88","yzq");//yzq

默认参数
在TypeScript里，我们也可以为参数提供一个默认值，当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。与可选参数不同的是，默认参数不是一定要放到最后的，但是如果默认参数放到了普通参数的前面，恰好我们不想给默认参数传其它值的话，则必须传入 undefined值来获得默认值。

/*默认参数 默认参数和可选参数类似 调用的时候可传可不传 不传的话是默认值 传的话会覆盖值 如果不想给默认参数指定值必须传入undefined*/
function add2(x="hello",y:string,z?:string){
    console.log(`${x}--${y}--${z}`);
}
add2(undefined,"yzq");//hello--yzq--undefined
add2("hi","yzq");//hi--yzq--undefined
add2("hi","yzq","hahaha");//hi--yzq--hahaha

剩余参数
必要参数，可选参数和默认参数都代表一个参数，有时候我们并不知道到底有多少个参数传进来，这个时候我们就可用剩余参数了。我们可以传多个，也可以什么都不传。

/*剩余参数（可变参数）*/
function add3(...name:string[]){
    console.log(name.join(","));
}
add3();//什么都不传返回空
add3("1","2","3");//1,2,3

this关键字和Lambda表达式
this是Javascript语言的一个关键字。在 Java 等面向对象的语言中，this 关键字的含义是明确且具体的，即指代当前对象。一般在编译期确定下来，或称为编译期绑定。而在 JavaScript 中，this 是动态绑定，或称为运行期绑定的，这就导致 JavaScript 中的 this 关键字有能力具备多重含义。关于this的详解请看：javascript中this关键的详解

/**
/**
 * Created by yzq on 2017/1/11.
 */
var say = {
    name: "yzq",
    age: 23,
    hello: function () {
return function () {
return this.name;
        };
    },
    hi: function () {
return this.name;

    }
}
var h=say.hello();//这里返回了一个方法
console.log(h()) ;//这里调用的话相当于window.h();获取不到say对象里的name。此时，该函数里的this指向的是全局对象window.
console.log(say.hi());//这里调用的话，hi方法里面的this指向的是say这个对象,因此，会打印yzq

Lambda表达式
也叫箭头函数，就是用来声明匿名函数，并且能消除传统的javascript中匿名函数this指针问题。

/**
 * Created by yzq on 2017/1/11.
 */

/*简单的箭头函数 无参数且无返回值*/
var add = () => {console.log("无参数且无返回值")};

/*有一个参数 且有返回值*/
var add1=x=>`有一个参数的时候可以不写()，${x}
 ass`;

/*多个参数*/
var add2=(x,y,z)=>{
console.log(x+y+z);
}
add2(1,2,3);

编译成js代码后

/**
 * Created by yzq on 2017/1/11.
 */
/*简单的箭头函数 无参数且无返回值*/
var add = function () { console.log("无参数且无返回值"); };
/*有一个参数 且有返回值*/
var add1 = function (x) { return ("\u6709\u4E00\u4E2A\u53C2\u6570\u7684\u65F6\u5019\u53EF\u4EE5\u4E0D\u5199()\uFF0C" + x + "\n ass"); };
/*多个参数*/
var add2 = function (x, y, z) {
    console.log(x + y + z);
};
add2(1, 2, 3);

应用场景
TypeScript中

/*简单用法 将一个数据中的能被2整除的值过滤出来*/
let numArr:Array<number>=[1,2,3,4,5,6,7];
console.log(numArr.filter(value=>value%2==0));

编译成js后

/*简单用法 将一个数据中的能被2整除的值过滤出来*/
var numArr = [1, 2, 3, 4, 5, 6, 7];
console.log(numArr.filter(function (value) {
return value % 2 == 0;
}));

下面我们来看看之前那个this关键字的问题，我们可以使用Lambda表达式来消除这个问题。如下代码所示，我们只需要将匿名函数用Lanmbda表达式的方式来写，Lambad表达式会自动将this引用绑定到当前对象，这也是Lambad表达式最有价值的地方。

var say = {
    name: "yzq",
    age: 23,
    hello: function () {
return ()=> {
return this.name;
        };
    },
    hi: function () {
return this.name;

    }
}
var h=say.hello();//这里返回了一个方法
console.log(h()) ;//打印yzq
console.log(say.hi());//打印yzq

重载
TypeScript中的重载和java的重载就完全不一样了。在java中，允许一个类中有多个同名不同参的方法，这些方法就叫做重载，java会根据传入的参数去调用相应的重载方法。
在javaScript中是没有重载的概念的，个人认为在TypeScript中方法重载存在的主要意义在于智能提示，方便调用者在调用方法的时候知道该传什么参数。 TypeScript 是会检查参数个数、类型是否匹配，然后去调用重载方法，以避免出现调用错误。

/**
 * Created by yzq on 2017/1/11.
 */
/*重载*/

function add(x:number,y:number):number;

function add(x:string):string;

function add(x):any{
if (typeof x=="number"){
        console.log(`数字`)
    }else {
        console.log(`字符串`)
    }
}
add(1,2);