7 Useful TypeScript Operators and Keywords

Introduction

This guide will present to you the following Typescript’s operators and keywords that are too often forgotten : !! , is , in , as , ?. and ?? .

Bang bang it shot me down

Everyone known the logical operator! which perform a logical negation on the provided operand.

Few people knows of it’s big brother, the !! operator that ultimately cast the given operand to a boolean value.

> Examples :

The “bang bang” operator is useful to perform nullable checks in a sleek way.

> Example with and without the bang bang operator :

Wait a minute, who are you again ?

The is keyword is used to perform type predication. Which consist to dynamically tell Typescript about the type of a variable.

In the following example, we want to display the size of the tank where Fish are living into. The thing is, we have an array containing different kind of Animal:

In the example, due to the call of isFishTypescript will know that x is a Fish and will stop to show you errors.

> Example of code without type predication :

Are you in here ?

The operator in checks if the given object contains the provided key. It is handy, but careful about where it is looking at, any non object values will make it crash.

Returns true if it does contains the key, false otherwise

> Example with obj worthing null :

You are an Apache helicopter now

Look at me, you are an Apache helicopter now

In a perfect world, Typescript would be a genius capable of inferring the types of every functions and variables. In reality, Typescript is limited and it not able to infer the type of the variable in the way you would expect.

There goes your new ally, the as keyword.

as allows you to manually type any variable or function, overriding any infer that would have been made by Typescript.

> Syntax examples :

> Real case example :

Downcast example

In the above code, we are creating two Animal , one Fish and one Bird . Then we store them both inside of an array — inferred by Typescript as (Fish | Bird)[] .

At this moment, we know as a developer that the first element of the array is a Fish, calling animals[0].swim() should work. But unfortunately, Typescript does not agree.

Using as here allow us to force Typescript to accept that animals[0] is a Fish .

Extra careful steps

The support of the Optional chaining feature has been added in Typescript 3.7.

The ?. operator finally provide a sleek solution to undefined properties accesses.

We are all familiar with the error “cannot read property X of undefined” when trying to access an non existing key:

We are also all familiar with the solution :

It is long, it is repetitive, and it is ugly.

With ?. now enjoy !

Backup plan

In addition to optional chaining, Typescript 3.7 also bring up the nullish coalescing which can be used to set up a default value.

> Example with a combo between optional chaining and nullish coalescing :

The new version
The old version

Thank you for reading this article. Let me know if something is wrong or if there are anything to add. This being my first article and as a non english speaker, I’m eager to improve !

Have a good day :)

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Code Complexity — Profiling Your Code { guide 2 }

Filtering an array of objects in JS

Customer Convo: Dan Gebhardt, Cerebris

Setting up Google OAuth in VulcanJS

Start learning JavaScript and jQuery while building a game of chess

Tutorial: build a i18n app with Vue3, Vuex4 and the composition API

Controlling React API Calls With Hooks

What is ‘this’? (JavaScript)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Orelsanpls

Orelsanpls

More from Medium

Publishing your First Typescript NPM Package

Why I am literally in one step from hating SASS?

Don’t forget to take a step back in your start-up. Database Back-ups in your .NET Application

Why you should adopt Typescript for a Production Level App