optional-element-access with typescript

optional-element-access-with-typescript.md

Filling some Typescript gaps:

The longer you have been around, the more the landscape shifts.
We often learn just enough to move forward.
You might even study intently.
But then, you may have studied and learned a feature set that has since had more features published/released.

Looking at some tan-stack table code today ran into some typescript that was foreign to myself: link.

According to the typescript docs this is called optional-element-access, which lets you access both objects and arrays with strings and/or numbers.

Questions:

1. Was optional_element_access always a thing, and landed right away with option chaining, or did it land at a later date?
2. What other strategies can be employed to not miss updates to a landscape?
   (checking change logs)(tc39 monitoring)(let your frustrations drive your search?)(...other)

A quick example:

All examples can be tried using the ts-playground.

// Looking at some open source 
const foo = {bar: {b: 'baz', a: 'biq'}}

// valid typescript and javascript
console.log(foo['bar'])

// not valid typescript
console.log(foo.['bar'])

// valid ts not valid js. (╯°□°)╯︵ ┻━┻
console.log(foo?.['bar'])

Anyway, I am planning on using optional-element-access more often.
It should really cut down on number of &&'s and Array.isArray() usage in an application.

Option chaining in javascript

const adventurer = {
  name: "Alice",
  cat: { name: "Dinah" } 
};

const dogName = adventurer.spoon?.name; // There is no spoon.
console.log(dogName);
// Expected output: undefined

console.log(adventurer.someNonExistentMethod?.()); // There is no method.
// Expected output: undefined

const catName = adventurer.cat?.name; // There is a cat.
console.log(catName);

Option chaining in typescript

Typescript provides the option chaining described above but also optional_element_access, which lets you access both objects and arrays with strings and/or numbers.

// valid ts not valid js.
const arr = []
arr?.[0];

// valid ts not valid js. (╯°□°)╯︵ ┻━┻
const catName = adventurer.cat?.['name'];
console.log(catName);

```typescript
// valid ts not valid js. (╯°□°)╯︵ ┻━┻
const catName2 = adventurer?.['cat']?.['name'];
console.log(catName2);

Conclusion:

Looking at open source and the code others put out can reveal knowledge gaps.
These knowledge gaps might be details that you may have missed along the way; or details forgotten from disuse.

Cheers,
Dimmitt

Did you already know about optional-element-access?
Let me know I am late to the party in the comments!

Or feel free to share additional details / questions that I may have missed.

Thanks Michael! Useful info, I didn't know about this difference.

What other strategies can be employed to not miss updates to a landscape?

Be a part of the larger group, ideally a study group (a "guild" or similar), where this type of TIL -> ... message is common and appreciated. And you don't have to drive all of it. Others are happy to share.