Property does not exist on type String in TypeScript [Fixed]

# Property does not exist on type String in TypeScript

The "Property does not exist on type String" error occurs when we try to access a property that doesn't exist on the string type.

To solve the error, use an object instead of a string, or make sure you're accessing a valid built-in method on the string.

Here is an example of how the error occurs.

index.ts

Copied!
const name = 'Bobby Hadz';

// ⛔️ Property 'id' does not exist on type '"Bobby Hadz"'.
console.log(name.id);

property does not exist on type string in typescript

The code for this article is available on GitHub

We tried to access an id property on a string and got the error because the id property doesn't exist on strings.

# Make sure you haven't misspelled a built-in method

If you are trying to call a built-in method, make sure you haven't misspelled it.

index.ts

Copied!
const name = 'Bobby Hadz';

// 👇️ BOBBY HADZ
console.log(name.toUpperCase());

make sure method is not misspelled

The code for this article is available on GitHub

If you didn't intend to access the property on a value of type string, use console.log to log the value on which you are accessing the property.

You can use the typeof operator to check the type of the variable before accessing a property.

If you need to check if a value is an object, click on the following article.

# Using an object instead of a string

To solve the error, use an object instead of a string and type the object's properties.

index.ts

Copied!
interface Person {
  name: string;
  id: number;
}

const p1: Person = {
  name: 'Bobby Hadz',
  id: 1,
};

console.log(p1.name); // 👉️ "Bobby Hadz"
console.log(p1.id); // 👉️ 1

using object instead of string

The code for this article is available on GitHub

We created an interface that contains the name and id properties.

The p1 variable has a type of Person, so we can safely access the name and id properties on the object.

If you need to initialize the object as empty, or with some key-value pairs missing initially, set the specific properties to optional by using a question mark.

index.ts

Copied!
interface Person {
  name?: string;
  id?: number;
}

const p1: Person = {};

p1.name = 'Bobby Hadz';
p1.id = 1;

console.log(p1.name); // 👉️ "Bobby Hadz"
console.log(p1.id); // 👉️ 1

marking properties as optional

We set the name and id object properties to optional, so we are able to initialize the object as empty.

You can set the necessary properties at a later point in time.

Note that you shouldn't try to access a property that does not exist on the object's type.

You can also use the Partial utility type to make all properties optional.

# Using variable keys

In some cases, you won't know the names of all of the object's keys or the shape of the values ahead of time.

index.ts

Copied!
type Person = {
  [key: string]: any;
  name: string;
};

const p1: Person = {
  name: 'Bobby Hadz',
};

p1.id = 1;
p1.salary = 100;

console.log(p1.name); // 👉️ "Bobby Hadz"
console.log(p1.test); // 👉️ undefined

using variable keys

The code for this article is available on GitHub

The {[key: string]: any} syntax is called an index signature and is used when you don't know the names of the object's keys or the shape of the values ahead of time.

The syntax means that when the object is indexed with a string key, it will return a value of any type.

If you know any of the names of the properties ahead of time, you can specify them to get better type safety.

We set the name property to string in the Person type, so the type checker would throw an error if the property is not provided or is set to a value of a different type.

If you don't know the names of all of the object's keys but know the shape of the values, you can use a more specific index signature for better type safety.

index.ts

Copied!
type Person = {
  [key: string]: string | number;
  name: string;
  id: number;
};

const p1: Person = {
  name: 'Bobby Hadz',
  id: 1,
};

p1.job = 'accountant';
p1.salary = 100;

use more specific index signature for type safety

The index signature in the example means that when the object is indexed with a string key, it will return a value that has a string or number type.

The string | number syntax is called a union type in TypeScript.

We had to use a union type, because both the name and id properties are strings and they return different types.

In other words, you can't specify that when the object is indexed with a string key, it returns a value of type string, and then you can add another string key to the interface that has a value of type number.

index.ts

Copied!
type Person = {
  [key: string]: string;
  name: string;
  // ⛔️ Error: Property 'salary' of type 'number' is
  // not assignable to 'string' index type 'string'.ts(2411)
  salary: number;
};

The example shows that the type checker throws an error if we specify that when indexed with a string key, the object returns a value of type string, and then try to add another string key that has a value of type number.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Property does not exist on type String in TypeScript [Fixed]