Type 'string' is not assignable to type in TypeScript

Type 'string' is not assignable to type in TypeScript #

The "Type 'string' is not assignable to type" TypeScript error occurs when we try to assign a value of type string to something that expects a different type, e.g. a more specific string literal type or an enum. To solve the error use a const or a type assertion.

Here is the first example of how the error occurs.

Copied!
type EmailStatus = 'draft' | 'read' | 'unread';

// 👇️ status has type `string`
let status = 'draft';
status = 'read';

// ⛔️ Error: Type 'string' is not
// assignable to type 'EmailStatus'.ts(2322)
const current: EmailStatus = status;

console.log(current);

The status variable has a type of string and the current variable has a type of EmailStatus.

When we try to assign a string to a variable that expects a value of type EmailStatus, we get the error.

To solve the error, use a type assertion to cast the string to be of type EmailStatus.

Copied!
type EmailStatus = 'draft' | 'read' | 'unread';

// 👇️ type is EmailStatus (not string)
let status = 'draft' as EmailStatus; // 👈️ use type assertion
status = 'read';

const current: EmailStatus = status;

console.log(current); // 👉️ "read"

We used a type assertion to change the type of the status variable to EmailStatus which resolved the error.

The error occurs because, the string type has many more potential values than the EmailStatus type, which only covers 3 string literal values.

Let's look at another example of how the error occurs.

Copied!
type Letter = 'a' | 'b';
const arr: Letter[] = ['a', 'b'];

const obj: { letter: string } = {
  letter: 'a',
};

// ⛔️ Argument of type 'string' is not
// assignable to parameter of type 'Letter'.ts(2345)
arr.push(obj.letter);

The letter property in the object is typed as string and the array only expects strings of type Letter.

To solve the error, change the type of the letter property in the object to Letter or use a type assertion.

Copied!
type Letter = 'a' | 'b';
const arr: Letter[] = ['a', 'b'];

const obj: { letter: string } = {
  letter: 'a',
};

arr.push(obj.letter as Letter); // 👈️ type assertion

We used a type assertion to get around the error. However, it would be better if we could directly type the letter property in the object as Letter.

Let's look at another example of how the error occurs.

Copied!
type EmailStatus = 'draft' | 'read' | 'unread';

// 👇️ type is string[]
const arr2 = ['unread'];

const arr3: EmailStatus[] = ['draft', 'read'];

// ⛔️ Error: Type 'string[]' is not
// assignable to type 'EmailStatus[]'.
const arr4: EmailStatus[] = [...arr2, ...arr3];

The arr2 variable has a type of string[], whereas arr4 has a much more specific type of EmailStatus[].

One way to solve the error is to use a const assertion.

Copied!
type EmailStatus = 'draft' | 'read' | 'unread';

// 👇️ type is readonly ["unread"]
const arr2 = ['unread'] as const;

const arr3: EmailStatus[] = ['draft', 'read'];

const arr4: EmailStatus[] = [...arr2, ...arr3];

A more universal approach is to use a type assertion, as we did in the previous examples.

Copied!
type EmailStatus = 'draft' | 'read' | 'unread';

// 👇️ type is EmailStatus[]
const arr2 = ['unread'] as EmailStatus[];

const arr3: EmailStatus[] = ['draft', 'read'];

const arr4: EmailStatus[] = [...arr2, ...arr3];

Now the arr2 variable is typed as EmailStatus[] so we can unpack it into arr4.

Another common cause of the error is using enums with hardcoded strings.

Copied!
export enum EmailStatus {
  Read = 'READ',
  Unread = 'UNREAD',
  Draft = 'DRAFT',
}

// ⛔️ Type '"READ"' is not assignable
// to type 'EmailStatus'.ts(2322)
const status: EmailStatus = 'READ';

The best way to get around this is to access the specific property on the enum if possible.

Copied!
export enum EmailStatus {
  Read = 'READ',
  Unread = 'UNREAD',
  Draft = 'DRAFT',
}

// ✅ Solution 1
const status: EmailStatus = EmailStatus.Read;

// ✅ Solution 2
const status2: EmailStatus = 'READ' as EmailStatus;

If, for some reason, you can't access the property on the enum, use a type assertion.

Trying to use hardcoded strings with enums is a common cause of the error.

Conclusion #

The "Type 'string' is not assignable to type" TypeScript error occurs when we try to assign a value of type string to something that expects a different type, e.g. a more specific string literal type or an enum. To solve the error use a const or a type assertion.