Typescript Type string undefined is not assignable to type string

Question

When I make any property of an interface optional  I an error like following while assigning its member to some other variable     TS2322  Type   string     undefined   is  not  assignable  to  type   string       Type   undefined   is  not  assignable  to  type   string     interface Person     name  string    age  string    gender  string    occupation  string     function getPerson      let person    lt Person gt  name  John      return person    let person  Person   getPerson    let name1 string   person name    lt  lt  lt Error here    How do I get around this error

User · Answer

You can use the NonNullable Utility Type   Example  type T0   NonNullable lt string   number   undefined gt       string   number type T1   NonNullable lt string     null   undefined gt       string     Docs

User · Answer

To avoid the compilation error I used   let name1 string   person name          And then validate the empty string

User · Answer

Had the same issue   I find out that react-scrips add  strict   true to tsconfig json    After I removed it everything works great   Edit  Need to warn that changing this property means that you      not being warned about potential run-time errors anymore     as been pointed out by PaulG in comments  Thank you     Use  strict   false only if you fully understand what it affects

User · Answer

Here s a quick way to get what is happening   When you did the following    name    string  You were saying to TypeScript it was optional  Nevertheless  when you did   let name1   string   person name     lt  lt  lt Error here    You did not leave it a choice  You needed to have a Union on it reflecting the undefined type   let name1   string   undefined   person name     lt  lt  lt No error here    Using your answer  I was able to sketch out the following which is basically  an Interface  a Class and an Object  I find this approach simpler  never mind if you don t      Interface interface iPerson       fname    string      age    number      gender    string      occupation    string      get person   any       Class Object class Person implements iPerson       fname    string      age    number      gender    string      occupation    string      get person   any   function              return this fname              Object literal const person1   Person         fname    Steve       age   8      gender    Male       occupation    IT       const p name  string   undefined   person1 fname      Object instance  const person2  Person   new Person    person2 fname    Steve   person2 age   8  person2 gender    Male   person2 occupation    IT       Accessing the object literal  person1  and instance  person2  console log  person1      p name   console log  person2      person2 get person

User · Answer

A more production-ready way to handle this is to actually ensure that name is present  Assuming this is a minimal example of a larger project that a group of people are involved with  you don t know how getPerson will change in the future   if   person name        throw new Error  Unexpected error  Missing name       let name1  string   person name    Alternatively  you can type name1 as string   undefined  and handle cases of undefined further down  However  it s typically better to handle unexpected errors earlier on   You can also let TypeScript infer the type by omitting the explicit type  let name1   person name This will still prevent name1 from being reassigned as a number  for example

User · Answer

You can now use the non-null assertion operator that is here exactly for your use case   It tells TypeScript that even though something looks like it could be null  it can trust you that it s not   let name1 string   person name                                    note the exclamation mark here

User · Answer

I know this is kinda late answer but another way besides yannick s answer https   stackoverflow com a 57062363 6603342 to use   is to cast it as string thus telling TypeScript i am sure this is a string thus converting  let name1 string   person name    lt  lt  lt Error here    to  let name1 string   person name as string    This will make the error go away but if by any chance this is not a string you will get a run-time error which is one of the reassons we are using TypeScript to ensure that the type matches and avoid such errors at compile time

User · Answer

try to find out what the actual value is beforehand  If person has a valid name  assign it to name1  else assign undefined   let name1  string    person name    person name   undefined

User · Answer

You could make use of Typescript s optional chaining  Example   const name   person  name    If the property name exists on the person object you would get its value but if not it would automatically return undefined   You could make use of this resource for a better understanding   https   www typescriptlang org docs handbook release-notes typescript-3-7 html

User · Answer

Solution 1  Remove the explicit type definition Since getPerson already returns a Person with a name  we can use the inferred type  function getPerson      let person    name  quot John quot      return person     let person   getPerson     If we were to define person  Person we would lose a piece of information  We know getPerson returns an object with a non-optional property called name  but describing it as Person would bring the optionality back  Solution 2  Use a more precise definition type Require lt T  K extends keyof T gt    T  amp       P in K -   T P      function getPerson       let person    name  quot John quot      return person     let person  Require lt Person   name  gt    getPerson    let name1 string   person name   Solution 3  Redesign your interface A shape in which all properties are optional is called a weak type and usually is an indicator of bad design  If we were to make name a required property  your problem goes away  interface Person     name string    age  string    gender  string    occupation  string

User · Answer

if you want to have nullable property change your interface to this  interface Person     name  string   null    age  string   null    gender  string   null    occupation  string   null      if being undefined is not the case you can remove question marks     from in front of the property names

User · Answer

As of TypeScript 3 7 you can use nullish coalescing operator     You can think of this feature as a way to    fall back    to a default value when dealing with null or undefined let name1 string   person name         The    operator can replace uses of    when trying to use a default value and can be used when dealing with booleans  numbers  etc   where    cannot be used  As of TypeScript 4 you can use     assignment operator as a     b which is an alternative to a   a    b

User · Answer

You trying to set variable name1  witch type set as strict string  it MUST be string  with value from object field name  witch value type set as optional string  it can be string or undefined  because of question sign   If you really need this behavior  you have to change type of name1 like this   let name1  string   undefined   person name    And it ll be ok

[typescript] Typescript: Type 'string | undefined' is not assignable to type 'string'

Examples related to typescript