Can Typescript's Conditional Types be used to determine if an interface includes a required field?
type AllRequired = { a: string; b: string }
type PartiallyRequired = { a: string; b?: string }
type Optional = { a?: string; b?: string }
// Can we modify this to make the following code work?
type HasRequiredField<T> = T extends {} ? true : false
type A = HasRequiredField<AllRequired> // true
type B = HasRequiredField<PartiallyRequired> // true
type C = HasRequiredField<Optional> // false
Absolutely, it is possible to determine if certain properties are optional. While it may become a bit tricky when dealing with index signatures, in this case, we can overlook them as your types do not include them.
Here is a way to specifically extract the keys of the non-optional properties from an object type:
type RequiredKeys<T> = { [K in keyof T]-?:
({} extends { [P in K]: T[K] } ? never : K)
}[keyof T]
Afterwards, you can easily verify if the object contains any of these keys or not (if RequiredKeys<T> results in never, then it does not have any required fields):
type HasRequiredField<T> = RequiredKeys<T> extends never ? false : true
By implementing this, you will achieve the desired outcome:
type A = HasRequiredField<AllRequired> // true
type B = HasRequiredField<PartiallyRequired> // true
type C = HasRequiredField<Optional> // false
I hope this explanation proves beneficial to you. Best of luck!
Discovered a more straightforward approach that is functional in TypeScript version 3.8.3 and above.
// check if Partial<T> extends T, indicating that none of the fields are required.
type HasRequiredFields<T> = Partial<T> extends T ? false : true
Here are some example scenarios
type Info<TInfo> = Partial<TInfo> extends TInfo
? { info?: TInfo }
: { info: TInfo };
type A = { type: 'A' } & Info<{ abc?: string }>
type B = { type: 'B' } & Info<{ abc: string }>
// Valid
let a1: A = { type: 'A' };
// Valid
let a2: A = { type: 'A', info: {} };
// Valid
let a3: A = { type: 'A', info: { abc: 'hello' } };
// Invalid
let a4: A = { type: 'A', info: { abc: 3 } };
// Invalid
let b1: B = { type: 'B' }
// Invalid
let b2: B = { type: 'B', info: {} };
// Valid
let b3: B = { type: 'B', info: { abc: 'Hello' } };
// Invalid
let b4: B = { type: 'B', info: { abc: 5 } };
I need help filling a form value by id. This function successfully retrieves the value: fillFormValues(expenseCategory: ExpenseCategory): void { console.log('response', expenseCategory.parent_category) this.aa= expenseCategory.parent_c ...
Looking for help with implementing infinite scroll in a list? I am using the ion-infinite-scroll directive but struggling to push string values into my list. The list contains names of students in a classroom. Can anyone provide guidance on how to push str ...
I have two Objects that are structured as follows: export const recipes: Recipe[] = [ new Recipe( id: "Green", scenario: ["1", "2"]), new Recipe( id: "Blue", scenario: ["1", "2","2"]) ]; export const scenarios: Scenario[] = [ new Scenario( id: "1 ...
This is my "app.routing.ts": import {provideRouter, RouterConfig} from "@angular/router"; import {DashboardComponent} from "./dashboard.component"; import {HeroesComponent} from "./heroes.component"; import {HeroDetailsComponent} from "./hero-details.com ...
I am currently encountering an issue with my setup using Angular 2 - RC5 and router 3.0.0 RC1. Despite searching for a solution, I have not been able to find one that resolves the problem. Within my component structure, I have a "BasicContentComponent" whi ...
Check out this demo This is a simple React application built with Typescript. Currently, I am experimenting with React's Context API. I have set up a context named ThemeContext which holds basic theme styling values to be used across different comp ...
Is there a way to automatically update an axios instance with the latest token received in a response, without making a second request? The new token can be included in any response after any request, and I want to make sure that the last received token ...
A discrepancy was encountered in React when attempting to render different components Warning: React has detected a change in the order of Hooks called by GenericDialog. This can result in bugs and errors if left unresolved. Previous render Next ren ...
Recently, I have made the switch from using Javascript to TypeScript. However, I am facing an issue while trying to delete data from a table in my code. Whenever I attempt to delete data, I encounter this error message: Property 'id' does not e ...
I am currently working on a TypeScript-based React application. To start off, I used the following command to create my React app with TypeScript template: npx create-react-app test-app --template typescript It's worth noting that eslint comes pre-co ...
Consider this scenario: SomeItem represents the model for an object (which could be modeled as an interface in Typescript or as an imaginary item with the form of SomeItem in untyped land). Let's say we have a Set: mySet = new Set([{item: SomeItem, s ...
I am currently working on implementing a "Clear" button for a select element that will reset the value to its default state. Here is a snippet of my code: const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => { onChange( ...
Using the HostListener directive, I am listening for the click event on elements of the DOM. @HostListener('click', ['$event.target']) onClick(e) { console.log("event", e) } Upon clicking a button tag, the "e" object contains the fol ...
I am currently using fs in JavaScript to read through a changelog.MD file. Here is the code snippet: const readFile = async (fileName: string) => { return promisify(fs.readFile)(filePath, 'utf8'); } Now I am reading my .md file with this fu ...
Understanding Observables can be a bit tricky for me at times, leading to some confusion. Let's say we are subscribing to getData in order to retrieve JSON data asynchronously: this.getData(id) .subscribe(res => { console.log(data.ite ...
Within this excerpt, I've encountered the following error: Type 'string | null' cannot be assigned to type 'string'. Type 'null' cannot be assigned to type 'string'. TS2322 async function FetchSpecificCoinBy ...
After following the instructions in this guide for setting up VS2015, I encountered issues when trying to run the "quick start" project or the "tour of heroes" tutorial on Google Chrome. The error message I received can be found here: Angular_QuickStart_Er ...
I've set up a TextField where users can only input positive digits. Currently, I'm using the following onKeyDown event: <TextField label={distanceError} error={!!distanceError} defaultValue={kpoints.distance} on ...
I'm facing an issue with my Angular project. I have 4 select boxes that allow users to apply different filters: office worker project name employee activities The problem I'm encountering is the difficulty in predicting all possible combination ...
How can I add a button or link that will instantly download my PDF portfolio when clicked? I am currently working on my resume section and would like to provide users with the option to easily download my CV. Is there a way to do this, and if so, how can ...