Can a type like this be translated:
export type UnionType = {
element:
| { $case: 'a'; a: number }
| { $case: 'b'; b: string }
| { $case: 'c'; c: boolean };
};
into a type of this kind:
type OneOfConverter<T> = any; // TODO
type ObjectType = OneOfConverter<UnionType>;
// type ObjectType = {
// a: number;
// b: string;
// c: boolean;
// };
Here's a suggestion that might be helpful:
type OneOfConverter<T extends { element: { $case: PropertyKey } }> = {
[U in T["element"] as U["$case"]]: U["$case"] extends keyof U ? U[U["$case"]] : never
}
This code snippet utilizes key remapping in mapped types to go through the union members of T['element'] and assign each member to a type parameter U. The key we are interested in is U["$case"].
We want to access the value within U using this key, so we do U[U["$case"]]. However, to handle cases where the property may not exist, we perform a conditional type check
U["$case"] extends keyof UU. If it does, we fetch the property value as U[U["$case"]]; otherwise, we return never.
Let's test it out:
type ObjectType = OneOfConverter<UnionType>;
// type ObjectType = {
// a: number;
// b: string;
// c: boolean;
// };
Seems to be working fine!
Working with VSCode+TypeScript+NodeJS can feel overly complex compared to a C# project in Visual Studio. Just hitting F5 in C# compiles the project and initiates debugging. How can I configure VSCode to do the same for TypeScript+NodeJS? What am I missing ...
I am looking to integrate ngx-socket-io into my Angular application. I utilize Bazel for running my Angular dev-server. Unfortunately, it seems that ngx-socket-io does not function properly with the ts_devserver by default. Upon checking the browser consol ...
Utilizing Nest + Cognito for user authentication in an application, I have a method within my Authentication service that requires testing/mocking: async cognitoRegister(userPool: CognitoUserPool, { name, password, email }: AuthRegisterInput): ...
I've encountered an issue with sending the value of a select input to my database while working with Vue, Quasar, and TypeScript. Within a modal, I have name and age inputs along with a select that chooses a category. However, when attempting to send ...
Recently, I managed to set up a datatable with the functionalities of both Lazy loading and global filter. Utilizing PrimeNG components for this implementation was a breeze. However, an issue surfaced where the global filter ceased to function when lazy lo ...
I have been working on an angular application where I have implemented JSON conversion functionalities such as JSON.stringify and JSON.parse. However, I encountered an error stating 'Cannot find name 'JSON''. Furthermore, there is anoth ...
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { EventDetail } from '../../models/event-detail/event-detail.interface'; import { AngularFireDatabase, Angu ...
Despite my efforts to find a solution, my understanding of Dependency Injection in services is still limited, making it challenging to get this thing working. I'm left wondering if there's any way to make it work at all. My current setup involve ...
I'm currently working on a function that gets activated by a mouse click, but there's a 10-second cooldown period using setTimeout() before it can be triggered again. However, after the timeout, my variable doesn't get set to the correct boo ...
My goal is to extract a specific value from a two-level deep object data structure. To begin, I am storing the data in a variable within a function, like so: getTargetId() { if (this.authenticationService.isAuthenticated()) { const userInfo = ...
In my observation, I have noticed that in several instances, manual models are being created for components to specifically manage the data. Despite this, the component already contains a ts class along with the html and css data. Shouldn't the task ...
When I receive the data as a string[] https://i.sstatic.net/ttyag.png However, when I attempt to loop over it subUrl(arr) { for(let i of arr) { console.log(i); } } No output is being logged. What could be causing this issue? ...
I am currently working on a website where I want to display dynamic feedback as cards. However, my fetchData variable within the Home function is always returning undefined. Here's the code snippet I have tried: import UserCard from "../component ...
I am currently utilizing graphCMS in combination with NextJS and have successfully implemented fetching data. However, I am facing an issue where I need to execute 2 queries on the homepage of my website - one for all posts and another for recent posts. q ...
Our current project is transitioning from AngularJS to Angular 4, and as part of this process, we are first rewriting everything in TypeScript and converting AngularJS components. To facilitate this transition, we have set up a new project using AngularJS ...
I am currently working on developing a filter set, and I am facing an issue with the salesChannels array content in my view. The array only gets populated after clicking a button that triggers the test() function. Interestingly, the first time I log the ar ...
As we continue to develop our application, we are creating various pages and need to navigate between them. Our current framework is Next.js. The issue we are facing involves the Home page: when transitioning from the Home page to another page (such as pa ...
I need assistance in creating a function that can update an object's value based on the provided key and new value while ensuring type safety. type GroceryStore = { isOpen: boolean; offers: string[]; name: string; }; const myGroceryStore: ...
In Vue, it always renders the last registered component and ignores any others, even if they are not used at all. //main.ts import Vue from 'vue'; Vue.component('component-one', require('./components/ComponentOne.vue')); ...
I am facing an issue with adding "CubeView" from elmarquez/threejs-viewcube to my project. I have created a component and the code for the component is as follows: import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; ...