Create a Type from an object's Keys or Values in TypeScript

# Table of Contents

# Create a Type from an object's Keys in TypeScript

To create a type from an object's keys:

Use the keyof typeof syntax to create a type from the object's keys.
The keyof typeof syntax returns a type that represents all of the object's keys as strings.

index.ts

Copied!
const person = {
  name: 'Bobby Hadz',
  age: 30,
  country: 'Chile',
};

// 👇️ type Keys = "name" | "age" | "country"
type Keys = keyof typeof person;

// 👇️ type Values = string | number
type Values = (typeof person)[Keys];

create type from object keys in typescript

The code for this article is available on GitHub

We used keyof typeof to create a type from an object's keys.

If you need to get a type that represents the keys of another type, you would use keyof MyType.

index.ts

Copied!
type Person = {
  name: string;
  age: number;
  country: string;
};

// 👇️ type Keys = "name" | "age" | "country"
type Keys = keyof Person;

Notice that we didn't use typeof, because Person is a type and not an object.

# Create a Type from an object's Values in TypeScript

To create a type from an object's values:

Use a const assertion when declaring the object.
Use keyof typeof to get a type that represents the object's keys.
Index the object's type at the specific keys to get a type of its values.

index.ts

Copied!
const employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
} as const; // 👈️ use const assertion

// 👇️ type Keys = "id" | "name" | "salary"
type Keys = keyof typeof employee;

// 👇️ type Values = 1 | "Bobby Hadz" | 100
type Values = (typeof employee)[Keys];

create type from object values

The code for this article is available on GitHub

The as const syntax is called a const assertion. We used it to declare an immutable object.

We had to do this because it helps us narrow down the type of the object's values.

index.ts

Copied!
// 👇️ const employee: {
//     readonly id: 1;
//     readonly name: "Bobby Hadz";
//     readonly salary: 100;
// }
const employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
} as const; // 👈️ use const assertion

The values of the object in the example are typed as 1, Bobby Hadz and 100, which is exactly what we need to get a type representing the object's values.

TypeScript is able to be as specific because it knows that the properties are readonly and the values will never change.

# Getting a more generic type of the object's values

Had we not used a const assertion, we would get much more generic types for the object's values.

index.ts

Copied!
const employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

// 👇️ type Keys = "id" | "name" | "salary"
type Keys = keyof typeof employee;

// 👇️ type Values = string | number
type Values = (typeof employee)[Keys];

getting more generic type of object values

The code for this article is available on GitHub

The example doesn't use a const assertion, so the type of the object's values are string | number which is probably not what you need.

We used keyof typeof to get the type of the object's keys.

index.ts

Copied!
const employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
} as const;

// 👇️ type Keys = "id" | "name" | "salary"
type Keys = keyof typeof employee;

// 👇️ type Values = 1 | "Bobby Hadz" | 100
type Values = (typeof employee)[Keys];

The keyof typeof syntax returns a type that represents all of the object's keys as strings.

To get a type of the object's values, we used square brackets and indexed the object using the type of the keys.

You can use this approach to get the type of a value that corresponds to a specific property as well.

index.ts

Copied!
const employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
} as const;

// 👇️ type Keys = "id" | "name" | "salary"
type Keys = keyof typeof employee;

// 👇️ type Values = 1 | "Bobby Hadz" | 100
type Values = (typeof employee)[Keys];

// 👇️ type V1 = 1
type V1 = (typeof employee)['id'];

// 👇️ type V2 = "Bobby Hadz"
type V2 = (typeof employee)['name'];

// 👇️ type V3 = 100
type V3 = (typeof employee)['salary'];

I've also written an article on how to create an object based on an interface.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Create a Type from an object's Keys or Values in TypeScript

# Table of Contents

# Create a Type from an object's Keys in TypeScript

# Create a Type from an object's Values in TypeScript

# Getting a more generic type of the object's values

Borislav Hadzhiev