Create a custom data type that consists of a specific set of keys from an object

Question

Create a custom data type that consists of a specific set of keys from an object

Is there a way to create a type in TypeScript that includes only a subset of keys from an object? Consider the example object below:

const something = {
  cannary: "yellow",
  coyote: "brown",
  fox: "red",
  roses: "white",
  tulipan: "purple",
  palmera: "green"
}

If I define a type like this:

type Something = keyof typeof something

Autocomplete and type checking will work for all keys, but what if I want to restrict it to only certain keys like:

type Animal = keyof typeof {only cannary|coyote|fox}

Is this possible to achieve in TypeScript?

typescript

Answer 1

Answer №1

The Extract<T, U> type built into the system is a great option for this situation. It will...

Pull out the types from T that can be assigned to U

However, in your specific scenario, this still permits

Extract<keyof typeof something, 'cannary' | 'coyote' | 'monkey'>

to go through, even though 'monkey' is not present in T.

A slight adjustment to the Extract<T, U> type from:

type Extract<T, U> = T extends U ? T : never;

to

type ExtractExact<T, U extends T> = T extends U ? T : never;

requires the user to specify a type for U that must be an extension of T.

Now:

type CausesTypeError = ExtractExact<keyof typeof something, 'cannary' | 'coyote' | 'monkey'>

would immediately point out any unintended issues in the IDE:

https://i.stack.imgur.com/kPy5o.png

Playground Link

Answer 2

The Extract<T, U> type built into the system is a great option for this situation. It will...

Pull out the types from T that can be assigned to U

However, in your specific scenario, this still permits

Extract<keyof typeof something, 'cannary' | 'coyote' | 'monkey'>

to go through, even though 'monkey' is not present in T.

A slight adjustment to the Extract<T, U> type from:

type Extract<T, U> = T extends U ? T : never;

to

type ExtractExact<T, U extends T> = T extends U ? T : never;

requires the user to specify a type for U that must be an extension of T.

Now:

type CausesTypeError = ExtractExact<keyof typeof something, 'cannary' | 'coyote' | 'monkey'>

would immediately point out any unintended issues in the IDE:

https://i.stack.imgur.com/kPy5o.png

Playground Link

Answer 3

Answer №2

According to @spender, the Extract function is designed to retrieve specific members from a set and can be utilized to fulfill your requirements.

An alternative option is to utilize the Pick method.

type AnimalsPicked = keyof Pick<typeof something, 'cannary' | 'coyote' | 'monkey'>
type AnimalsExtracted = Extract<keyof typeof something, 'cannary' | 'coyote' | 'monkey'>

The outcome remains the same.

If you require the object type in between:

type AnimalsObj = Pick<typeof something, 'cannary' | 'coyote' | 'monkey'>

Given that the broader issue you are attempting to address has not been provided, the following suggestions may or may not be relevant.

const something = {
  cannary: "yellow",
  coyote: "brown",
  fox: "red",
  roses: "white",
  tulipan: "purple",
  palmera: "green"
} as const;
const animals = (()=>{
   const {cannary,coyote,fox} = something;
   return {cannary,coyote,fox};
})();
// The UI displays:
// const animals: {
//   cannary: "yellow";
//   coyote: "brown";
//   fox: "red";
// }

Visit the playground for a demo.

Answer 4

According to @spender, the Extract function is designed to retrieve specific members from a set and can be utilized to fulfill your requirements.

An alternative option is to utilize the Pick method.

type AnimalsPicked = keyof Pick<typeof something, 'cannary' | 'coyote' | 'monkey'>
type AnimalsExtracted = Extract<keyof typeof something, 'cannary' | 'coyote' | 'monkey'>

The outcome remains the same.

If you require the object type in between:

type AnimalsObj = Pick<typeof something, 'cannary' | 'coyote' | 'monkey'>

Given that the broader issue you are attempting to address has not been provided, the following suggestions may or may not be relevant.

const something = {
  cannary: "yellow",
  coyote: "brown",
  fox: "red",
  roses: "white",
  tulipan: "purple",
  palmera: "green"
} as const;
const animals = (()=>{
   const {cannary,coyote,fox} = something;
   return {cannary,coyote,fox};
})();
// The UI displays:
// const animals: {
//   cannary: "yellow";
//   coyote: "brown";
//   fox: "red";
// }

Visit the playground for a demo.

Answer 5

Answer №3

You should consider utilizing the Pick<T> utility type

https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys

const items = {
  apple: 'red',
  banana: 'yellow',
  grape: 'purple',
  kiwi: 'green',
};

// type ItemsType = "apple" | "banana" | "grape" | "kiwi"
type ItemsType = keyof typeof items;

// type Fruits = "apple" | "banana" | "grape"
type Fruits = keyof Pick<typeof items, 'apple' | 'banana' | 'grape'>;

Answer 6

You should consider utilizing the Pick<T> utility type

https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys

const items = {
  apple: 'red',
  banana: 'yellow',
  grape: 'purple',
  kiwi: 'green',
};

// type ItemsType = "apple" | "banana" | "grape" | "kiwi"
type ItemsType = keyof typeof items;

// type Fruits = "apple" | "banana" | "grape"
type Fruits = keyof Pick<typeof items, 'apple' | 'banana' | 'grape'>;

Create a custom data type that consists of a specific set of keys from an object

Answer №1

Answer №2

Answer №3

Similar questions

Angular offers pre-determined values that cannot be altered, known as "

The utility of commander.js demonstrated in a straightforward example: utilizing a single file argument

Search through an array of objects and assign a new value

Encountering a compilation error while trying to utilize a union type in a function parameter within an

One can only iterate through the type 'HTMLCollection' by utilizing the '--downlevelIteration' flag or setting a '--target' of 'es2015' or above

What is the reason TypeScript does not display an error when assigning a primitive string to an object String?

Show the values in the second dropdown menu according to the selection made in the first dropdown menu using Angular 8

Error: Unable to Locate Module (Typescript with baseUrl Configuration)

What is the process for setting up a subrouter using React Router v6?

Enhanced Autocomplete Feature with Select All Option in MUI

What is the best way to conduct tests on Typescript modules that are not intended for

The predicament with arranging arrays

Unable to create resource in nestjs due to typeScript compatibility issue

Trigger a class method in an event using Angular with Typescript

Custom Email Template for Inviting Msgraph Users

Issues arise when attempting to include the src attribute within the template tag in a Vuejs and Laravel project

Is there a way to insert a secured page right before accessing the dashboard?

The setter of the computed property is failing to execute

Unable to load class; unsure of origin for class labeled as 'cached'

The function's overloading is not compatible with its implementation