在 TypeScript 中设置箭头函数的返回类型

作者

在 TypeScript 中设置箭头函数的返回类型

Set the return type of a arrow function in TypeScript

您可以在 TypeScript 的参数后立即设置箭头函数的返回类型。

一旦设置了函数的返回类型，类型检查器就会提醒我们函数是否返回不同类型的值。

索引.ts
// 👇️ with arrow function
const greet = (name: string): string => {
  return `Hello ${name}`;
};

console.log(greet('Bobby Hadz')); // 👉️ "Hello Bobby Hadz"

这是一个在类中设置箭头函数返回类型的示例。

索引.ts
class Employee {
  constructor(public name: string) {
    this.name = name;
  }

  // 👇️ with class method
  greet = (): string => {
    return `Hello ${this.name}`;
  };
}

const employee = new Employee('Bobby Hadz');
console.log(employee.greet()); // 👉️ "Hello Bobby Hadz"

第一个例子展示了如何指定
箭头
函数的返回类型。

该greet函数接受一个 type 参数并返回一个 type 值。 stringstring

现在我们已经设置了函数的返回类型，如果我们尝试返回不同类型的值或忘记从函数返回值，类型检查器将抛出错误。

索引.ts
// ⛔️ A function whose declared type is neither
// 'void' nor 'any' must return a value.ts(2355)
const greet = (name: string): string => {
  // return `Hello ${name}`;
};

示例中的问题是该函数不返回任何内容，但返回类型为string.

显式键入函数很有用，因为它允许我们利用类型检查器。

TypeScript 有时可以推断返回类型

如果我们没有设置函数的返回类型，TypeScript 会尝试推断它。

索引.ts
// 👇️ const greet: (name: string) => string
const greet = (name: string) => {
  return `Hello ${name}`;
};

在这种情况下，TypeScript 能够推断出函数的返回类型。string但是，如果我们因为没有设置函数的返回类型而忘记返回 a，它不会提醒我们。

索引.ts
// 👇️ no errors
const greet = (name: string) => {
  // return `Hello ${name}`;
};

使用类型别名或接口

如果您的函数定义很忙，请将返回类型提取到类型别名或接口中。

索引.ts
type Person = {
  name: string;
  salary: number;
  department: string;
};

const getEmployee = (): Person => {
  return {
    name: 'Bobby Hadz',
    salary: 100,
    department: 'development',
  };
};

当你的函数定义变得很忙或者你必须在多个地方重用一个类型时，类型别名和
接口很有用。

使用隐式箭头函数返回

使用隐式箭头函数返回时的语法相同。

索引.ts
type Person = {
  name: string;
  salary: number;
  department: string;
};

// 👇️ implicit arrow function return
const getEmployee = (): Person => ({
  name: 'Bobby Hadz',
  salary: 100,
  department: 'development',
});

返回多种类型之一的箭头函数

如果您的箭头函数可能返回不同类型的值，请使用
联合类型。

索引.ts
function getStringOrNumber(): string | number {
  if (Math.random() > 0.5) {
    return 100;
  }

  return 'bobbyhadz.com';
}

示例中的函数返回类型为stringor的值number。

我还写了一篇关于
如何定义具有多种类型的数组的文章。

设置类中箭头函数的返回类型

如果使用箭头函数定义类方法，则可以在其参数后立即设置箭头函数的返回类型。

索引.ts
class Employee {
  constructor(public name: string) {
    this.name = name;
  }

  // 👇️ string return type
  greet = (): string => {
    return `Hello ${this.name}`;
  };
}

const employee = new Employee('Bobby Hadz');
console.log(employee.greet()); // 👉️ "Hello Bobby Hadz"

该greet方法的返回类型为string，因此尝试返回不同类型的值会导致错误。

如果您需要
在箭头函数中使用泛型，请单击链接并按照说明进行操作。

如果您需要将函数作为参数传递，请查看
以下文章。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：