TypeScript中的函数

发布时间：2023-05-19

一、简介

TypeScript是一门基于JavaScript语法的超集语言，可编译出纯JavaScript代码。TypeScript引入了接口和类型注解等概念，让JavaScript代码拥有更加强大的类型检查和代码提示功能，提升了代码的可读性和可维护性。在TypeScript中，函数是一种非常重要的概念，本文将从多个方面对TypeScript中的函数做详细的阐述。

二、函数定义

在TypeScript中，函数可以通过function关键字进行声明，也可以使用箭头函数声明。声明方式如下：

// 声明方式1
function add(a: number, b: number): number {
  return a + b;
}
// 声明方式2
const add = (a: number, b: number): number => {
  return a + b;
}

上面的代码分别使用了函数关键字和箭头函数的方式声明了一个函数，函数的返回值类型通过冒号后面跟随返回值类型进行声明。在参数列表中，可以使用类型注解来声明参数的类型。

三、函数参数

在TypeScript中，函数参数可以指定为必填参数、可选参数和默认参数。

1. 必填参数

必填参数表示函数调用时必须传入的参数，如果不传入则会报错。

function fullName(firstName: string, lastName: string): string {
  return firstName + ' ' + lastName;
}
console.log(fullName('Tom', 'Jerry')); // 'Tom Jerry'
console.log(fullName('Tom')); // 报错：应有 2 个参数，但获得 1 个.ts(2554)

2. 可选参数

可选参数表示函数调用时可以不传入的参数，在参数列表中添加问号进行声明。

// 可选参数必须放在必填参数后面
function fullName(firstName: string, lastName?: string): string {
  if (lastName) {
    return firstName + ' ' + lastName;
  } else {
    return firstName;
  }
}
console.log(fullName('Tom')); // 'Tom'
console.log(fullName('Tom', 'Jerry')); // 'Tom Jerry'

3. 默认参数

默认参数表示函数调用时如果不传入对应的参数，则会使用默认值，使用等号进行默认值的声明。

function sayHello(name: string = 'world'): string {
  return 'Hello ' + name;
}
console.log(sayHello()); // 'Hello world'
console.log(sayHello('Tom')); // 'Hello Tom'

四、函数重载

函数重载是指为同一个函数实现多个类型的定义，从而提高函数的灵活性。在TypeScript中，通过使用函数重载可以为一个函数实现多种参数列表和返回值类型。

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number[] | string[]): number[] | string[];
function reverse(x: number | string | number[] | string[]): 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('');
  } else {
    return x.reverse();
  }
}
console.log(reverse(123)); // 321
console.log(reverse('hello')); // 'olleh'
console.log(reverse([1, 2, 3])); // [3, 2, 1]
console.log(reverse(['a', 'b', 'c'])); // ['c', 'b', 'a']

五、函数作为参数与返回值

在TypeScript中，函数可以作为参数传递给另一个函数，也可以作为另一个函数的返回值。

1. 函数作为参数

function add(a: number, b: number): number {
  return a + b;
}
function doubleAdd(fn: (a: number, b: number) => number, a: number, b: number): number {
  return fn(a, b) * 2;
}
console.log(doubleAdd(add, 1, 2)); // 6

上面的代码定义了一个add函数和一个doubleAdd函数，doubleAdd函数接收一个函数参数fn，第二和第三个参数a、b用于传递给fn函数，doubleAdd函数将fn函数的返回值乘以2后返回。

2. 函数作为返回值

function createCounter(): () => number {
  let count = 1;
  return () => {
    return count++;
  }
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

上面的代码定义了一个createCounter函数，这个函数返回一个函数。每次调用返回的函数时，返回的数字递增1。

六、总结

本文对TypeScript中的函数做了详细的阐述，包括函数定义、函数参数、函数重载以及函数作为参数与返回值。TypeScript中的函数可以为我们的代码提供更加严格的类型检查和更好的提示功能，从而提高代码的可读性和可维护性。

推荐文章