Define an Array of Strings in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 25, 2022

banner

Photo from Unsplash

Define an Array of Strings in TypeScript #

To define an array of strings, set the type of the array to string[], e.g. const arr: string[] = []. If you try to add a value of any other type to the array, the type checker would show an error.

index.ts
// ✅ Array of strings with inline declaration const arr: string[] = ['red', 'blue', 'green']; // ✅ Empty array of strings const arr2: string[] = []; // ✅ Using a type type Colors = string[]; const arr3: Colors = ['red', 'blue', 'green'];

The first example shows to how define an array of strings with an inline type.

If you try to add a value of any other type to the array, you'd get an error.

index.ts
const arr: string[] = ['red', 'blue', 'green']; // ⛔️ Error: Argument of type 'number' is // not assignable to parameter of type 'string'.ts(2345) arr.push(100);

This approach is very useful when you have to initialize the array as empty. If you don't explicitly type an empty array, TypeScript assumes its type to be any[].

index.ts
// 👇️ const arr2: any[] const arr2 = [];

TypeScript has no idea what type of values we'll add to the array, so it uses the very broad any type.

This means that we can add values of any type to the array, but we'd get no help from the type checker.

You should always explicitly set the type of empty arrays.

index.ts
const arr: string[] = ['red', 'blue', 'green']; const arr2: string[] = []; // ✅ Works arr2.push('hello'); // ⛔️ Error: Argument of type 'number' is not // assignable to parameter of type 'string'.ts(2345) arr2.push(100);

On the other hand, if you initialize the array with values, you can let TypeScript infer its type.

index.ts
// 👇️ const arr: string[] const arr = ['a', 'b', 'c'];

You could also use a type to define an array of strings.

index.ts
type Colors = string[]; const arr3: Colors = ['red', 'blue', 'green'];

If you have an object with a property that is a string array, you can also use an interface.

index.ts
interface Colorful { colors: string[]; } const arr3: Colorful = { colors: ['red', 'blue', 'green'], };

In some cases, you might know that the array will only have N elements of specific type. You could use a tuple in this scenario.

index.ts
// 👇️ const arr: [string, string] const arr: [string, string] = ['hello', 'world'];

The arr variable we declared above is a tuple containing 2 strings.

If you need to declare a readonly array of strings, use the Readonly utility type.

index.ts
const arr: Readonly<string[]> = ['hello', 'world']; // ⛔️ Property 'push' does not exist // on type 'readonly string[]'.ts(2339) arr.push('test');

We passed the string[] type to the Readonly utility type, so the array can only be read, but cannot be changed.

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.