likes
comments
collection
share

TypeScript技术系列：深入理解函数类型与其应用

作者站长头像
站长
· 阅读数 21

前言

欢迎来到TypeScript技术系列的第4讲！在前几篇中，我们已经探讨了函数定义的基本类型推断特性。今天，我们将深入了解TypeScript中的函数类型，包括函数的参数和返回值类型、函数重载、this的类型等等。本文将通过详细的解释和示例代码，帮助你全面掌握这些概念。

1. 函数类型的基础

在JavaScript中，函数是非常核心的构建块，用于封装逻辑和处理各种操作。在TypeScript中，函数不仅保持了 JavaScript的所有特性，还增加了强类型系统的支持，使得函数的定义和调用更加严谨。

1.1 函数定义

TypeScript支持两种主要的函数定义方式：函数声明和箭头函数。来看一下这两种方式的基本语法：

// 函数声明
function add(a: number, b: number): number {
    return a + b;
}

// 箭头函数
const multiply = (x: number, y: number): number => x * y;

在这段代码中，add是一个传统的函数声明，接受两个数字参数并返回它们的和。multiply是一个箭头函数，实现了同样的功能。TypeScript的类型注解:number用于指定函数的参数和返回值类型。

1.2 返回值类型

在JavaScript中，函数可能会返回undefined，但在TypeScript中，需要明确声明返回值类型。如果函数没有返回值，可使用void类型来表示。

function logMessage() {
    console.log(message);
}

console.log(logMessage()) // undefined

需要注意的是，在TypeScript中，如果显式声明函数的返回值类型为undfined，将会得到如下所示的错误提醒。

function logMessage(): undefined { 
  // TS2355: A function whose declared type is neither 'void' nor 'any' must return a value
  // TODO
}

TypeScript技术系列：深入理解函数类型与其应用

此时，正确的做法是使用前面文章介绍的void类型来表示函数没有返回值的类型（这是“废柴”void类型唯一有用的场景），示例如下：

function logMessage(): void {}

但是很多时候，不必或者不能显式地指明返回值的类型，这就涉及可缺省和可推断的返回值类型的讲解。

1.3 可缺省和可推断的返回值类型

幸运的是，函数返回值的类型可以在TypeScript中被推断出来，即可缺省。

函数内是一个相对独立的上下文环境，可以根据入参对值计算，并返回新的值。从类型层面看，也可以通过类型推断计算入参的类型，并返回新的类型，示例如下：

function fn(a: string, b: number) {
  const nums = [b];
  const strs = [a]
  return {
    nums,
    strs
  } // 返回 { nums: number[]; strs: string[] } 的类型 
}

一般情况下，TypeScript中的函数返回值类型是可以缺省和推断出来的，但是有些特例需要显式声明返回值类型，比如Generator函数的返回值。

1.4 Generator函数的返回值

ES6中新增的Generator函数在TypeScript中也有对应的类型定义。

Generator函数返回的是一个Iterator迭代器对象，可以使用Generator的同名接口泛型或者Iterator的同名接口泛型表示返回值的类型（Generator类型继承了Iterator类型），示例如下：

type Type = boolean;
type ReturnType = string;
type NextType = number;
function *gen(): Generator<Type, ReturnType, NextType> {
  const nextValue = yield true; // nextValue 类型是 number，yield 后必须是 boolean 类型
  return `${nextValue}`; // 必须返回 string 类型
}

2. 参数类型

了解了定义函数的基本语法以及返回值类型后，再来详细看一下可选参数、默认参数、剩余参数的几个特性。

2.1 可选参数和默认参数

在实际工作中，可能经常碰到函数参数可传可不传的情况，当然TypeScript也支持这种函数类型表达，如下代码所示：

function fn(str?: string) {
  return str;
}
fn(); // undefined
fn('hello world'); // hello world

在上述代码中，在类型标注的:前添加?表示fn函数的参数str就是可缺省的。

也就是说参数str的类型可能是undefined类型或者是string类型，那是不是意味着可缺省和类型是undefined等价呢？来看看以下的示例：

function fn1(str?: string) {
  console.log(str);
}
function fn2(str: string | undefined) {
  console.log(str);
}
fn1();
fn1(undefined);
fn2(); // ts(2554) Expected 1 arguments, but got 0
fn2(undefined);

TypeScript技术系列：深入理解函数类型与其应用

答案显而易见，这里的?:表示参数可以缺省、可以不传，也就是说调用函数时，可以不显式传入参数。但是，如果声明了参数类型为xxx | undefined，就表示函数参数是不可缺省且类型必须是xxx或者undfined。

因此，在上述代码中，fn1函数如果不显示传入函数的参数，TypeScript就会报一个ts(2554)的错误，即函数需要1个参数，但是只传入了0个参数。

在ES6中支持函数默认参数的功能，而TypeScript会根据函数的默认参数的类型来推断函数参数的类型，示例如下：

function fn(str = 'hello') {
    console.log(x);
}
fn(); // => 'hello'
fn('hi'); // => 'hi'
fn(1); // ts(2345) Argument of type '1' is not assignable to parameter of type 'string | undefined'

TypeScript技术系列：深入理解函数类型与其应用

在上述示例中，根据函数的默认参数'hello'，TypeScript推断出了str的类型为string | undefined。

当然，对于默认参数，TypeScript也可以显式声明参数的类型。不过，此时的默认参数只起到参数默认值的作用，如下代码所示：

function fn1(x: string = 'hello') {
    console.log(x);
}
// ts(2322) Type 'string' is not assignable to type 'number'
function fn2(x: number = 'hello') {
    console.log(x);
}
fn2();
fn2(1);
fn2('1'); // ts(2345) Argument of type '"1"' is not assignable to parameter of type 'number | undefined'

TypeScript技术系列：深入理解函数类型与其应用

上例函数fn2中，显式声明了函数参数str的类型为number，表示函数参数str的类型可以不传或者是number类型。因此，如果将默认值设置为字符串类型，编译器就会抛出一个ts(2322)的错误。

2.2 剩余参数

在ES6中，JavaScript支持函数参数的剩余参数，它可以把多个参数收集到一个变量中。同样，在TypeScript中也支持这样的参数类型定义，如下代码所示：

function sum(...nums: number[]) {
    return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2); // => 3
sum(1, 2, 3); // => 6
sum(1, '2'); // ts(2345) Argument of type 'string' is not assignable to parameter of type 'number'

TypeScript技术系列：深入理解函数类型与其应用

在上述代码中，sum是一个求和的函数，...nums将函数的所有参数收集到了变量nums中，而nums的类型应该是number[]，表示所有被求和的参数是数字类型。因此，sum(1, '2')抛出了一个ts(2345)的错误，因为参数'2'并不是number类型。

如果将函数参数nums聚合的类型定义为(number | string)[]，如下代码所示：

function sum(...nums: (number | string)[]): number {
    return nums.reduce<number>((a, b) => a + Number(b), 0);
}
sum(1, '2', 3); // 6

那么，函数的每一个参数的类型就是联合类型number | string，因此sum(1, '2', 3)的类型检查也就通过了。

好了，介绍完函数的参数，再来了解一下函数中另外一个重要的知识点this。

2.3 this

众所周知，在JavaScript中，函数this的指向一直是一个令人头痛的问题。因为this的值需要等到函数被调用时才能被确定，更别说通过一些方法还可以改变this的指向。也就是说this的类型不固定，它取决于执行时的上下文。

但是，使用了TypeScript后，就不用担心这个问题了。通过指定this的类型，当错误使用了this，TypeScript就会提示，如下代码所示：

function say() {
    console.log(this.name); // ts(2683) 'this' implicitly has type 'any' because it does not have a type annotation
}
say();

TypeScript技术系列：深入理解函数类型与其应用

在上述代码中，如果直接调用say函数，this应该指向全局window或global（Node 中）。但是，在strict模式下的TypeScript中，它会提示this的类型是any，此时就需要手动显式指定类型了。

那么，在TypeScript中，应该如何声明this的类型呢？

在TypeScript中，只需要在函数的第一个参数中��明this指代的对象（即函数被调用的方式）即可，比如最简单的作为对象的方法的this指向，如下代码所示：

function say(this: Window, name: string) {
    console.log(this.name);
}
window.say = say;
window.say('hi');
const obj = { say };
obj.say('hi');

TypeScript技术系列：深入理解函数类型与其应用

在上述代码中，在window对象上增加say的属性为函数say。那么调用window.say()时，this指向即为window对象。

调用obj.say()后，此时TypeScript检测到this的指向不是window，于是抛出了如下所示的一个ts(2684)错误。

say('maybe'); // ts(2684) The 'this' context of type 'void' is not assignable to method's 
              // 'this' of type 'Window'

TypeScript技术系列：深入理解函数类型与其应用

需要注意的是，如果直接调用say()，this实际上应该指向全局变量window，但是因为TypeScript无法确定say函数被谁调用，所以将this的指向默认为void，也就提示了一个ts(2684)错误。

此时，可以通过调用window.say()来避免这个错误，这也是一个安全的设计。因为在JavaScript的严格模式下，全局作用域函数中this的指向是undefined。

同样，定义对象的函数属性时，只要实际调用中this的指向与指定的this指向不同，TypeScript就能发现this指向的错误，示例代码如下：

interface Person {
    name: string;
    say(this: Person): void;
}
const person: Person = {
    name: 'maybe',
    say() {
        console.log(this.name);
    },
};
const fn = person.say;
fn(); // ts(2684) The 'this' context of type 'void' is not assignable to method's 'this' of type 'Person'

TypeScript技术系列：深入理解函数类型与其应用

介绍完函数中this的指向和类型后，再来了解一下它的另外一个特性函数多态（函数重载）。

3. 函数重载

函数重载允许为同一个函数定义多个签名，以处理不同的参数和返回值类型。

// 函数重载示例
function parseValue(value: string): number;
function parseValue(value: number): string;
function parseValue(value: string | number): number | string {
    if (typeof value === "string") {
        return parseFloat(value);
    } else {
        return value.toString();
    }
}

console.log(parseValue("42")); // 42
console.log(parseValue(42)); // "42"

在这个例子中，为parseValue函数定义了两个重载签名，一个处理字符串参数，另一个处理数字参数。函数的实现部分处理了这些不同的参数类型，并返回相应的值。

4. 类型谓词（Type Predicates）

类型谓词用于在TypeScript中执行类型缩小，通常用于自定义类型守卫。

// 类型谓词示例
function isString(value: any): value is string {
    return typeof value === "string";
}

function handleValue(value: any) {
    if (isString(value)) {
        console.log(`String value: ${value}`);
    } else {
        console.log(`Not a string.`);
    }
}

handleValue("hello"); // String value: hello
handleValue(42); // Not a string.

在这个示例中，isString函数是一个类型谓词，它检查一个值是否为字符串，并在handleValue函数中使用来缩小value的类型。

总结

本文通过详尽的解释和示例代码，帮助你全面理解TypeScript中函数类型的各种特性和应用。掌握这些概念可以显著提高你在TypeScript开发中的效率和代码质量。在下一篇文章中，我们将继续探索TypeScript的类，深入了解面向对象编程的更多细节。

后语

小伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注再走吧^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。

转载自:https://juejin.cn/post/7397292988642115636
评论
请登录