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

---
  title: How to make object properties string type values to string literal type in TypeScript?
  published: true
  tags: TypeScript
  date: Wed Nov 03 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-object-property-string-type-values-to-string-literal-type-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-3e2d9afd37c6cefc6f8490ddeac7e8dc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-object-property-string-type-values-to-string-literal-type-typescript)
  
To make the object properties `string` type values to `string literals`, we can use the `as` keyword after the property `string` value and then type out the string literal or we can use the `as` keyword after accessing the property then typing out the string literal.

### TL;DR

**METHOD 1**

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

**METHOD 2**

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

// a simple function call
// with "name" property type changed
// from "string" to "John Doe" string literal
sayName(person.name as "John Doe");
```

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 `name` property in the `person` object it shows the type of the `name` property as `string` like in the below image,

![type string shown in the name property on hover](https://melvingeorge.me/_next/static/images/type-string-shown-name-property-7321761d3fd382a365fa843d0546291f.png)

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

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

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

Now if you hover over the `name` property you can see that the type of the `name` property is changed from `string` to `John Doe` string literal which is what we want.

It may look like this,

![type John Doe string literal shown in the name property on hover](https://melvingeorge.me/_next/static/images/type-johndoe-string-literal-shown-name-property-7bbdab8fdec73198fd40a6f3bfd014a0.png)

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

For example, let's assume a function called `sayName`, and on calling the function let's pass the `name` property value like this,

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

// a simple function call
sayName(person.name);
```

Now to change the type of the `name` property from `string` to "John Doe" `string literal` we can use the `as` keyword after the `person.name` and type the string literal like this,

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

// a simple function call
// with "name" property type changed
// from "string" to "John Doe" string literal
sayName(person.name as "John Doe");
```

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-string-values-to-string-literals-in-typescript-qdej0?file=/src/index.ts)

That's all 😃!

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

---