DEV Community

Cover image for Typescript - Tips & Tricks - typeof
This is Learning profile image Luca Del Puppo
Luca Del Puppo for This is Learning

Posted on • Edited on

Typescript - Tips & Tricks - typeof

#typescript #webdev

Today I want to start a series of tips and tricks about Typescript.
I will try to publish two/three tips & tricks a week.
Before start, I want to explain why I start this series.
I start this series because every day I see too many any types in the typescript files and so I want to help the developers to learn better the typescript language.

typeof

Today I start with the typeof operator.
Typeof is an operator used to detect the type of our variables.
A little preamble, typeof is also a javascript operator, but with typescript, it has superpowers.

Typeof in javascript has these behaviors:

const valueString = "string"; const valueNumber = 1; const valueBoolean = true; const valueBigInt = 1n; const valueFunction = () => true; const valueUndefined = undefined; const valueNull = null; const object = { prop1: "value1", prop2: "value2", }; console.log(typeof valueString); // string console.log(typeof valueNumber); // number console.log(typeof valueBoolean); // boolean console.log(typeof valueBigInt); // bigint console.log(typeof valueFunction); // function console.log(typeof valueUndefined); // undefined console.log(typeof valueNull); // object console.log(typeof object); // object
Enter fullscreen mode Exit fullscreen mode

How we can see some things are strange: e.g. when we get the typeof of a null variable javascript returns an object type.

But here we see the same example in typescript:

type valueStringType = typeof valueString; // "string" type valueNumberType = typeof valueNumber; // 1 type valueBooleanType = typeof valueBoolean; // true type valueBigIntType = typeof valueBigInt; // 1n type valueFunctionType = typeof valueFunction; // () => boolean type valueUndefinedType = typeof valueUndefined; // undefined type valueNullType = typeof valueNull; // null type objectType = typeof object; // { prop1: string; prop2: string; }
Enter fullscreen mode Exit fullscreen mode

The first impact is friendlier for us developers because the typeof operator converts the type exactly as expected. The best advantages can be seen in the types: function, null, object.

But now an advanced example:

const item = { id: '0000', name: 'Item', unit: { id: '1', code: 'PZ' }, variants: [{ id: '1', code: '001', color: 'FFFFFF' }] }; type Item = typeof item; type Unit = typeof item["unit"]; type Variant = typeof item.variants[number];
Enter fullscreen mode Exit fullscreen mode

In this example, we can see how we can extract simple types from a complex object.

I leave you the link of the official documentation of this operator.

For today is all.
See you soon!

Top comments (0)