TypeScript 函数全面解析：从基础到高级应用-优快云博客

TypeScript 函数全面解析：从基础到高级应用

TypeScript TypeScript 使用手册（中文版）翻译。http://www.typescriptlang.org 项目地址: https://gitcode.com/gh_mirrors/typ/TypeScript

引言

在 TypeScript 中，函数作为构建应用程序的基础单元，不仅继承了 JavaScript 函数的灵活性，还通过类型系统增强了安全性和可维护性。本文将深入探讨 TypeScript 函数的各种特性和用法，帮助开发者充分利用类型系统的优势。

函数基础

函数定义方式

TypeScript 支持两种基本的函数定义方式，与 JavaScript 完全兼容：

命名函数：使用 function 关键字声明
匿名函数：通过变量赋值方式定义

// 命名函数
function add(x: number, y: number): number {
  return x + y;
}

// 匿名函数
const myAdd = function(x: number, y: number): number {
  return x + y;
};

变量捕获机制

TypeScript 函数可以访问外部作用域的变量，这种特性称为"变量捕获"。理解这一机制对于编写高质量的 TypeScript 代码至关重要。

const z = 100;

function addToZ(x: number, y: number): number {
  return x + y + z; // 捕获外部变量z
}

函数类型系统

类型注解

TypeScript 允许为函数参数和返回值添加类型注解：

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

完整函数类型

我们可以定义完整的函数类型，包括参数类型和返回值类型：

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

类型推断

TypeScript 具有强大的类型推断能力，能够根据上下文自动推断函数类型：

// TypeScript 能推断出myAdd的类型
const myAdd = function(x: number, y: number): number {
  return x + y;
};

参数处理

可选参数

在参数名后添加 ? 表示该参数是可选的：

function buildName(firstName: string, lastName?: string) {
  return lastName ? `${firstName} ${lastName}` : firstName;
}

默认参数

TypeScript 支持为参数设置默认值：

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

剩余参数

使用剩余参数语法可以处理可变数量的参数：

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

this 的运用

箭头函数与 this

箭头函数能保持定义时的 this 上下文，避免常见的问题：

const deck = {
  suits: ["hearts", "spades", "clubs", "diamonds"],
  createCardPicker() {
    return () => {
      const pickedCard = Math.floor(Math.random() * 52);
      return { suit: this.suits[pickedCard % 4] }; // 正确引用this
    };
  }
};

this 参数

TypeScript 允许显式声明 this 的类型：

interface Deck {
  suits: string[];
  createCardPicker(this: Deck): () => { suit: string };
}

const deck: Deck = {
  suits: ["hearts", "spades", "clubs", "diamonds"],
  createCardPicker(this: Deck) {
    return () => {
      return { suit: this.suits[0] }; // 类型安全的this
    };
  }
};

函数重载

TypeScript 支持函数重载，允许一个函数根据不同的参数类型返回不同类型的结果：

function pickCard(x: {suit: string; card: number}[]): number;
function pickCard(x: number): {suit: string; card: number};
function pickCard(x: any): any {
  // 实现细节
}

重载函数需要注意：