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

Learn the process of typing a property that will be displayed as a dynamic HTML element component

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

Eliminate duplicate dropdown options in Angular 2 using a filter function

Testing the integration of socket.io with Angular through unit tests

Double up on your calls to the subscribe function in Angular to ensure successful login

Troubleshooting ReactJs in Chrome during page load: encountering issues with undefined properties when utilizing the console

Tips for utilizing generated *.d.ts files

Step-by-step guide on developing an AngularJs provider using TypeScript

enhancing the types of parameters in a function declaration without relying on generics

Error encountered in typescript when trying to implement the Material UI theme.palette.type

Using Angular, create mat-checkbox components that are dynamically generated and bound using

disappearing of vue event on single file component HTML element

Using Angular 4 to transfer data from a dynamic modal to a component

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

Tips for integrating an arrow function as a property in a functional programming approach using JavaScript or TypeScript

Find the length of time in Typescript (measured in hours, minutes, and seconds)

What is the process for updating the internal TypeScript version in VS Code?

Utilizing Vue class-style components for creating a recursive component

What is the best way to generate a switch statement based on an enum type that will automatically include a case for each enum member?

Ensure that the hook component has completed updating before providing the value to the form