What are the steps to confirm that type Foo is composed of only a limited set of properties from type Bar?

I am looking to create a subset interface, FooAppStateSubset, from the main AppState interface in order to streamline coding against specific properties needed for certain sections of our website. This subset will only contain properties that are populated by controller classes further up in the pipeline.

My requirements:

  1. Ensure that FooAppStateSubset ONLY includes properties and values present in AppState
  2. Do not require FooAppStateSubset to list non-optional parameters from AppState
  3. Error at compile and build time if rules 1 and 2 are violated
  4. Autocomplete for properties would be a nice-to-have feature
  5. Ability to define models throughout the site without having to implement them all in the master AppState interface

MODELS: 

interface AppState {
  email: string;
  userId: number;
  firstName?: string;
  isAwesome: boolean;
}


interface/type FooAppStateSubset {
  isAwesome: boolean;
  firstName?: string;
}
typescriptinterface

Answer №1

If you only have a few properties, the easiest approach would be:

type BarAppStateSubset = Omit<Omit<AppState, 'phone'>, 'address'>

Alternatively, consider using a typeguard:

function isBarSubset(something: AppState | BarAppStateSubset): something is BarAppStateSubset {
  return !('phone' in something || 'address' in something);
}

const bar = { isCool: true };
isBarSubset(bar) && console.log(bar.phone); // error!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Android Async, Interfaces, and the onComplete() method to manage responses within the graphical user interface

As I have a utility class running an asynchronous task using HTTP, I have set up an interface for processing the results. By implementing this interface, I can easily pass 'this' from anywhere to call the standard onComplete() method when the res ...

javaandroidasynchronousinterface

A TypeScript class that is a concrete implementation of a generic type

When handling a login operation, I receive an HTTP response like this: interface ILoginResponse { // ok message: string token: string; } This response structure is part of a generic response format that I intend to use for all my HTTP responses: i ...

typescript

Steps for utilizing an `<a>` link tag to submit a form in Angular 4

Is there a way to retrieve the selected option in this form from the other side when clicking a link? <form (ngSubmit)="onSubmit(x)"> <input type="radio" id="radioset3" name="radioset" [checked]="x==0"> <input type="radio" id="radio ...

htmlangulartypescript

Creating non-changing identifiers with ever-changing values in Angular by leveraging TypeScript?

I need to transform all the labels in my application into label constants. Some parts of the HTML contain dynamic content, such as This label has '1' dynamic values, where the '1' can vary based on the component or a different applicat ...

angulartypescript

Exploring NextJS with Typescript

Struggling to incorporate Typescript with NextJS has been a challenge, especially when it comes to destructured parameters in getInitialProps and defining the type of page functions. Take for example my _app.tsx: import { ThemeProvider } from 'styled ...

javascriptreactjstypescriptnext.js

Troubles encountered while fetching URL parameters in Angular 2

Currently in the process of setting up a confirmation email system for my Angular 2 application with a .NET Core 2 backend. The flow goes like this: user registers -> an email is sent to confirm their account -> they click the link -> they should ...

angulartypescriptquery-string

Transforming "larger" items into "smaller" items using Typescript

I am experiencing challenges when trying to assign larger objects into smaller ones. To illustrate this issue, I will provide a simple example: Let's say I have defined the Typescript interface: export interface CrewMember { name: string; orga ...

typescript

What causes error TS2339 to occur: The property 'classList' is not found on type 'never'

Currently, I am working on creating a basic component called "BackToTop" const BackToTop: React.FC = () => { const bttEl = useRef(null); function scrollHandler(): void { var bttHtmlEl: HTMLElement | null = bttEl.current; if (bttH ...

reactjstypescript

Tips for improving the slow compilation of the Next.js 14 development environment

Currently, I am tackling an issue with my Typescript - Next.js 14 Application where the compilation process in the development environment is taking excessive time, sometimes up to 60 seconds. What steps can be taken to resolve this problem and optimize t ...

reactjstypescriptperformancenext.js

The issue with Angular version 15 p-dialogue not displaying HTML content when using a component selector

In my Angular application, I have an issue with rendering a component called urc.component from a different module (variance.module) inside another module (nursing-audit.module). The p-dialogue is opening and displaying the header correctly, but the urc.co ...

htmlangulartypescriptprimeng

Filtering arrays of objects dynamically using Typescript

I am looking to create a dynamic filter for an array of objects where I can search every key's value without specifying the key itself. The goal is to return the matched objects, similar to how the angular material table filters all columns. [ { ...

javascriptangulartypescriptrxjs

What are some alternatives for integrating React production build files apart from utilizing Express?

Is there a way to integrate React into my library using the HTTP module? I'm trying to figure out how to recursively send static files. Specifically, I want to include the build folder from the React production build, but I'm not sure how to go a ...

javascriptnode.jsreactjstypescript

The error message "The file 'environment.ts' is not located within the specified 'rootDir' directory" was encountered during the Angular Library build process

When attempting to access the environment variable in an Angular 9 library, I encountered an error during the library build process. Here is how it was implemented: import { EnvironmentViewModel } from 'projects/falcon-core/src/lib/view-models/envir ...

angulartypescriptangular-moduleangular-library

Guide to setting up Chrome debugger to display exclusively TypeScript files in the call stack pane?

I am familiar with debugging TypeScript projects using Chrome, but it would greatly streamline the process if the call stack window displayed only TypeScript files instead of JavaScript files. Is there a way to make this happen? If so, how can I achieve t ...

typescriptgoogle-chromedebugginggoogle-chrome-devtools

Jest confirms the object's function type is accurate

Recently, I've been working on this method: export function getTableConfig(priceEntity: any) { const columns: any = { columns: [] }; const keys: Array<string> = Object.keys(priceEntity); keys.forEach((key: string) => { columns.colu ...

reactjstypescriptjestjs

What is the best way to display data from an array using ng-container in Angular 2?

My goal is to display data from an array in an HTML table using the Section model provided below: export class Section { public id :number; public name: string; constructor(id: number, theName: string) { this.id = id; this.name ...

javascriptarraysangulartypescriptangular2-template

Enhancing Your React Code with Prettier, ESLint, and React

Encountering conflicting rules on TS / React imports as a beginner, while using Eslint / Prettier. I'm getting an error stating 'React' is declared but its value is never read.. However, when I remove it, another error saying 'React&apo ...

reactjstypescripteslintprettier

Allowing for the acceptance of empty arguments when creating instances of a class in Typescript constructors

Here is my Typescript implementation of the User class: class User { private name: string; private managerOf: User; constructor(name: string, managerOf: User) { this.name = name; this.managerOf = managerOf; } getName(): string { ret ...

typescript

Display or Conceal Multiple Divisions Using Angular 2

I am looking to implement a functionality using Li lists to toggle the visibility of multiple divs in Angular 2. Initially, all divs on the page will be visible. When viewing on a smaller screen, I want to hide some divs and show a specific div when a cor ...

htmlangulartypescript

The argument labeled as 'readonly...' cannot be assigned to a parameter labeled as '...[]' in this context

There's a question that resembles mine but addresses a different issue, which can be seen here: Argument of type '...' is not assignable to parameter of type '...' TS 2345 utils.ts (https://www.typescriptlang.org/docs/handbook/2/g ...

arraystypescript