Safe navigation operator or and null property paths

Question

In Angular 2 templates safe operator    works  but not in component ts using TypeScript 2 0  Also  safe navigation operator      doesn t work  For example  This TypeScript if  a  b  c       compiles to this JavaScript if  a b c       But when I run it  I get the follow error   Cannot read property  b  of undefined  Is there any alternative to the following  if  a  amp  amp  a b  amp  amp  a b c

User · Answer

A new library called ts-optchain provides this functionality  and unlike lodash  solution  it also keeps your types safe  here is a sample of how it is used  taken from the readme    import   oc   from  ts-optchain    interface I     a   string    b         d   string         c   Array lt       u           v   number             gt     e         f   string      g        gt  string          const x  I       a   hello     b        d   world          c     u    v  -100        u    v  200            u    v  -300              Here are a few examples of deep object traversal using  a  optional chaining vs     b  logic expressions  Each of the following pairs are equivalent in    result  Note how the benefits of optional chaining accrue with    the depth and complexity of the traversal   oc x  a        hello  x a   oc x  b d        world  x b  amp  amp  x b d   oc x  c 0  u v       -100 x c  amp  amp  x c 0   amp  amp  x c 0  u  amp  amp  x c 0  u v   oc x  c 100  u v       undefined x c  amp  amp  x c 100   amp  amp  x c 100  u  amp  amp  x c 100  u v   oc x  c 100  u v 1234      1234  x c  amp  amp  x c 100   amp  amp  x c 100  u  amp  amp  x c 100  u v     1234   oc x  e f       undefined x e  amp  amp  x e f   oc x  e f  optional default value        optional default value   x e  amp  amp  x e f      optional default value       NOTE  working with function value types can be risky  Additional run-time    checks to verify that object types are functions before invocation are advised  oc x  e g      gt   Yo Yo          Yo Yo    x e  amp  amp  x e g           gt   Yo Yo

User · Answer

Since TypeScript 3 7 was released you can use optional chaining now   Property example   let x   foo  bar baz      This is equvalent to   let x    foo     null    foo     undefined        undefined       foo bar baz      Moreover you can call   Optional Call  function otherFn   par  string    gt  void       otherFn    some value        otherFn will be called only if otherFn won t be equal to null or undefined  Usage optional chaining in IF statement  This    if  someObj  amp  amp  someObj someProperty                   can be replaced now with this  if  someObj  someProperty                   Ref  https   www typescriptlang org docs handbook release-notes typescript-3-7 html

User · Answer

Update     Planned in the scope of 3 7 release https   github com microsoft TypeScript issues 33352    You can try to write a custom function like that   The main advantage of the approach is a type-checking and partial intellisense   export function nullSafe lt T       K0 extends keyof T       K1 extends keyof T K0       K2 extends keyof T K0  K1       K3 extends keyof T K0  K1  K2       K4 extends keyof T K0  K1  K2  K3       K5 extends keyof T K0  K1  K2  K3  K4  gt       obj  T  k0  K0  k1   K1  k2   K2  k3   K3  k4   K4  k5   K5        let result  any   obj       const keysCount   arguments length - 1      for  var i   1  i  lt   keysCount  i              if  result     null    result     undefined  return result          result   result arguments i               return result      And usage  supports up to 5 parameters and can be extended    nullSafe a   b    c      Example on playground

User · Answer

Building on  Pvl s answer  you can include type safety on your returned value as well if you use overrides   function dig lt    T    K1 extends keyof T    gt  obj  T  key1  K1   T K1    function dig lt    T    K1 extends keyof T    K2 extends keyof T K1     gt  obj  T  key1  K1  key2  K2   T K1  K2    function dig lt    T    K1 extends keyof T    K2 extends keyof T K1     K3 extends keyof T K1  K2     gt  obj  T  key1  K1  key2  K2  key3  K3   T K1  K2  K3    function dig lt    T    K1 extends keyof T    K2 extends keyof T K1     K3 extends keyof T K1  K2     K4 extends keyof T K1  K2  K3     gt  obj  T  key1  K1  key2  K2  key3  K3  key4  K4   T K1  K2  K3  K4    function dig lt    T    K1 extends keyof T    K2 extends keyof T K1     K3 extends keyof T K1  K2     K4 extends keyof T K1  K2  K3     K5 extends keyof T K1  K2  K3  K4     gt  obj  T  key1  K1  key2  K2  key3  K3  key4  K4  key5  K5   T K1  K2  K3  K4  K5    function dig lt    T    K1 extends keyof T    K2 extends keyof T K1     K3 extends keyof T K1  K2     K4 extends keyof T K1  K2  K3     K5 extends keyof T K1  K2  K3  K4     gt  obj  T  key1  K1  key2   K2  key3   K3  key4   K4  key5   K5     T K1      T K1  K2      T K1  K2  K3      T K1  K2  K3  K4      T K1  K2  K3  K4  K5        let value  any   obj  amp  amp  obj key1        if  key2          value   value  amp  amp  value key2              if  key3          value   value  amp  amp  value key3              if  key4          value   value  amp  amp  value key4              if  key5          value   value  amp  amp  value key5              return value      Example on playground

User · Answer

is non-null assertion operator  post-fix expression  - it just saying to type checker that you re sure that a is not null or undefined       the operation a  produces a value of the type of a with null and undefined excluded     Optional chaining finally made it to typescript  3 7       The optional chaining operator    permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid  The    operator functions similarly to the   chaining operator  except that instead of causing an error if a reference is nullish  null or undefined   the expression short-circuits with a return value of undefined  When used with function calls  it returns undefined if the given function does not exist    Syntax   obj  prop    Accessing object s property obj   expr     Optional chaining with expressions arr   index     Array item access with optional chaining func   args     Optional chaining with function calls   Pay attention      Optional chaining is not valid on the left-hand side of an assignment   const object       object  property   1     Uncaught SyntaxError  Invalid left-hand side in assignment

User · Answer

Another alternative that uses an external library is   has   from Lodash   E g      has a   b c     is equal to   a  amp  amp  a b  amp  amp  a b c    EDIT  As noted in the comments  you lose out on Typescript s type inference when using this method   E g  Assuming that one s objects are properly typed  one would get a compilation error with  a  amp  amp  a b  amp  amp  a b z  if z is not defined as a field of object b  But using   has a   b z    one would not get that error

[typescript] Safe navigation operator (?.) or (!.) and null property paths

Examples related to typescript