Typescript Type string is not assignable to type

Question

Here s what I have in fruit ts  export type Fruit    Orange     Apple     Banana    Now I m importing fruit ts in another typescript file  Here s what I have  myString string    Banana    myFruit Fruit   myString    When I do  myFruit   myString    I get an error      Type  string  is not assignable to type   Orange     Apple       Banana     How can I assign a string to a variable of custom type Fruit

User · Answer

I had a similar issue when passing props to a React Component.

Reason: My type inference on myArray wasn't working correctly

https://codesandbox.io/s/type-string-issue-fixed-z9jth?file=/src/App.tsx

Special thanks to Brady from Reactiflux for helping with this issue.

User · Answer

You ll need to cast it   export type Fruit    Orange     Apple     Banana   let myString  string    Banana    let myFruit  Fruit   myString as Fruit    Also notice that when using string literals you need to use only one    Edit  As mentioned in the other answer by  Simon Weaver  it s now possible to assert it to const   let fruit    Banana  as const

User · Answer

If you re casting to a dropdownvalue   when mocking data for example  compose it as an array of objects with value and display properties   example       value    test1    display1    test display     value    test2    display    test display2

User · Answer

When you do this   export type Fruit    Orange     Apple     Banana       you are creating a type called Fruit that can only contain the literals  Orange    Apple  and  Banana   This type extends String  hence it can be assigned to String  However  String does NOT extend  Orange     Apple     Banana   so it cannot be assigned to it  String is less specific  It can be any string   When you do this   export type Fruit    Orange     Apple     Banana   const myString    Banana    const myFruit  Fruit   myString       it works  Why  Because the actual type of myString in this example is  Banana   Yes   Banana  is the type  It is extends String so it s assignable to String  Additionally  a type extends a Union Type when it extends any of its components  In this case   Banana   the type  extends  Orange     Apple     Banana  because it extends one of its components  Hence   Banana  is assignable to  Orange     Apple     Banana  or Fruit

User · Answer

I was facing the same issue  I made below changes and the issue got resolved   Open watchQueryOptions d ts file    apollo-client core watchQueryOptions d ts   Change the query type any instead of DocumentNode  Same for mutation  Before   export interface QueryBaseOptions lt TVariables   OperationVariables gt        query    DocumentNode      After   export interface QueryBaseOptions lt TVariables   OperationVariables gt        query    any

User · Answer

Typescript 3 4 introduces the new  const  assertion  You can now prevent literal types  eg   orange  or  red   being  widened  to type string with a so-called const assertion   You will be able to do   let fruit    orange  as const      or    let fruit    lt const gt   orange     And then it won t turn itself into a string anymore - which is the root of the problem in the question

User · Answer

All the above answers are valid  however  there are some cases that the String Literal Type is part of another complex type  Consider the following example         in foo ts   export type ToolbarTheme         size   large     small              in bar ts   import   ToolbarTheme   from    foo ts     function useToolbarTheme theme  ToolbarTheme                    Here you will get the following error        Type  string  is not assignable to type   small     large   ts 2322      large    small   forEach size   gt        useToolbarTheme   size            You have multiple solutions to fix this  Each solution is valid and has its own use cases   1  The first solution is to define a type for the size and export it from the foo ts  This is good if when you need to work with the size parameter by its own  For example  you have a function that accepts or returns a parameter of type size and you want to type it        in foo ts   export type ToolbarThemeSize    large     small     export type ToolbarTheme         size  ToolbarThemeSize            in bar ts   import   ToolbarTheme  ToolbarThemeSize   from    foo ts     function useToolbarTheme theme  ToolbarTheme                function getToolbarSize    ToolbarThemeSize                   large    small   forEach size   gt        useToolbarTheme   size  size as ToolbarThemeSize            2  The second option is to just cast it to the type ToolbarTheme  In this case  you don t need to expose the internal of ToolbarTheme if you don t need         in foo ts   export type ToolbarTheme         size   large     small             in bar ts   import   ToolbarTheme   from    foo ts     function useToolbarTheme theme  ToolbarTheme                   large    small   forEach size   gt        useToolbarTheme   size   as ToolbarTheme

User · Answer

There are several situations that will give you this particular error  In the case of the OP there was a value defined explicitly as a string  So I have to assume that maybe this came from a dropdown  or web service or raw JSON string    In that case a simple cast  lt Fruit gt  fruitString or fruitString as Fruit is the only solution  see other answers   You wouldn t ever be able to improve on this at compile time   Edit  See my other answer about  lt const gt      However it s very easy to run into this same error when using constants in your code that aren t ever intended to be of type string  My answer focuses on that second scenario     First of all  Why are  magic  string constants often better than an enum    I like the way a string constant looks vs  an enum - it s compact and  javascripty  Makes more sense if the component you re using already uses string constants  Having to import an  enum type  just to get an enumeration value can be troublesome in itself Whatever I do I want it to be compile safe so if I add remove a valid value from the union type  or mistype it then it MUST give a compile error    Fortunately when you define   export type FieldErrorType    none     missing     invalid       you re actually defining a union of types where  missing  is actually a type    I often run into the  not assignable  error if I have a string like  banana  in my typescript and the compiler thinks I meant it as a string  whereas I really wanted it to be of type banana  How smart the compiler is able to be will depend on the structure of your code   Here s an example of when I got this error today      this gives me the error  string is not assignable to type FieldErrorType  fieldErrors      fieldName   number   error   invalid        As soon as I found out that  invalid  or  banana  could be either a type or a string I realized I could just assert a string into that type  Essentially cast it to itself  and tell the compiler no I don t want this to be a string      so this gives no error  and I don t need to import the union type too fieldErrors      fieldName   number   error   lt  invalid  gt   invalid        So what s wrong with just  casting  to FieldErrorType  or Fruit      why not do this  fieldErrors      fieldName   number   error   lt FieldErrorType gt   invalid        It s not compile time safe     lt FieldErrorType gt   invalidddd       COMPILER ALLOWS THIS - NOT GOOD    lt FieldErrorType gt   dog              COMPILER ALLOWS THIS - NOT GOOD    dog  as FieldErrorType            COMPILER ALLOWS THIS - NOT GOOD    Why  This is typescript so  lt FieldErrorType gt  is an assertion and you are telling the compiler a dog is a FieldErrorType  And the compiler will allow it   BUT if you do the following  then the compiler will convert the string to a type    lt  invalid  gt   invalid          THIS IS OK  - GOOD   lt  banana  gt   banana            THIS IS OK  - GOOD   lt  invalid  gt   invalidddd       ERROR       - GOOD   lt  dog  gt   dog                  ERROR       - GOOD   Just watch out for stupid typos like this     lt  banana  gt   banan         PROBABLY WILL BECOME RUNTIME ERROR - YOUR OWN FAULT    Another way to solve the problem is by casting the parent object   My definitions were as follows   export type FieldName    number     expirationDate     cvv      export type FieldError    none     missing     invalid      export type FieldErrorType     field  FieldName  error  FieldError     Let s say we get an error with this  the string not assignable error      fieldErrors      field   number   error   invalid        We can  assert  the whole object as a FieldErrorType like this     fieldErrors     lt FieldErrorType gt    field   number   error   invalid        Then we avoid having to do  lt  invalid  gt   invalid    But what about typos  Doesn t  lt FieldErrorType gt  just assert whatever is on the right to be of that type  Not in this case - fortunately the compiler WILL complain if you do this  because it s clever enough to know it s impossible     fieldErrors     lt FieldErrorType gt    field   number   error   dog

User · Answer

I see this is a little old  but there might be a better solution here   When you want a string  but you want the string to only match certain values  you can use enums   For example   enum Fruit       Orange    Orange       Apple     Apple       Banana    Banana     let myFruit  Fruit   Fruit Banana    Now you ll know that no matter what  myFruit will always be the string  Banana   Or whatever other enumerable value you choose   This is useful for many things  whether it be grouping similar values like this  or mapping user-friendly values to machine-friendly values  all while enforcing and restricting the values the compiler will allow

[javascript] Typescript Type 'string' is not assignable to type

Examples related to javascript

Examples related to typescript

Examples related to angular