How to suppress error TS2533 Object is possibly null or undefined

Question

I have a type   type tSelectProtected       handleSelector   string    data   tSelectDataItem       wrapperEle   HTMLElement    inputEle   HTMLElement    listEle   HTMLElement    resultEle   HTMLElement     maxVisibleListItems   number     I declare a global module-wise variable   var  protected   tSelectProtected         I m assigning proper value in function1   scope    protected listEle   document createElement  DIV      Later in function2   scope  I m calling    protected listEle classList add  visible      I m getting TypeScript error   error TS2533  Object is possibly  null  or  undefined    I know that I can do explicit check using if   protected listEle    protected listEle  to calm down compiler but this seems to be very unhandy for most non trivial cases   How this situation can or should be handled without disabling TS compiler checks

User · Answer

If you know the type will never be null or undefined  you should declare it as foo  Bar without the    Declaring a type with the   Bar syntax means it could potentially be undefined  which is something you need to check for   In other words  the compiler is doing exactly what you re asking it to  If you want it to be optional  you ll need to the check later

User · Answer

Tip for RxJS  I ll often have member variables of type Observable lt string gt   and I won t be initializing it until ngOnInit  using Angular   The compiler then assumes it to be uninitialized becasue it isn t  definitely assigned in the constructor  - and the compiler is never going to understand ngOnInit   You can use the   assertion operator on the definition to avoid the error   favoriteColor   Observable lt string gt     An uninitialized observable can cause all kinds of runtime pain with errors like  you must provide a stream but you provided null   The   is fine if you definitely know it s going to be set in something like ngOnInit  but there may be cases where the value is set in some other less deterministic way    So an alternative I ll sometimes use is    public loaded   Observable lt boolean gt    uninitialized  loaded      Where uninitialized is defined globally somewhere as   export const uninitialized    name  string    gt  throwError name     not initialized      Then if you ever use this stream without it being defined it will immediately throw a runtime error

User · Answer

This is rather verbose and don t like it but it s the only thing that worked for me  if  inputFile  amp  amp  inputFile current              inputFile current as never  as HTMLInputElement  click      only if  inputFile  amp  amp  inputFile current            inputFile current click      also with   or   didn t work    didn t work for me  Typesript version  3 9 7 with eslint and recommended rules

User · Answer

Try to call object like this     lt any gt Object  dosomething   This error has come because you have declared them as optional using    Now Typescript does strict check and it won t allow doing anything that may be undefined  Therefore  you can use   lt any gt yourObject  here

User · Answer

If you know from external means that an expression is not null or undefined  you can use the non-null assertion operator   to coerce away those types      Error  some expr may be null or undefined let x   some expr thing     OK let y   some expr  thing

User · Answer

Not a direct answer to the OP s question  but in my case  I had the following setup -   Typescript - v3 6 2 tslint - v5 20 0     And using the following code   const refToElement   useRef null    if  refToElement  amp  amp  refToElement current         refToElement current focus       Object is possibly  null   for refToElement current      I moved on by suppressing the compiler for that line  Note that since it s a compiler error and not the linter error     tslint disable-next-line didn t work  Also  as per the documentation  this should be used rarely  only when necessary -   const refToElement   useRef null    if  refToElement  amp  amp  refToElement current             ts-ignore  Object is possibly  null        refToElement current focus         UPDATE     With Typescript 3 7  you can use optional chaining  to solve the above problem as -   refToElement  current  focus

User · Answer

In ReactJS  I check in the constructor if the variables are null  if they are I treat it like an exception and manage the exception appropriately  If the variables are not null  code carries on and compiler does not complain anymore after that point   private variable1  any  private variable2  any   constructor props  IProps        super props           i e  here I am trying to access an HTML element        which might be null if there is a typo in the name     this variable1   document querySelector  element1        this variable2   document querySelector  element2            check if objects are null     if  this variable1     this variable2               Manage the  exception   show the user a message  etc        else              Interpreter should not complain from this point on            in any part of the file         this variable1 disabled   true     i e  this line should not show the error

User · Answer

For me this was an error with the ref and react  const quoteElement   React useRef   const somethingElse   quoteElement  current  offsetHeight    0 This would throw the error  the fix  to give it a type      lt div gt  reference type const divRef   React useRef lt HTMLDivElement gt  null        lt button gt  reference type const buttonRef   React useRef lt HTMLButtonElement gt  null        lt br   gt  reference type const brRef   React useRef lt HTMLBRElement gt  null        lt a gt  reference type const linkRef   React useRef lt HTMLLinkElement gt  null    No more errors  hopefully in some way this might help somebody else  or even me in the future  P

User · Answer

As of TypeScript 3 7  https   www typescriptlang org docs handbook release-notes typescript-3-7 html   you can now use the    operator to get undefined when accessing an attribute  or calling a method  on a null or undefined object   inputEl  current  focus       skips the call when inputEl or inputEl current is null or undefined

User · Answer

This is not an answer for the OP but I ve seen a lot of people confused about how to avoid this error in the comments  This is a simple way to pass the compiler check if  typeof object       undefined            your code    Note  This won t work if  object     undefined               your code

User · Answer

This solution worked for me    go to tsconfig json and add  strictNullChecks  false

User · Answer

This feature is called  quot strict null checks quot   to turn it off ensure that the --strictNullChecks compiler flag is not set  However  the existence of null has been described as The Billion Dollar Mistake  so it is exciting to see languages such as TypeScript introducing a fix  I d strongly recommend keeping it turned on  One way to fix this is to ensure that the values are never null or undefined  for example by initialising them up front  interface SelectProtected       readonly wrapperElement  HTMLDivElement      readonly inputElement  HTMLInputElement     const selectProtected  SelectProtected         wrapperElement  document createElement  quot div quot        inputElement  document createElement  quot input quot       See Ryan Cavanaugh s answer for an alternative option  though

User · Answer

This is not the OP s problem  but I got the same Object is possibly  null  message when I had declared a parameter as the null type by accident   something  null    instead of assigning it the value of null   something  string   null

User · Answer

In typescript you can do the following to suppress the error    let subString   string    subString  gt   null  - Note the added exclamation mark before null

User · Answer

I ran in to this with React when setting state and using map   In this case I was making an API fetch call and the value of the response wasn t known  but should have a value  Answer   I used a custom type for this  but because the value could be null  I got a TS error anyway  Allowing the type to be null doesn t fix it  alternatively you could use a default parameter value  but this was messy for my case   I overcame it by providing a default value in the event the response was empty by just using a ternary operator   this setState   record   response Answer    response Answer      default   default

User · Answer

To fix this you can simply use the exclamation mark if you re sure that the object is not null when accessing its property  list  values  At first sight  some people might confuse this with the safe navigation operator from angular  this is not the case  list  values  The   post-fix expression will tell the TS compiler that variable is not null  if that s not the case it will crash at runtime useRef for useRef hook use like this const value   inputRef  current  value

User · Answer

import React    useRef  useState   from  react      const inputRef   useRef        function chooseFile       const   current     inputRef    current      click       gt       click          lt input    onChange  e   gt         setFile e target files            id  quot select-file quot     type  quot file quot     ref  inputRef    gt   lt Button onClick  chooseFile  shadow icon  quot  upload svg quot  gt     Choose file  lt  Button gt   the unique code that works to me using next js

User · Answer

As an option  you can use a type casting  If you have this error from typescript that means that some variable has type or is undefined   let a  string     undefined   let b  number   a length      ts  Object is possibly  undefined  let c  number    a as string    length     ok   Be sure that a really exist in your code

User · Answer

I used   if  object     undefined           continue - error suppressed when used in this way      Alternatively  you could use type coercion   const objectX   object as string   Although  before choosing one of the above workarounds  please consider the architecture you are aiming for and it s impact to the bigger picture

[typescript] How to suppress "error TS2533: Object is possibly 'null' or 'undefined'"?

Examples related to typescript