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

How can I set up Prettier to exclude a line following a specific pattern?

I am currently experiencing a problem with deleting documents in Firebase Firestore using React, Typescript, and Redux. Despite the code running, the document continues to exist in

Resolving search box setup problem in PrimeNG dataView

The Angular Observable continues to show an array instead of a single string value

Currently focused on developing vertical sliders that can be manipulated by dragging them up or down independently

What improvements can I implement in this React Component to enhance its efficiency?

What is the best way to implement a comprehensive switch case in Typescript using string enums that are referencing other string enums?

Discover the process of changing a prop with a button click in NextJS

Constructor not executing when using Object.create

Separate the date format string into tokens

The properties are not found in the type 'Observable<Todo[]>'

Is it possible to pass a different variable during the mouse down event when using Konva for 2D drawing?

What is the best way to add a service to a view component?

Navigating dropdown list items using the keyboard in TypeScript is a breeze

What are the steps to effectively troubleshoot TypeScript code in Visual Studio 2017?

How can Jest be configured to test for the "permission denied" error?

Tips for resolving Typescript type error when overriding MuiContainer classes

Angular: Refresh mat-table with updated data array after applying filter

"Create a separate function for the pipeable operator in RXJS for enhanced code

Updating the DOM after making changes with Maquette involves calling the `renderMaquette