Create type from type/object keys and values in TypeScript

Create type from object keys in TypeScript

To create a type from an object’s keys in TypeScript, use the keyof typeof object. For example:

const brand = {
  name: 'Coding Beauty',
  domain: 'codingbeautydev.com',
  color: 'blue',
};

// 👇 type Keys = 'name' | 'domain' | 'color';
type BrandKeys = keyof typeof brand;

With this, you’ll have a type that only accepts strings matching the key name, and your code editor’s intellisense should indicate:

The new type only accepts values matching the object's keys. — The new type only accepts values matching the object’s keys.

Create type from another type’s keys in TypeScript

We use typeof because brand is an instance object, not a type. If it was a type, we would omit typeof:

type Brand = {
  name: string;
  domain: string;
  color: string;
};

// 👇 type Keys = 'name' | 'domain' | 'color';
type BrandKeys = keyof Brand;

As before, you’ll have a type that only contains strings matching the key name, and your code editor should detect this:

The new type only accepts values matching the first type's keys. — The new type only accepts values matching the first type’s keys.

Create type from object values in TypeScript

We can use typeof and type indexing to easily create a type from an object’s values in TypeScript:

const site = {
  url: 'codingbeautydev.com',
  color: 'blue',
  topic: 'coding',
} as const; // 👈 const assertion

// 👇 type Values = 'codingbeautydev.com' | 'color' | 'coding'
type Values = (typeof site)[keyof typeof site];

We this, we’ll have a type that only accepts strings matching the values of the object:

The new type only accepts values matching the object's values. — The new type only accepts values matching the object’s values.

Otherwise, there’ll be a TypeScript error

You can only values matching the object's values to the new type.

Create generic type from object values in TypeScript

The as const is called a const assertion in TypeScript. It tells the compiler to infer the most specific type possible from an expression. Without it, the inferred value type will be a primitive, like string or number or union of these primitives – string | number for example.

const site = {
  url: 'codingbeautydev.com',
  color: 'blue',
  topic: 'coding',
};

// 👇 type Values = 'string'
type Values = (typeof site)[keyof typeof site];

// 👇 No error - `Values` takes any string
const testObj: Values = 'random string';

Values is no different from the string type here, and VS Code confirms it:

The Values type is a string. — The `Values` type is a `string`.

If there are multiple primitive types, the resulting generic type will be a union of all those primitives:

const site = {
  url: 'codingbeautydev.com',
  age: 1000, // 👈 also `number` type now
  topic: 'coding',
};

// 👇 type Values = 'string' | number
type Values = (typeof site)[keyof typeof site];

// 👇 No error
const testObj: Values = 34124;

The Values type is a string | number type. — The `Values` type is a `string | number` type.

Create generic type from another type’s values in TypeScript

You can also create generic types from another type’s values in TypeScript, like this:

type Site = {
  url: 'codingbeautydev.com';
  age: number;
  topic: string;
};

// 👇 type Site = 'string' | 'number'
type Values = Site[keyof Site];

The Values type comes from the Site type's values. — The `Values` type comes from the `Site` type’s values.

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

How to create a type from type or object keys or values in TypeScript

In this article