How to make object properties number type values to number literal type in TypeScript?

Originally posted here!

To make the object properties number type values to number literals, we can use the as keyword after the property number value and then type out the number literal or we can use the as keyword after accessing the property then typing out the number literal.

TL;DR

METHOD 1

// a simple object
// with "age" property type changed
// from "number" to 23 number literal
const person = {
  name: "John Doe",
  age: 23 as 23,
};

METHOD 2

// a simple object
const person2 = {
  name: "John Doe",
  age: 23,
};

// a simple function call
// with "age" property type changed
// from "number" to 23 number literal
sayAge(person2.age as 23);

To understand it better, let's say we have an object called person with two properties called name and age with values of John Doe and 23 respectively like this,

// a simple object
const person = {
  name: "John Doe",
  age: 23,
};

Now if you hover over the age property in the person object it shows the type of the age property as number like in the below image,

This is ok for most cases. But in some cases, you may need to convert the age property's type from just number to a number literal to pass it to a function call as an argument.

To do that, we can use the as keyword after the age property's number value and then type the number literal we need to use. In our case, we need to change it to 23 number literal type. It can be done like this,

// a simple object
// with "age" property type converted
// from just "number" to 23 number literal
const person = {
  name: "John Doe",
  age: 23 as 23,
};

Now if you hover over the age property you can see that the type of the age property is changed from number to 23 number literal which is what we want.

It may look like this,

Another way of achieving the same functionality is using the as keyword and typing the number literal when we are only accessing the property from the object.

For example, let's assume a function called sayAge, and on calling the function let's pass the age property value like this,

// a simple object
const person = {
  name: "John Doe",
  age: 23 as 23,
};

// a simple function call
sayAge(person.age);

Now to change the type of the age property from number to 23 number literal we can use the as keyword after the person.age and type the number literal like this,

// a simple object
const person = {
  name: "John Doe",
  age: 23 as 23,
};

// a simple function call
// with "age" property type changed
// from "number" to 23 number literal
sayAge(person.age as 23);

This is also a valid way of achieving the same functionality.

See the working of the above codes live in codesandbox

That's all 😃!

Feel free to share if you found this useful 😃.

---