Borislav Hadzhiev
Sun Mar 06 2022·3 min read
Photo by Jake Melara
The "Type 'string' is not assignable to type" TypeScript error occurs when we
are trying 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.
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);
Notice that 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 an error.
string
is too generic when one of the string literals draft
, read
or unread
is expected.To solve the error, use a
type assertion
to cast the string to be of type EmailStatus
.
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 solves 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.
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, you can change the type of the letter property in the object
to Letter
or use a type assertion.
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
you could directly type the letter
property in the object as Letter
.
Let's look at another example of how the error occurs.
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.
type EmailStatus = 'draft' | 'read' | 'unread'; // 👇️ type is readonly ["unread"] const arr2 = ['unread'] as const; const arr3: EmailStatus[] = ['draft', 'read']; const arr4: EmailStatus[] = [...arr2, ...arr3];
as const
syntax converts the array into a readonly tuple that contains a single string - unread
. This might not be what you want if you have to change the contents of the array.A more universal approach is to use a type assertion, like we did in the previous examples.
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.
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 error is to access the specific property in the enum if possible.
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.