Skip to content

一、介绍

TypeScript是由微软开发和维护的开源编程语言。它是JavaScript的超集,意味着任何有效的JavaScript代码也是有效的TypeScript代码。 TypeScript的主要特点之一是其类型系统,它允许开发人员向其代码添加静态类型。

二、函数

TypeScript 中的函数可以定义为具有特定输入参数和输出类型的代码块。函数的类型只是由参数类型和返回值组成的。以下是 TypeScript 函数的解释:

1、函数定义

使用 function 关键字定义一个函数。例如:

typescript
function add(a: number, b: number): number {
  return a + b;
}

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

2、函数参数

函数可以接受一个或多个参数,每个参数都有一个类型。例如:

typescript
function greet(name: string, age: number): void {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

3、可选参数

函数可以定义一个可选参数,使用 ? 标记参数。例如:

typescript
function sayHello(name: string, language?: string): void {
  if (language) {
    console.log(`Hello, ${name}! (${language})`);
  } else {
    console.log(`Hello, ${name}!`);
  }
}

sayHello("小王"); // 可以
sayHello("小红","中文"); // 也可以
sayHello("小白","日语","哟西"); // 不可以。参数过多

4、默认参数

函数可以定义一个默认参数,指定参数的默认值。例如:

typescript
function greet(name: string, greeting = "Hello"): void {
  console.log(`${greeting}, ${name}!`);
}
sayHello("小王"); // Hello,小王!
sayHello("小红","你真漂亮"); // 你真漂亮,小红

5、剩余参数

函数可以定义一个剩余参数,用于接收任意数量的额外参数。例如:

typescript
function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

剩余参数会被当做个数不限的可选参数。 可以一个都没有,同样也可以有任意个。 编译器创建参数数组,名字是你在省略号(...)后面给定的名字,你可以在函数体内使用这个数组。

6、函数返回值

函数可以返回一个值,其类型由函数声明中的返回类型指定。例如:

typescript
function multiply(a: number, b: number): number {
  return a * b;
}

制定了返回值为number。如果你不返回,那也要指定返回值类型:void。

typescript
function multiply(a: number, b: number): void {
  console.log(a * b)
}

三、推断类型

下面这个🌰,你会注意到,仅在等式的一侧带有类型,TS编译器仍可正确识别类型:

typescript
// myAdd has the full function type
let myAdd = function(x: number, y: number): number { return x + y; };

// x和y的类型为number
let myAdd: (baseValue: number, increment: number) => number =
    function(x, y) { return x + y; };

这叫做“按上下文归类”,是类型推论的一种。

四、this和箭头函数

JavaScript里,this的值在函数被调用的时候才会指定。 这是个既强大又灵活的特点,但是你需要花点时间弄清楚函数调用的上下文是什么。 但众所周知,这不是一件很简单的事,尤其是在返回一个函数或将函数当做参数传递的时候。

在TypeScript中,this关键字表示当前对象或者当前作用域。通常在类或者对象的方法中使用this,它用来引用该类或者对象的实例。

在函数中,this的值在运行时动态确定,它取决于函数被调用时的上下文。如果函数是作为对象的方法调用的,那么this就指向该对象;如果函数是作为普通函数调用的,那么this就指向全局对象。

当使用箭头函数时,this的值是在函数定义时静态确定的,而不是在运行时动态确定的。箭头函数中的this指向函数定义时所在的词法作用域中的this值,而不是函数被调用时的上下文。

在类中,this代表当前对象的实例。例如,在一个类的方法中,使用this可以引用该类的实例变量和方法。在构造函数中,this关键字表示正在创建的对象实例。

总之,在TypeScript中,this关键字的值是根据上下文动态确定的,取决于代码的执行环境和上下文。

更好事情是,TypeScript会警告你犯了一个错误,它会指出this的类型为any。

五、重载

在TypeScript中,函数重载是一种编写多个具有相同名称但具有不同参数类型和数量的函数的方法。重载允许你在函数调用时使用不同的参数类型来选择不同的函数实现。

下面是一个 TypeScript 中函数重载的例子:

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;
}

在这个例子中,我们定义了两个不同的函数签名,它们具有相同的函数名称 add,但是参数类型和返回类型不同。最后一个函数实现是一个通用的函数,它接受任何类型的参数,并返回它们的和或连接字符串。

当我们调用 add 函数时,TypeScript 将根据传递给函数的参数类型选择正确的函数签名来调用相应的函数实现:

typescript
console.log(add(1, 2)); // 输出 3
console.log(add("hello", "world")); // 输出 helloworld

在上面的例子中,第一次调用使用了两个数字类型的参数,第二次调用使用了两个字符串类型的参数。TypeScript 编译器将根据传递的参数类型来选择正确的函数签名,这样我们就可以使用相同的函数名称来表示不同的函数行为。