Expanding the capabilities of a union type through an extended interface

Imagine having this interface defined:

interface ModalProps {
    onClose: (event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
}

Now, if you need to introduce an extra reason:

interface CustomModalProps {
    onClose: (event: {}, reason: 'backdropClick' | 'escapeKeyDown' | 'cancelClick'): void;
}

Is there a way to reference the onClose reason from ModalProps in CustomModalProps, avoiding redundancy?

interface CustomModalProps extends ModalProps {
  onClose: (event: {}, reason: ??? &| 'cancelClick'): void
}

Answer №1

We are talking about different types here.

type ModalReason = 'backdropClick' | 'escapeKeyDown';

type CustomModaReason = ModalReason | 'cancelClick';

interface ModalProps {
    onClose: (event: {}, reason: ModalReason): void;
}

interface CustomModalProps {
    onClose: (event: {}, reason: CustomModaReason): void;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting issue with the spread operator and setState in React, Typescript, and Material-ui

I recently developed a custom Snackbar component in React with Material-ui and Typescript. While working on it, I encountered some confusion regarding the usage of spread operators and await functions. (Example available here: https://codesandbox.io/s/gift ...

Sorting through an array of objects using a filter method

While following a tutorial, I decided to make some changes to the TypeScript for learning purposes. However, I encountered a problem when trying to create a filter function from a React context script. I have successfully implemented a function called get ...

No versions for "cra-template-typescript" that align with "latest" were located in our cache

Currently attempting to follow the steps outlined in this helpful guide: How to Develop a Basic React Application With an Express API. However, upon executing the command: npx create-react-app react-express-app --template typescript I encountered the foll ...

Error encountered while attempting to import a virtual module, import resolution unsuccessful

I've been working on creating type declarations for a Javascript module in Typescript. My goal is to define interfaces using what I believe is a virtual module. Initially, I had no trouble defining the base module types. However, when attempting to im ...

How can I use Angular to dynamically open a video that corresponds to a clicked image?

I need assistance with a functionality where clicking on an image opens a corresponding video on the next page. The issue is that all images have the same ID, making it difficult to link each image to its respective video. Below is the data I am working ...

Having trouble dynamically rendering a Component using Object.entries

Looking to streamline my code, I am trying to iterate over a series of MUI rows using a loop and Object.entries. However, when attempting to extract the value of each separate Object, I encounter the following error: TS7053: Element implicitly has an &ap ...

Finding the index of an element in an array in TypeScript/JavaScript

UPDATE: Despite being labeled as a duplicate, this question showcases @ssube's clever and efficient solution. UPDATE2: A new method has been suggested by @Grungondola in the comments. I'm currently working with Typescript. This first code snip ...

Incorporating data types into a constant in Typescript/Javascript

Imagine I wanted to ensure these variables are string objects by adding a type string declaration to this variable assignment. What is the correct way to accomplish this? const { someID, someName, someAPIenvironment } = useParams(); This is what I attemp ...

File handling in Angular 2 using Typescript involves understanding the fundamental syntax for managing files

Would someone be able to explain the fundamental syntax for reading and writing text files, also known as file handling in TypeScript? If there is a corresponding link that anyone could provide, it would be greatly appreciated. ...

I just created a slice inline function within my Redux Toolkit setup

Having issues with the following function: export const authSlice = createSlice({ name: "auth", initialState: { credentials: {}, isLoading: false, }, reducers: { isLoading: (state) => { state.isLoading = !state.is ...

What is the best way to refresh the snapshots in my React/TypeScript project?

I am working on a React/TypeScript project that utilizes the Jest testing framework. Occasionally, after making changes to my code, Jest will compare it to the snapshots and generate an alert requesting me to update them. However, there are instances where ...

Transitioning to a mixed Angular and AngularJS application: encountering TypeScript and AngularJS module import issues

Our team is currently working on migrating an AngularJS application to Angular, using a gradual approach. Our goal is to create new components in Angular and upgrade existing AngularJS components one by one while ensuring that the application remains funct ...

What is the significance of setting "ResolveJsonModule" to true in the TypeScript compiler options for a node.js project when importing a JSON file?

The title serves as the description. I am curious about the underlying reason behind it. Could you please provide some insight? Thank you. ...

Angular service providing components (TypeScript error)

This is my first time trying to dynamically inject components and so far, I've been successful. However, there's an error in Typescript that's bothering me (I don't like having errors in my code). If you want to check out the app, here ...

typescript - instantiate an object using values stored in an array

Assume we have a model defined as follows. export interface Basicdata { materialnumber: number; type: string; materialclass: string; } We also have an array containing values that correspond directly to the Basicdata model in order, like this: ...

Creating a relationship of dependence between functions in TypeScript: A guide

Apologies for the unclear title, I'm struggling to articulate my question effectively. Currently, I am attempting to create a method that can parse an object from an XML file. The XML structure (translated to JavaScript using xml-js) appears as follow ...

NPM: There are no valid TypeScript file rules specified

Currently working on a small project using React.JS. Whenever I execute : npm run start, the following message gets logged: Starting type checking and linting service... Using 1 worker with 2048MB memory limit Watching: /Users/John/Projects/myProject/src ...

Having issues with my *ngFor loop in Angular 11. Any assistance in resolving this problem would be greatly appreciated

Utilizing *ngFor, I am sending an array from typescript to the HTML page. kitUser: any=[]; constructor(private service: AdminService) { } ngOnInit() { this.service.getKSignUps().subscribe(res=>{ this.kitUser=res; console.log(this. ...

The attribute 'Error' is not available for the object of type 'MovieData | ResponseError'. This attribute is also not present in objects of type 'MovieData'

Question Answered I am currently working with two interfaces, MovieData and ResponseError. export interface MovieData { Poster: string; Title: string; Plot: string; imdbID: string; } The ResponseError interface looks like this: export interface R ...

Angular 7 and its scrolling div

Currently, I am working on implementing a straightforward drag and drop feature. When dragging an item, my goal is to scroll the containing div by a specified amount in either direction. To achieve this, I am utilizing Angular Material's CDK drag an ...