I have a type that is structured like so:
type MyType = {
a: string;
b: string;
c?: number;
d?: string;
}
Instances of this type can take different forms such as:
const myObj1: MyType = { a, b };
const myObj2: MyType = { a, b, c, d };
If an object of type MyType includes property c, then it must also include property d. Is there a way to define this type without needing non-null assertion or checking for both types, other than extending the type into a separate one?
In case you have the permission to modify MyType, a possible solution is to divide the c and d properties into a separate object where they are mandatory, and then switch with an intersection with that particular object.
type XY = {
x: string;
y: string;
};
type MyNewType = XY | XY & {
c: number;
d: string;
}
This methodology ensures that if an instance of MyNewType contains a c property, TypeScript will automatically infer the existence of a corresponding d property as well.
To ensure that property 'd' exists only when 'c' is defined and vice-versa, consider utilizing extended interfaces and overwriting optional properties as 'never'. Here's an example:
type Base = {
x: string;
y: string;
z?: number;
d?: boolean;
}
interface Specific1 extends Base {
z?: never;
d?: never;
}
interface Specific2 extends Base {
z: number;
d: boolean;
}
type CustomType = Specific1 | Specific2;
const obj1: CustomType = { x: 'x', y: 'y' }; 👍
const obj2: CustomType = { x: 'x', y: 'y', z: 10 }; ❌
const obj3: CustomType = { x: 'x', y: 'y', z: 10, d: true }; 👍
This setup guarantees that an object of type CustomType will always have either x, y or x, y, z, d properties.
Check out the playground for more.
Consider this scenario: type TypeMapping = { Boolean: boolean, String: string, Number: number, ArrayOfString: Array<string>, ArrayOfBoolean: Array<boolean> } export interface ElemType { foo: keyof TypeMapping, default: valueof T ...
I'm facing an issue in the playground with my view. When I try to add another option to select, pressing CTRL + space shows me every possible option, including the ones already selected. Is there a way to prevent this behavior? I only want to see the ...
I have successfully created an unzip onFinalize function that unzips any file copied to storage and then deletes the file. However, I am looking for a way to receive a return value from the onFinalize cloud function in my Angular app or somehow listen for ...
Can someone assist me with TypeScript generics? I am wondering how to access the T["value"] field within the ActionAdd interface. type UserValue = { username: string; }; interface User { id: number; value: UserValue; } interface ActionAdd<T = unkn ...
Recently, I began diving into a new project that involves Ionic 2. TypeScript is still fairly new to me, and I've been brainstorming ways to integrate lodash into my project. Have any of you tackled this before and can offer guidance on how to achiev ...
Just starting out in the world of React and attempting to create a custom component with parameters. I'm curious about the correct approach for achieving this. Here's my current code snippet - how do I properly pass Columns, ajax, and datasourc ...
I've been experimenting with various methods to style my elements. Attempted solutions include creating a custom component and passing it to the PortableText element, as well as directly adding the component to the PortableText element. import { cli ...
I'm working on a Node.js project using WebStorm IDE. Here's the structure of my project: The root folder is named "root" and inside are 2 folders: "main" and "typings". The "main" folder has a file called "foo.ts", while the "typings" folder co ...
A specific set of data is being received in my cloud function: let geison=`{ "message" : [{"something":1}, {"is":2} ,{"up":3}, {"today":4}] }` The objective is to extract the keys and values from each item. ...
One of the challenges I'm facing is having a mat-card within a component template: <mat-card *ngFor="let p of products" (click)="viewProduct(p)"> <mat-card-actions> <button mat-stroked-button (click)="addProductToCart(p)"&g ...
I have some data that needs to be displayed and it looks like this: https://drive.google.com/open?id=1Od-QC4xpfXXH4UgKDPkhkB90DQMUDAhV Here is the code snippet: <ion-grid *ngFor="let item of content | sortprogram: 'month'"> <ion-it ...
Currently, I'm attempting to transfer a custom hook used in Vue for handling i18n from JavaScript to TypeScript. However, I am encountering a persistent error message: An element is implicitly assigned the type 'any' due to an expression o ...
Can you retrieve the type of a component (Type<T>) based on a string value? For example: let typeStr: string = 'MyComponent'; let type: any = getTypeFromName(typeStr); // actual type ...
I have noticed that in my angular project, the website becomes horizontally scrollable when I log in. This only happens after logging in, and does not occur beforehand. I'm using angular calendars and Bootstrap for styling. What could be causing this ...
* Tournament Brackets Tree Web Page In the process of developing a responsive tournament brackets tree web page. * Connection Challenge I am facing an issue where I need to connect each bracket, represented by individual divs, with decorative lines linki ...
There are numerous Stack Overflow questions that share a similar title, but it seems none of them address this particular inquiry. I'm in the process of developing a wrapper for an express RequestHandler that can catch errors in asynchronous handlers ...
In my Vuejs application, I have the following script written in Typescript: import { Foo, FooRepository } from "./foo"; import Vue from 'vue'; import Component from 'vue-class-component'; import { Promise } from "bluebird"; @Component ...
As per the definition on Wikipedia, the decorator pattern enables you to enhance an object of a class with additional functionalities, such as: let ball = new BouncyBall(new Ball()) The Ball object is adorned with extra features from the BouncyBall class ...
I am facing a challenge in uploading form data from Angular to Spring Boot server. Basically, in Spring Boot, I define the following classes: data class Photo( val id: Long = 0L, val file: MultipartFile ) data class PostRequest( @field:Size(m ...
I need help finding a solution to count how many times a word appears in sentences. Input: k = 2 keywords = ["anacell", "cetracular", "betacellular"] reviews = [ "Anacell provides the best services in the city", "betacellular has awesome services", ...