How to make object properties number type values to number literal type in TypeScript?
Tags: typescript
Published: 2021-11-04 00:00:00

---
  title: How to make object properties number type values to number literal type in TypeScript?
  published: true
  tags: TypeScript
  date: Thu Nov 04 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-object-property-number-type-values-to-number-literal-type-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-879ae7028b2308bb9863ad2b01c54eb8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-object-property-number-type-values-to-number-literal-type-typescript)
  
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**

```ts
// 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**

```ts
// 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,

```ts
// 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,

![type number shown in the age property on hover](https://melvingeorge.me/_next/static/images/type-number-shown-age-property-3d7c69159e18eca7374a03298f1ec5a0.png)

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,

```ts
// 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,

![type 23 number literal shown in the age property on hover](https://melvingeorge.me/_next/static/images/type-23-number-literal-shown-age-property-72a421d628fb26ec133d79e3abebfc5f.png)

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,

```ts
// 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,

```ts
// 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](https://codesandbox.io/s/make-object-property-number-type-values-to-number-literal-type-typescript-1srpr?file=/src/index.ts)

That's all 😃!

### Feel free to share if you found this useful 😃.

---