Declare a function with an Array return type in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 24, 2022

banner

Photo from Unsplash

Declare a function with an Array return type in TypeScript #

To declare a function with an array return type, set the return type of the function to an array right after the function's parameter list, e.g. function getArr(): string[] {}. If the return type of the function is not set, TypeScript will infer it.

index.ts
// ✅ Named function returning array of strings function getArr(): string[] { return ['a', 'b', 'c']; } // ✅ Arrow function returning array of numbers const getArr2 = (): number[] => { return [1, 2, 3]; }; // ✅ Class method returning array of objects class A { getArr(): { id: number; name: string }[] { return [{ id: 1, name: 'Tom' }]; } } // ✅ Using type as Person[] for function's return value type Person = { name: string; age: number; }; function getArr3(): Person[] { return [{ name: 'Tom', age: 30 }]; }

You can set the return type of a function right after its parameter list.

index.ts
type Person = { name: string; age: number; }; function getArr3(name: string, age: number): Person[] { return [{ name, age }];

The examples above show how to set the return type of a function to an array containing different values.

The advantage of setting the return type of the function explicitly is that the type checker would throw an error if you try to return an array of a different type.

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

If you don't explicitly set the return type of the function, TypeScript will infer it.

index.ts
// 👇️ function getArr(): string[] function getArr() { return ['a', 'b', 'c']; }

If your function returns an array of mixed type, e.g. strings and numbers, you have to use a union to specify the function's return type.

index.ts
function getArr(): (string | number)[] { return ['a', 1, 'b', 2]; }

The function above returns an array that contains strings and numbers. Notice that we used parentheses to wrap the values - (string | number)[] and not string | number[].

If your function returns an array of objects, you can create a type or an interface and set the function's return type as Type[].

index.ts
type Person = { name: string; age: number; }; function getArr3(name: string, age: number): Person[] { return [{ name, age }]; }

The function above returns an array of objects that contain the name and age properties.

Sometimes when you return an array of objects, you might now know all of the properties an object might have ahead of time.

If that's the case, you can use an index signature.

index.ts
type Person = { name: string; age: number; [key: string]: any; // 👈️ index signature }; function getArr3(name: string, age: number): Person[] { return [{ name, age, city: 'Santiago' }]; }

An index signature is used when we don't know all of the names of a type's properties and the type of its values ahead of time.

The index signature in the examples means that when an the object is indexed with a string, it will return a value of any type.

You might also see the index signature {[key: string]: string} in examples. It represents a key-value structure that when indexed with a string returns a value of type string.

We still get type safety for the properties that we know about in advance.

For example, the name and age properties have to be set and be of specific type.

If you try to omit the properties or set them to an incorrect type, you'd get an error.

index.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' }]; }

We passed a boolean for the name property, so the type checker threw an error.

It's always best to be as explicit as possible and write the most type-safe code.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.