In this scenario, my goal is to distinguish between different types when declaring a new type:
type Schedule = {
flag_active : boolean,
}
type Channel = {
flag_archived : boolean
}
type CreateChangeLog = {
from : null,
to : Schedule | Channel
}
type DeleteChangeLog = {
from : Schedule | Channel,
to : null
}
type AllChanges = CreateChangeLog | DeleteChangeLog
If I cannot modify the definition of type AllChanges, how can I access the specific Schedule type?
When dealing with a union type like ScheduleOrChannel as shown below:
type AllChanges = CreateChangeLog | DeleteChangeLog
type ScheduleOrChannel = NonNullable<AllChanges["from"]>;
// type ScheduleOrChannel = Schedule | Channel
If you need to filter it to only include members that are of a specific supertype, you can utilize the Extract<T, U> utility type like this:
type JustSchedule = Extract<ScheduleOrChannel, { flag_active: any }>
// type JustSchedule = Schedule
type JustChannel = Extract<ScheduleOrChannel, { flag_archived: any }>
// type JustChannel = Channel
The Extract<T, U> is essentially a distributive conditional type implemented in the following way:
type Extract<T, U> = T extends U ? T : never
This allows you to create your custom union-filtering function based on other criteria, such as utilizing a HasKey utility type:
type HasKey<T, K extends PropertyKey> =
T extends unknown ? K extends keyof T ? T : never : never;
type JustSchedule1 = HasKey<ScheduleOrChannel, "flag_active">
// type JustSchedule1 = Schedule
type JustChannel2 = HasKey<ScheduleOrChannel, "flag_archived">
// type JustChannel2 = Channel
Feel free to experiment and customize your filtering approach using TypeScript!
Hey there, I am currently working with 3 different APIs that require unique auth tokens for authentication. My goal is to set up 3 separate HTTP interceptors, one for each API. While I'm familiar with creating a generic httpInterceptor for the entire ...
I have implemented the setupProxy file as outlined in the documentation: const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( '/address', proxy({ target: 'http ...
Working on my project using Angular and TypeScript includes defining an array that can contain arrays or objects. public arrangedFooterMenu: IMenuItemType[][] | IMenuItemType[] = []; typesOfData.forEach(type => { let filteredData: IMenuItemType | ...
I have encountered an issue with the smooth scrolling feature of gsap causing a delay on my website. This problem is only resolved when I manually go into the browser settings and disable smooth scrolling by navigating to chrome://flags/#smooth-scrolling ...
I'm completely new to Angular and I feel like I might be overlooking something important. Within my component, I have 3 variables which are populated after invoking the .subscribe method on an observable object. For example: this.interRetard = this ...
Encountering the error message Cannot find module '' or its corresponding type declarations. when trying to import modules in a Next.js project. This issue occurs with every single import. View Preview Yarn version: 3.1.0-rc.2 Next version: 1 ...
Currently, I am working on a project where I need to read and write data from a locally stored .xml file that contains multiple <user> tags. The technology stack includes TypeScript and NextJS. The project is divided into three main components sprea ...
Is there a way to get [valueOfTypeOne, ValueOfTypeTwo] instead of (valueOfTypeOne | ValueOfTypeTwo)[] for each resulting element in this scenario? const [valueOfTypeOne, ValueOfTypeTwo] = await Promise.all( [ fetchTypeOne(), fetchTypeTwo( ...
I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the docum ...
As I continue to explore different coding styles in Typescript and Angular, I recently encountered a method without any comments attached to it. It seems like this method is enforcing that the value passed in must be one of the defined options, but strang ...
Currently utilizing TSC Version 2.4.2 Please take note of the following interface: interface CallbackWithNameParameter { cb: (name: string) => void } This code snippet: const aCallback: CallbackWithNameParameter = { cb: () => {} }; Manages t ...
Query I have encountered a TypeScript issue while working on a Next.js project with Supabase as the backend. To handle responses from Supabase queries, I created some helper types, but I'm stuck on resolving this problem. Helper Types Overview: Belo ...
Is there a way to access the methods of an audio tag within my component in order to implement play and pause functions based on click events? The current method I tried does not allow me to access the play() function. How can I correctly approach this? ...
In my TypeScript project set to compile to CommonJS, using export default results in it compiling into exports.default instead of module.exports. I am creating an NPM package and need this issue resolved. How can I fix this? I have the tsconfig.json file ...
Background Information I recently made a workaround for a single type definition in my fork of DefinitelyTyped. This fix is located on a specific branch within my fork. It's important to note that this fix is temporary and should not be merged back ...
Exploring options for improving this code: This is currently how I handle the observable data: this.observable$.pipe(take(1)).subscribe((observableValue) => { this.behaviourSubject$.next(observableValue); }); When I say improve, I mean finding a wa ...
I've been working on writing a unit test case for the material UI multi select component. The code for the parent component is as follows: import {myData} from '../constant'; export const Parent = () => { const onChangeStatus= (sel ...
In my Angular 2 Material application, I have a form that includes a price input: <md-input [(ngModel)]="price" placeholder="Price"> </md-input>{{price|customCurrency}} This input field uses a custom version of the CurrencyPipe which you c ...
There is an object retrieved from a database that consists of a list of names with their corresponding IDs, as well as a flag to indicate whether they are selected or not. Object: let items = [{ ID: 1, Name: 'Item A', Selected: 'Y ...
When using Vue3's defineComponent function, it requires the first generic parameter to be Props. To provide props type using Typescript interface, you can do it like this: export default defineComponent<{ initial?: number }>({ setup(props) { ...