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

1.函数定义
和JavaScript一样,TypeScript函数可以创建有名字的函数和匿名函数。

//方法一
function add(x: number, y: number): number {
  return x + y;
}
console.log(add(1,2));//3

//方法二
let myAdd = function(x: number, y: number): number {
    return x+y; 
};
console.log(myAdd(1,2));//3

我们给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型,因此我们通常省略它。
2.函数表达式
写出函数的完整类型

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

函数类型包含两部分:参数类型和返回值类型。 当写出完整函数类型的时候,这两部分都是需要的。 我们以参数列表的形式写出参数类型,为每个参数指定一个名字和类型。 这个名字只是为了增加可读性。我们也可以这么写:

type AddFn = (baseValue:number, increment:number)=>number
let myAdd: AddFn = function(x: number, y: number): number { 
    return x+y; 
};

只要参数类型是匹配的,那么就认为它是有效的函数类型,而不在乎参数名是否正确。

3.没有返回值

let hello2 = function (name:string):void {
    console.log('hello2',name);
    return undefined;
}
hello2('fung');//hello2 fung

4.可选参数
TypeScript里的每个函数参数都是必须的。 这不是指不能传递 nullundefined作为参数,而是说编译器检查用户是否为每个参数都传入了值。 编译器还会假设只有这些参数会被传递进函数。 简短地说,传递给一个函数的参数个数必须与函数期望的参数个数一致。

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // error
let result2 = buildName("Bob", "Adams", "Sr.");  // error
let result3 = buildName("Bob", "Adams");         // ok

JavaScript里,每个参数都是可选的,可传可不传。 没传参的时候,它的值就是undefined。 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如,我们想让last name是可选的

function buildName(firstName: string, lastName?: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // ok
let result2 = buildName("Bob", "Adams", "Sr.");  // error
let result3 = buildName("Bob", "Adams");         // ok

可选参数必须跟在必须参数后面。 如果上例我们想让first name是可选的,那么就必须调整它们的位置,把first name放在后面。

5.默认参数
在TypeScript里,我们可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时,使用默认参数。


function buildName(firstName: string, lastName='fung') {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // ok
let result4 = buildName("Bob", undefined);       //ok
let result2 = buildName("Bob", "Adams", "Sr.");  // error
let result3 = buildName("Bob", "Adams");         // ok

与普通可选参数不同的是,带默认值的参数不需要放在必须参数的后面。 如果带默认值的参数出现在必须参数前面,用户必须明确的传入 undefined值来获得默认值。

function buildName(firstName="will", lastName:string) {
    return firstName + " " + lastName;
}
let result1 = buildName("Bob");                  // err
let result2 = buildName("Bob", "Adams", "Sr.");  // error
let result3 = buildName("Bob", "Adams");         // ok
let result4 = buildName(undefined, "Bob",);       //ok

6.剩余参数

必要参数,默认参数和可选参数有个共同点:它们表示某一个参数。 想同时操作多个参数,或者不知道会有多少参数传递进来。 在JavaScript里,可以使用 arguments来访问所有传入的参数。
在TypeScript里,可以把所有参数收集到一个变量里。

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
console.log(employeeName);//Joseph Samuel Lucas MacKinzie

7.函数重载
在Java中的重载,指的是两个或者两个以上的同名函数,参数不一样
在TypeScript中,表现为给同一个函数提供多个函数类型定义

var obj = {};
function attr(val) {
    if (typeof val === 'string') {
        obj.name = val;
    }
    else {
        obj.age = val;
    }
}
attr('fung');
attr(18);
console.log(obj);

大煜儿
106 声望7 粉丝

用心走路,给每一个细节打一个结。