article-6-en.md

5 Very Useful Tricks for TypeScript Typeof Operator

Welcome to the Mastering TypeScript series. This series will introduce the core knowledge and techniques of TypeScript in the form of animations. Let’s learn together! Previous articles are as follows:

简体中文

• What Are K, T, and V in TypeScript Generics?
• Using TypeScript Mapped Types Like a Pro
• Using TypeScript Conditional Types Like a Pro
• Using TypeScript Intersection Types Like a Pro
• Using TypeScript infer Like a Prov
• Using TypeScript Template Literal Types Like a Prov
• TypeScript Visualized: 15 Most Used Utility Types
• 10 Things You Need To Know About TypeScript Classes
• The Purpose of ‘declare’ Keyword in TypeScript
• How To Define Objects Type With Unknown Structures in TypeScript

In JavaScript, you can get the type of a variable through the typeof operator, so do you know what the typeof operator is used in TypeScript? In this article, I will introduce 5 common application scenarios of the typeof operator, which you may use in future projects.

1. Get the type of the object

The man object is a regular JavaScript object, in TypeScript you can use type or interface to define the type of the object. With this object type, you can use TypeScript’s built-in utility types, such as Partial, Required, Pick, or Readonly, to handle object types to meet different needs.

For simple objects, this may not be a big deal. But for large, complex objects with deeper nesting levels, manually defining their types can be mind-numbing. To solve this problem, you can use the typeof operator.

type Person = typeof man;
type Address = Person["address"];

Compared to manually defining the type before, it becomes much easier to use the typeof operator. Person["address"] is an indexed access type to look up a specific property (address) on another type (Person type).

2. Get a Type That Represents All Enum Keys As Strings

In TypeScript, enums types are special types that get compiled into regular JavaScript objects:

Therefore, you can also use the typeof operator on enums types. But this is often not of much practical use, and when dealing with enums types, it is usually combined with the keyof operator:

3. Get the Type of the Function Object

There is another more common scenario in which the typeof operator is used in your work. After obtaining the corresponding function type, you can continue to use TypeScript’s built-in ReturnType and Parameters utility types to obtain the function’s return value type and parameter type, respectively.

4. Get the Type of the Class Object

Since the typeof operator can handle function objects, it can handle Class objects? The answer is yes. In the above code, createPoint is a factory function that creates an instance of the Point class. Through the typeof operator, you can obtain the corresponding construct signature of the Point class, so as to realize the corresponding type verification. When defining the parameter type of Constructor, if the typeof operator is not used, the following error message will appear:

5. Get a More Precise Type

When using the typeof operator, if you want to get a more precise type, then you can combine it with the const assertion introduced in TypeScript version 3.4. This is used in the following way.

As can be seen from the above figure, after using the const assertion, and then using the typeof operator, we can obtain a more precise type.