Starting with the given Union type:
type Union =
{ type: 'A', a: string } |
{ type: 'B', b: number }
The end goal is to transform it into this MappedUnion type:
type MappedUnion = {
A: { type: 'A', a: string }
B: { type: 'B', b: number }
}
Here's a snippet of pseudo code to achieve that:
type MappedUnion<item in Union> = {[ i: item['type'] ]: item}
One potential solution could be as follows. While not extensively tested, it appears to be functional.
type Union =
{ type: 'A', a: string } |
{ type: 'B', b: number }
type MappedUnion = {[P in Union['type']]: Union & {type: P}};
const v: MappedUnion = {
'A': {type: 'A', a: "hello"},
'B': {type: 'B', b: 3},
}
Unfortunately, this approach falls short; for example:
type MappedUnionTarget = {
A: { type: 'A', a: string }
B: { type: 'B', b: number }
}
function cvt1(x: MappedUnion): MappedUnionTarget {
return x;
}
The resulting error message states
Type '({ type: "A"; a: string; } & { type: "A"; }) | ({ type: "B"; b: number; } & { type: "A"; })' is not assignable to type '{ type: "A"; a: string; }'({ type: "B"; b: number; } & { type: "A"; })never.
If you're open to utilizing Typescript 2.8 (not yet officially released, but obtainable through a git pull from the TypeScript repository), which introduces support for the conditional operator ? : at the type level, consider the following workaround:
type FilterType<T, K> = (T extends { type: K } ? T : never);
type MappedUnion = {[P in Union['type']]: FilterType<Union, P>};
This modified implementation of FilterType<T, K> aims to replicate the behavior initially anticipated with T & {type: K}.
I am using a subscription for Observable, and when it finishes I need it to call a function from this class. The issue is that the "this" keyword refers to the subscription and not to the class scope. Here is the code snippet: export class GoogleMapCompo ...
Having just updated to version 3.2.0, I am encountering numerous issues, such as the malfunctioning of the ionic serve command. ...
I'm currently working on implementing a custom form validation for my React project using Typescript. However, I've encountered an issue with the useState hook not updating the state containing errors immediately upon form submission. Let me illu ...
I'm working with code that looks like this: type Boxed<T> = { inner: T } const box = <T>(inner: T): Boxed<T> => ({ inner }); function test<T extends Boxed<any>>(...args: T[]): T extends Boxed<infer I> ? I : ne ...
I am envisioning a horizontal bar with items that are all the same width and evenly spaced apart. They can expand vertically as needed. Check out the updated version here on StackBlitz https://i.sstatic.net/MFfXd.png Issue: I am struggling to automatica ...
Setting up my NextJS project with styled components and Typescript has been my current focus. After consulting the official NextJS documentation, I successfully configured the _document.tsx file, which appears like this: import Document, { DocumentContext ...
I am attempting to fetch images from the woocommerce API and here is the code I am using: this.config.getWithUrl(this.config.url + '/api/appsettings/get_all_banners/?insecure=cool') .then((data: any) => { this.banners = data.data; consol ...
When I utilize MobX to call an observable within my React component, something peculiar happens. Upon console logging the observable, initially it appears as an Object. However, upon clicking on it, the object transforms into an Array for that one particul ...
I am currently working on a project using Vue. Following the guidelines of eslint, I am restricted from naming props in camel case. If I try to do so, it triggers a warning saying Attribute ':clientId' must be hyphenated. eslint vue/attribute-hyp ...
When updating TypeScript code to ES6 (which runs in the browser and Node server, with a goal of tree-shaking the browser bundle), I am attempting to replace all instances of require with import. However, I encountered an issue... import * as request from ...
I have successfully created a grid with a button that enables me to control a timer. When I click on the start button in the grid on the home page, the timer begins counting the time. By using a service, I am able to determine whether the timer is active ...
My TypeScript Next.js project contains a large number of images in the public folder. I am wondering if there is a way to verify the existence of an image before utilizing the <Image /> component from next/image. I have managed to achieve this using ...
Utilizing the dynamic form pattern in Angular has been incredibly helpful for our team. By defining our controls in ngOnInit, the form is dynamically constructed based on our needs. However, we've encountered a challenge with forms that require initia ...
I am new to TypeScript and have encountered many similar questions. I was able to find a solution, but I'm not sure if it's the most efficient one. When constructing the target object as {obj: someObject, prop: "objectPropName"}, I pas ...
I have previously posted this issue on the Auth0 Community Help Forum, but I am yet to receive a response despite posting it 2 weeks ago. Here is the link to my original post: Currently, my setup includes angular/cli 15.1.1 and auth0/auth0-angular 2.0.1. ...
I am currently running Next JS API tests using jest with a custom testClient. The code for the testClient is as follows: import { createServer } from 'http'; import type { NextApiHandler } from 'next'; import type { __ApiPreviewProps } ...
I'm looking to implement a music player within my next.js application. How can I ensure that the currently playing track doesn't stop when switching between pages? Essentially, I want the music playback to continue seamlessly as users navigate th ...
Is there a more efficient way to structure the className attribute when utilizing tailwind css? Which of the examples provided would have the least impact on performance? If I were to use an array for the classes and then join them together as shown in e ...
Looking for an answer from the community on Typescript, require either of two function signatures In my code, I am handling a callback where I need to either pass an error or leave the first argument as undefined and pass data as the second argument. To ...
I am currently attempting to enhance my Angular App by using a button to transfer information to a form upon clicking, rather than the traditional radio buttons or select dropdowns. My objective is to incorporate HTML content into the button (such as Mat-I ...