TypeScript学习5:函数

22 阅读1分钟

TypeScript 的函数与其他编程语言中的函数概念相似,但具有 TypeScript 特有的类型安全特性。TypeScript 是 JavaScript 的一个超集,它添加了静态类型、接口和类等特性,以帮助开发者在开发过程中捕获错误并优化代码。

在 TypeScript 中,函数具有以下基本特性:

类型注解

TypeScript 允许你为函数的参数和返回值添加类型注解,以确保在调用函数时传递正确的参数类型,并返回预期的结果类型。

function greet(name: string): string {  
    return `Hello, ${name}!`;  
}

在这个例子中,greet 函数接受一个 string 类型的参数 name,并返回一个 string 类型的结果。

推断类型

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

// 具有完整的函数类型
let myAdd = function(x: number, y: number): number { return x + y; };
// 参数“x”和“y”具有类型
let myAdd: (baseValue: number, increment: number) => number =
    function(x, y) { return x + y; };

这叫做“按上下文归类”,是类型推论的一种。 它帮助我们更好地为程序指定类型。

可选参数和默认参数

TypeScript 支持可选参数和默认参数,这使得函数更加灵活。

不可选:

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

可选:

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

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

默认:

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

let result1 = buildName("Bob");                  // works correctly now, returns "Bob Smith"
let result2 = buildName("Bob", undefined);       // still works, also returns "Bob Smith"
let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result4 = buildName("Bob", "Adams");         // ah, just right

剩余参数

当你不确定要传递多少个参数给函数时,可以使用剩余参数。

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

在这个例子中,sum 函数接受任意数量的 number 类型参数,并返回它们的总和。

函数重载

TypeScript 支持函数重载,这意味着你可以为同一个函数名定义多个签名。

function reverse(x: number): number;  
function reverse(x: string): string;  
function reverse(x: number | string): number | string {  
    if (typeof x === 'number') {  
        return Number(x.toString().split('').reverse().join(''));  
    } else if (typeof x === 'string') {  
        return x.split('').reverse().join('');  
    }  
}

在这个例子中,reverse 函数可以接受一个 number 或 string 类型的参数,并返回相应类型的反转结果。

箭头函数

TypeScript 也支持 ES6 的箭头函数语法,它提供了一种更简洁的方式来编写函数。

const greet = (name: string): string => {  
    return `Hello, ${name}!`;  
};

这个箭头函数与前面的 greet 函数功能相同,但语法更简洁。