Using `typeof` to infer a type

In this lesson, we will learn how to use the typeof operator to infer a type from an object.

Understanding typeof in a type annotation

The syntax for using a typeof operator in a type annotation is as follows:

Copy
let newObject: typeof existingObject;

When TypeScript sees the typeof operator in a type annotation, it queries the object after it and extracts its type. So, in the example above, the type of existingObject is given to the newObject variable.

This syntax can be used on function parameters as well:

Copy
function (param: typeof existingObject) { ... }

An example

We are going to explore this approach in the code editor below:

Open exercise in CodeSandbox

The editor contains a ContactDetails type which is used on a initialContactDetails variable and a parameter within a saveContactDetails function.

• Remove the ContactDetails type alias from the code.

• Remove the ContactDetails type annotation from the initialContactDetails variable.

• Remove the ContactDetails type annotation from the details parameter in the function. Replace this with a typeof annotation that references the initialContactDetails variable.

Neat!

• Add an additional property to initialContactDetails:

Copy
const initialContactDetails = {
  ...
  mobile: ""
};

Cool!

Summary

The typeof type annotation can be used to extract the type from an object. This approach reduces the types we need to create, making our code more maintainable.

Next up is a quiz to test our knowledge of mapped types.