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: 'wp.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: 'wp.codingbeautydev.com',
  color: 'blue',
  topic: 'coding',
} as const; // 👈 const assertion

// 👇 type Values = 'wp.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: 'wp.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: 'wp.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: 'wp.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.

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

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

In this article