VVLL.net

Function(函数)

日期:2024-08-22 09:58:31

TypeScript 是 JavaScript 的超集,添加了静态类型检查和其他特性,使代码更具可读性和可维护性。函数是 TypeScript 中的重要组成部分,下面详细介绍 TypeScript 函数的相关内容。

基本函数

在 TypeScript 中,函数的定义与 JavaScript 类似,但可以指定参数和返回值的类型。

function add(a: number, b: number): number {
  return a + b;
}
  • a: numberb: number 指定了参数的类型。
  • : number 表示函数的返回值类型。

可选参数和默认参数

TypeScript 支持函数参数的可选性和默认值。

可选参数

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

function greet(name: string, greeting?: string): string {
  return `${greeting || "Hello"}, ${name}`;
}
  • greeting?: string 表示 greeting 是一个可选参数,如果不传该参数,函数调用仍然有效。

默认参数

在参数定义时赋予默认值。

function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}`;
}
  • greeting: string = "Hello" 表示 greeting 的默认值是 "Hello"。

剩余参数

TypeScript 支持剩余参数,它允许我们将不确定数量的参数作为数组传递。

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}
  • ...numbers: number[] 表示 numbers 是一个包含所有剩余参数的数组。

函数类型

可以使用类型别名来定义函数类型,这在传递回调函数时特别有用。

type AddFn = (a: number, b: number) => number;

const add: AddFn = (x, y) => x + y;
  • type AddFn = (a: number, b: number) => number 定义了一个函数类型别名 AddFn
  • const add: AddFn = (x, y) => x + y 表示 add 是一个符合 AddFn 类型的函数。

箭头函数

TypeScript 支持箭头函数,它们语法简洁,并且可以保留 this 的指向。

const multiply = (a: number, b: number): number => a * b;

重载

TypeScript 支持函数重载,即同名函数可以有多个不同的签名。

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
  return a + b;
}
  • 前两行定义了两个不同的签名:(a: number, b: number): number(a: string, b: string): string
  • 最后一行是函数的具体实现。

函数中的 this

在 TypeScript 中,我们可以明确地指定函数内部 this 的类型。

interface User {
  name: string;
  age: number;
  greet(): void;
}

const user: User = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
  • this: User 明确了 this 的类型,使得函数内部的 this 更加可控。

泛型函数

TypeScript 支持泛型函数,可以处理不同类型的参数。

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("Hello");
let output2 = identity<number>(123);
  • function identity<T>(arg: T): T 使用了泛型 <T>,表示函数可以接受任意类型的参数,并返回相同类型的值。
  • identity<string>("Hello")identity<number>(123) 是泛型函数的具体应用。

通过以上介绍,TypeScript 函数的各种特性和用法可以帮助我们编写更健壮和可维护的代码。

参考

标签