Developing a user interface that filters out a specific key while allowing all other variable keys to be of the identical type

Question

Developing a user interface that filters out a specific key while allowing all other variable keys to be of the identical type

As I dive deeper into the TypeScript type system, I find myself grappling with an interface design query. Can anyone lend a hand?

My goal is to craft an interface in TypeScript where certain object keys are of a generic type and all other keys should be of a consistent type. Despite my attempts with conditional types and union types containing 'never', I haven't been able to crack the code on this.

type Command = () => void;
type ViewState = {[key: string]: any};

export interface ViewModel<T extends ViewState> {
  viewState: T;
  // The following line is what does not work
  [key: Omit<string, 'viewState']: Command;
}

// Here's the desired outcome,
interface LabelState {
  label: string;
}

interface LabelModel<LabelState> {
  viewState: LabelState;
  updateLabel: Command;
}

interface MenuState {
  menuItems: string[];
}

interface MenuModel<MenuState> {
  viewState: MenuState;
  openMenu: Command;
  closeMenu: Command;
};

I realize this may not be essential, but it would be satisfying to have all methods defined as a Command. It seems like it should be doable. Is there someone out there who can confirm whether or not this is achievable? And if so, what am I overlooking?

typescript types interface

Answer 1

Answer №1

If you're looking for a different approach, consider the following strategy:

type ViewModel<T> = {
  [K in "viewState" | keyof T]: K extends "viewState" ? ViewState : Command
};

The concept of the ViewModel type being generic lies not in the state's type, but rather in how ViewModel itself is extended. To illustrate this further, let's take a look at some examples:

interface LabelModel<S> extends ViewModel<LabelModel<S>> {
  viewState: S;
  updateLabel: Command;
}

interface MenuModel<S> extends ViewModel<MenuModel<S>> {
  viewState: S;
  openMenu: Command;
  closeMenu: Command;
}

These are similar to your existing LabelModel and MenuModel types, but by using extends ViewModel<...>, it enforces the restriction that you mentioned. This kind of construction, like F-bounded polymorphism, allows an interface to reference its own type. TypeScript offers a feature known as "polymorphic this" for achieving this without an extra type parameter, although it may not work within mapped types as shown here.

In essence, ViewModel<T> transforms a type T into a new type where all properties except those with keys "viewState" have a value type of Command, along with a property "viewState" of type ViewState. By declaring

interface X extends ViewModel<X>

, we specify that X must be compatible with an object with only "viewState" as a non-Command property.

To see what occurs upon violating this constraint:

interface BadModel extends ViewModel<BadModel> { // error!
  viewState: ViewState,
  notACommand: string
} // Type 'string' is not assignable to type 'Command'.

As demonstrated, the constraint is indeed enforced. I trust this information satisfies your requirements or offers fresh insights. Best of luck!

Link to code

Answer 2

If you're looking for a different approach, consider the following strategy:

type ViewModel<T> = {
  [K in "viewState" | keyof T]: K extends "viewState" ? ViewState : Command
};

The concept of the ViewModel type being generic lies not in the state's type, but rather in how ViewModel itself is extended. To illustrate this further, let's take a look at some examples:

interface LabelModel<S> extends ViewModel<LabelModel<S>> {
  viewState: S;
  updateLabel: Command;
}

interface MenuModel<S> extends ViewModel<MenuModel<S>> {
  viewState: S;
  openMenu: Command;
  closeMenu: Command;
}

These are similar to your existing LabelModel and MenuModel types, but by using extends ViewModel<...>, it enforces the restriction that you mentioned. This kind of construction, like F-bounded polymorphism, allows an interface to reference its own type. TypeScript offers a feature known as "polymorphic this" for achieving this without an extra type parameter, although it may not work within mapped types as shown here.

In essence, ViewModel<T> transforms a type T into a new type where all properties except those with keys "viewState" have a value type of Command, along with a property "viewState" of type ViewState. By declaring

interface X extends ViewModel<X>

, we specify that X must be compatible with an object with only "viewState" as a non-Command property.

To see what occurs upon violating this constraint:

interface BadModel extends ViewModel<BadModel> { // error!
  viewState: ViewState,
  notACommand: string
} // Type 'string' is not assignable to type 'Command'.

As demonstrated, the constraint is indeed enforced. I trust this information satisfies your requirements or offers fresh insights. Best of luck!

Link to code

Developing a user interface that filters out a specific key while allowing all other variable keys to be of the identical type

Answer №1

Similar questions

Ensuring consistency between TypeScript .d.ts and .js files

Problem with loading image from local path in Angular 7

Clear the input field once an item has been successfully added to the array

Toggle the visibility of a modal in code across various components in an Angular 4 project using Typescript

Struggling to dynamically update array values by comparing two arrays

Contrasting `Function` with `(...args: any[]) => any`

The functionality of Angular 5 reactive form valueChanges is not functioning correctly

Using Angular 5 to access a variable within a component while iterating through a loop

Using Typescript with Vue.js: Defining string array type for @Prop

Customizing a generic method in typescript

Contrasting the utilization of `typeof` with a constant and `enum` in TypeScript

"Unearthing a skeleton within the client component while the server action unfolds in next

Utilizing the URL path name for data retrieval in Next.js 14 - A step-by-step guide

Function arity-based type guard

The 'ref' attribute is not found within the 'IntrinsicAttributes' type

Directly mapping packages to Typescript source code in the package.json files of a monorepo

Angular TimeTracker for tracking time spent on tasks

Issues arise with Typescript Intellisense in Visual Studio Code causing it to stop functioning

How can you utilize a JavaScript library that provides global variables in Typescript?

Guide on creating a Typescript function with a strongly typed argument