Index signature in type 'string' only permits reading

avatar

Borislav Hadzhiev

Last updated: Feb 19, 2022

banner

Photo from Unsplash

Index signature in type 'string' only permits reading #

The "index signature in type 'string' only permits reading" error occurs when we try to write to a value that is immutable (e.g. a string) or a readonly property. To solve the error, create a new string by replacing the necessary characters or set the property to not be readonly.

index signature only permits reading

Here is an example of how the error occurs.

index.ts
const str = 'hello'; // ⛔️ Index signature in type 'String' only permits reading. str[0] = 'z';
Strings are immutable in JavaScript (and TypeScript), so we aren't able to change a string's value in place.

Instead, we have to create a new string that contains only the characters we need.

index.ts
const str = 'hello'; // ✅ Replace character at index const index = str.indexOf('e'); console.log(index); // 👉️ 1 const replacement = 'x'; const replaced = str.substring(0, index) + replacement + str.substring(index + 1); console.log(replaced); // 👉️ hxllo

The example shows how to replace the character of a string at a specific index.

Here is a code snippet that shows how to replace a specific word in a string.

index.ts
const str = 'hello world goodbye world'; const word = 'goodbye'; const index = str.indexOf(word); console.log(index); // 👉️ 12 const replacement = 'hello'; const result = str.substring(0, index) + replacement + str.substring(index + word.length); console.log(result); // 👉️ hello world hello world

This code snippet uses the same approach as the last one, but instead of replacing a single character we replaced a word by using its length.

If you want to remove a character or word from a string, use the replace method.

index.ts
const str = 'hello world goodbye world'; const removeFirst = str.replace(/world/, ''); console.log(removeFirst); // 👉️ "hello goodbye world" const removeAll = str.replace(/world/g, ''); console.log(removeAll); // 👉️ "hello goodbye"

The first example shows how to remove the first occurrence of a word from a string - we basically replace the word with an empty string.

The second example removes all occurrences of the word in the string.

Note that none of the methods above mutate the original string - they create a new string. Strings are immutable in TypeScript.

A less common cause of the error is trying to change a readonly property.

index.ts
const str = 'hello'; // ✅ Make sure you're not trying to change a `readonly` property interface ReadonlyObj { readonly [index: string]: any; } // 👇️ const p1: Person const p1: ReadonlyObj = { name: 'Tom', }; // ⛔️ Error: Index signature in type 'ReadonlyObj' // only permits reading. p1.name = 'James';

If this is the situation you're in, set the property to not be readonly if you need to change its value.

Conclusion #

The "index signature in type 'string' only permits reading" error occurs when we try to write to an immutable value (e.g. a string) or a readonly property. To solve the error, create a new string by replacing the necessary characters or set the property to not be readonly.

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.