在 TypeScript 中声明返回对象或数组的函数

在 TypeScript 中声明一个返回类型为 Object 的函数

要声明具有对象返回类型的函数，请将函数的返回类型设置为紧跟在函数参数列表之后的对象。

如果未设置函数的返回类型，TypeScript 将对其进行推断。

索引.ts


// ✅ named function
function getObj(): { name: string; age: number } {
  return { name: 'Bobby Hadz', age: 30 };
}

// ✅ arrow function
const getObj2 = (): { name: string; age: number } => {
  return { name: 'Bobby Hadz', age: 30 };
};

这里还有两个例子。

索引.ts


// ✅ class method
class A {
  getObj(): { name: string; age: number } {
    return { name: 'Bobby Hadz', age: 30 };
  }
}

// ✅ Using interface
interface Person {
  name: string;
  age: number;
}
function getObj3(): Person {
  return { name: 'Bobby Hadz', age: 30 };
}

您可以在参数列表之后设置
函数的返回类型。

索引.ts


interface Person {
  name: string;
  age: number;
}

function getObj4(name: string, age: number): Person {
  return { name, age };
}

这些示例展示了如何
将函数的返回类型设置name为包含和属性的
对象age。

显式设置函数返回类型的优点是，如果您尝试返回不同类型的对象，类型检查器会抛出错误。

索引.ts


interface Person {
  name: string;
  age: number;
}
function getObj3(): Person {
  // ⛔️ Error:   Object literal may only
  // specify known properties, and 'country'
  // does not exist in type 'Person'.ts(2322)
  return { name: 'Bobby', age: 30, country: 'Chile' };
}

如果你没有显式设置函数的返回类型，TypeScript 会推断它。

索引.ts


// 👇️ function getObj3(): {name: string; age: number; country: string;}
function getObj3() {
  return { name: 'Bobby Hadz', age: 30, country: 'Chile' };
}

将函数的返回类型设置为对象时，您可能不知道该对象将具有的所有属性。

使用索引签名声明一个返回类型为 Object 的函数

如果是这种情况，您可以使用
索引签名。

索引.ts


interface Person {
  name: string;
  age: number;
  [key: string]: any; // 👈️ index signature
}

function getObj3(): Person {
  return {
    name: 'Bobby Hadz',
    age: 30,
    country: 'Chile',
    city: 'Santiago',
  };
}

当我们事先不知道类型属性的所有名称及其值的类型时，将使用索引签名。

示例中的索引签名意味着当对象被索引为 a 时string，它将返回一个any类型的值。

您可能还会在示例中看到索引签名{[key: string]: string}。它代表一个键值结构，当用 a 索引时string返回一个 type 的值string。

我们仍然为我们事先知道的属性获得类型安全。

例如，name和age属性必须存在于函数返回的对象上，并且必须是特定类型。

如果您尝试省略这些属性或将它们设置为不正确的类型，则会出现错误。

索引.ts


interface Person {
  name: string;
  age: number;
  [key: string]: any;
}

function getObj3(): Person {
  // ⛔️ Error: Type 'number' is not assignable
  // to type 'string'.ts(2322)
  return { name: 100, age: 30, country: 'Chile', city: 'Santiago' };
}

我们number为该name属性传递了一个，所以类型检查器抛出了一个错误。

仅当您事先不知道所有对象键的名称时才应使用此方法。

尽可能明确并编写最类型安全的代码总是最好的。

在 TypeScript 中声明一个返回类型为 Array 的函数

要声明具有数组
返回类型的函数，请在函数的参数列表之后将函数的返回类型设置为数组。

索引.ts


// ✅ Named function returning an array of strings
function getArr(): string[] {
  return ['bobby', 'hadz', 'com'];
}

// ✅ Arrow function returning an array of numbers
const getArr2 = (): number[] => {
  return [1, 2, 3];
};

这里还有2个例子。

索引.ts


// ✅ Class method returning an array of objects
class A {
  getArr(): { id: number; name: string }[] {
    return [{ id: 1, name: 'Bobby Hadz' }];
  }
}

// ✅ Using type as Person[] for function's return value
type Person = {
  name: string;
  age: number;
};

function getArr3(): Person[] {
  return [{ name: 'Bobby Hadz', age: 30 }];
}

您可以在参数列表之后设置
函数的返回类型。

索引.ts


type Person = {
  name: string;
  age: number;
};

function getArr3(name: string, age: number): Person[] {
  return [{ name, age }];
}

上面的示例显示了如何将函数的返回类型设置为包含不同值的数组。

显式设置函数返回类型的优点是，如果您尝试返回不同类型的数组，类型检查器会抛出错误。

索引.ts


function getArr(): string[] {
  // ⛔️ Error: Type 'number' is not assignable to type 'string'.ts(2322)
  return [1, 2, 3];
}

如果你没有显式设置函数的返回类型，TypeScript 会推断它。

索引.ts


// 👇️ function getArr(): string[]
function getArr() {
  return ['bobby', 'hadz', 'com'];
}

使用联合类型函数返回混合类型数组

如果您的函数返回混合类型的数组，例如字符串和数字，您必须使用联合来指定函数的返回类型。

索引.ts


function getArr(): (string | number)[] {
  return ['bobby', 1, 'hadz', 2];
}

上面的函数返回一个包含字符串和数字的数组。请注意，我们使用括号来包装值 –(string | number)[]而不是
string | number[].

在 TypeScript 中返回对象数组的函数

如果您的函数返回一个
对象数组，请创建一个
类型或
接口并将函数的返回类型设置为Type[]。

索引.ts


type Person = {
  name: string;
  age: number;
};

function getArr3(name: string, age: number): Person[] {
  return [{ name, age }];
}

name该函数返回包含和属性的对象数组age
。

有时，当您返回一个对象数组时，您现在可能会提前知道一个对象可能具有的所有属性。

使用索引签名来键入返回对象数组的函数

如果是这种情况，您可以使用
索引签名。

索引.ts


type Person = {
  name: string;
  age: number;
  [key: string]: any; // 👈️ index signature
};

function getArr3(name: string, age: number): Person[] {
  return [{ name, age, city: 'Santiago' }];
}

当我们事先不知道类型属性的所有名称及其值的类型时，将使用索引签名。

示例中的索引签名意味着当对象被索引为 a 时string，它将返回一个any类型的值。

您可能还会在示例中看到索引签名{[key: string]: string}。它代表一个键值结构，当用 a 索引时string返回一个 type 的值string。

我们仍然为我们事先知道的属性获得类型安全。

例如，必须设置name和属性并且必须是特定类型。age

如果您尝试省略这些属性或将它们设置为不正确的类型，则会出现错误。

索引.ts


type Person = {
  name: string;
  age: number;
  [key: string]: any; // 👈️ index signature
};

function getArr3(): Person[] {
  // ⛔️ Error: Type 'boolean' is not
  // assignable to type 'string'.ts(2322)
  return [{ name: true, age: 30, city: 'Santiago' }];
}

我们boolean为该name属性传递了一个，所以类型检查器抛出了一个错误。

尽可能明确并编写最类型安全的代码总是最好的。

在 TypeScript 中声明一个返回类型为 Tuple 的函数

要声明具有元组返回类型的函数，请将函数的返回类型设置为紧跟在函数参数列表之后的元组。

如果未设置函数的返回类型，TypeScript 会将其推断为
type[].

索引.ts


// ✅ Named function returning a tuple
function getTuple(): [number, number] {
  return [5, 10];
}

// ✅ Arrow function returning a tuple
const getTuple2 = (): [string, string] => {
  return ['bobby', 'hadz'];
};

// ✅ Using a type
type Numbers = [number, number];

function getTuple4(): Numbers {
  return [10, 10];
}

您可以在参数列表之后设置
函数的返回类型。

要将函数的返回类型设置为元
组，请在方括号之间传递元组的类型，就像将元素传递给数组一样。

索引.ts


function getTuple(a: number, b: number): [number, number] {
  return [a, b];
}

这些示例展示了如何将函数的返回类型设置为包含不同值的元组。

显式设置函数返回类型的优点是，如果您尝试返回不同类型的元组，类型检查器会抛出错误。

索引.ts


function getTuple(): [number, number] {
  // ⛔️ Error: Type '[number, number, number]'
  // is not assignable to type '[number, number]'
  return [10, 100, 1000];
}

如果你没有显式设置函数的返回类型，TypeScript 会推断它是number[]而不是[number, number].

索引.ts


// 👇️ function getTuple(): number[]
function getTuple() {
  return [10, 100];
}

您可能还会看到const 断言的使用方式与我们键入函数返回值的方式类似。

索引.ts


// 👇️ function getTuple3(): readonly [10, 10]
function getTuple3() {
  return [10, 10] as const;
}

示例中的函数返回一个readonly数组，其中包含2值为的数字10。

这两种方法之间存在一些差异。

如果您没有显式地将类型设置为readonly或使用 const 断言，它仍然可以被改变。

索引.ts


function getTuple(): [number, number] {
  return [10, 100];
}

const t = getTuple();
t.push(1000);

console.log(t); // 👉️ [10, 100, 1000]

如果您想使用这种方法但希望元组是只读的，请将函数的返回类型传递给Readonly实用程序类型。

索引.ts


function getTuple(): Readonly<[number, number]> {
  return [10, 100];
}

const t = getTuple();
// ⛔️ Error: Property 'push' does not
// exist on type 'readonly [number, number]'.ts(2339)
t.push(1000);

Readonly
实用程序类型构造一个所有属性都
设置为的类型readonly。

在 TypeScript 中声明一个返回类型为 Readonly 的函数

使用Readonly实用程序类型声明具有只读返回类型的函数。

实用程序Readonly类型构造一个所有属性都设置为的类型
readonly。无法重新分配构造类型的属性。

索引.ts


function getArr(): Readonly<string[]> {
  return ['bobby', 'hadz', 'com'];
}

function getObj(): Readonly<{ name: string }> {
  return { name: 'Bobby Hadz' };
}

这里还有2个例子。

索引.ts


function getSet(): ReadonlySet<string> {
  return new Set(['bobby', 'hadz', 'com']);
}

function getMap(): ReadonlyMap<string, string> {
  return new Map([['name', 'Bobby Hadz']]);
}

我们使用
Readonly
实用程序类型来键入一个返回值只允许读取的函数。

您可以在参数列表之后设置
函数的返回类型。

以下代码片段中的 2 个函数具有相同的返回类型 –
readonly字符串数组。

索引.ts


function getArr(): Readonly<string[]> {
  return ['bobby', 'hadz', 'com'];
}

function getArr2(): ReadonlyArray<string> {
  return ['a', 'b', 'c'];
}

如果您尝试更改数组中的值readonly，则会出现错误。

索引.ts


function getArr(): Readonly<string[]> {
  return ['bobby', 'hadz', 'com'];
}

const a = getArr();

// ⛔️ Index signature in type 'readonly string[]'
// only permits reading.ts(2542)
a[0] = 'z';

使用只读对象时也是如此。

索引.ts


function getObj(): Readonly<{ name: string }> {
  return { name: 'Bobby Hadz' };
}

const obj = getObj();

// ⛔️ Error: Property 'age' does not exist
// on type 'Readonly<{ name: string; }>'.ts(2339)
obj.age = 30;

使用 Set 或 Map 对象时，请确保使用相应的实用程序类型 –ReadonlySet和ReadonlyMap.

索引.ts


function getSet(): ReadonlySet<string> {
  return new Set(['bobby', 'hadz', 'com']);
}

function getMap(): ReadonlyMap<string, string> {
  return new Map([['name', 'Bobby Hadz']]);
}

我们传递给实用程序类型的第一个类型ReadonlyMap是键的类型，第二个是值的类型。

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

额外资源

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

在 TypeScript 中声明返回对象或数组的函数

目录

Declare a function with an Object return type in TypeScript

在 TypeScript 中声明一个返回类型为 Object 的函数

使用索引签名声明一个返回类型为 Object 的函数

目录

在 TypeScript 中声明一个返回类型为 Array 的函数

使用联合类型函数返回混合类型数组

在 TypeScript 中返回对象数组的函数

使用索引签名来键入返回对象数组的函数

目录

在 TypeScript 中声明一个返回类型为 Tuple 的函数

在 TypeScript 中声明一个返回类型为 Readonly 的函数

额外资源