DEV Community

loading...
Cover image for Typescript - Tips & Tricks - typeof

Typescript - Tips & Tricks - typeof

puppo profile image Luca Del Puppo ・2 min read

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!

Discussion (0)

pic
Editor guide