Is it possible to make interface member optional in TypeScript?

Consider having a typescript interface defined like this:

    interface IOptions{
        name: string;
        dob: date;
        gender: string;
    }

Now, what if you need to create another interface that extends the above interface? Here is an example of how you can achieve this:

    interface ICustomOptions extends IOptions {
        height: number;
        weight: number;
        gender?: string;
    }

If you want to make a property optional in the new interface which was required in the original interface, is there a way to accomplish this without defining a completely new interface?

Answer №1

When implementing polymorphism, it is essential for the interface to be interchangeable with its base interface.

Identifying the base interface is crucial in achieving this. For example, considering IOptions as a specialization due to its requirement for gender implies that it should share the same base interface as ICustomOptions.

interface ISimpleOptions {
    name: string;
    dob: number;
}

interface ICustomOptions extends ISimpleOptions {
    height: number;
    weight: number;
    gender?: string;
}

interface IOptions extends ISimpleOptions {
    gender: string;
}

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

What distinguishes ReadonlyArray from the declaration "readonly arr: T[]"?

Check out this unique playground. interface Feature { readonly name: string; } // <Test> // This is OK interface Foo1 { readonly arr: ReadonlyArray<Feature>; } function save1(foo: Foo1) { console.log(foo); } // </Test> // <Tes ...

What is the best way to pass only the second parameter to a function in TypeScript?

Let's consider a TypeScript function as shown below: openMultipleAddFormModal(commission?: Commission, people?: People): void { // some data } To make a parameter optional, I have added the Optional Chaining operator. Now, how can I modify the code ...

Sending data to a parent component from a popup window in Angular Material using a button click while the window is still open

How can I retrieve data from an Angular Material Dialog Box and send it to the Parent component? I am able to access data after the dialog box is closed. However, I am wondering if there is a way to retrieve data while the dialog box is still open, especi ...

Exciting Update: Previously, webpack version 5 did not automatically include polyfills for node.js core modules (such as React JS, TypeScript, and JWT)!

Having trouble verifying the jwt token in React with TypeScript and encountering this error, how can I fix it? ` const [decodedToken, setDecodedToken] = useState<null | JwtPayload | string>(null); const verifyToken = (token: string) => { t ...

The utilization of `ngSwitch` in Angular for managing and displaying

I am brand new to Angular and I'm attempting to implement Form Validation within a SwitchCase scenario. In the SwitchCase 0, there is a form that I want to submit while simultaneously transitioning the view to SwitchCase 1. The Form Validation is fun ...

Encountering TypeScript error TS2339 while mocking a React component with Jest

When attempting to mock a React component using Jest, I encountered an issue where TypeScript was not recognizing the mocked methods and showing a TS2339 error. Below is the test code snippet causing the problem: jest.mock('./features/News/News' ...

What methods can I use to guarantee that a cloned HTML element retains a specific property during Unit Testing?

During my HTML cloning process, I am using the following code snippet: var clone = document.getElementById('tempID').cloneNode(true); After creating the clone, I need to modify its ID by assigning a new unique identifier with clone['id&apo ...

Issue with updating state in child component preventing addition to state

Recently, I made the switch to TypeScript in my NextJS project using Create T3 App. One of the components in my app involves updating the state after a Prisma mutation is performed. I attempted to pass the setItems (which was initialized with useState) to ...

Is there an issue with my approach to using TypeScript generics in classes?

class Some<AttributeType = { bar: string }> { foo(attrs: AttributeType) { if (attrs.bar) { console.log(attrs.bar) } } } Unable to run TypeScript code due to a specific error message: Property 'bar' d ...

Ways of invoking a component method from a service in Angular 2

I have a concept for creating a unique service that is capable of interacting with one specific component. In my application, all other components should have the ability to call upon this service and then have it interact with the designated component in ...

How can I activate div elements by clicking on a specific div using Angular 2?

I have created a custom component with search dropdown functionality for selecting dates. <div class="search-dropdown calender-dropdown "> <div class="search-dropdown-tabs-wrp"> <ul class="search-dropdown-tabs"> <li& ...

What is the best way to define a category in order to utilize a saved string as a variable for referencing it?

An object named CONFIG holds the following information: export const CONFIG = { buttonDestinations: { detailedStats: `detailedStats`, mealPlans: `mealPlans`, products: `products` }, buttonTexts: { detailedStats: ...

typescript: declaring types in a separate JavaScript file

Imagine you have a JavaScript library that exports some types for use (let's call it js1.js). You also have some TypeScript code sitting in a <script type="module"> tag that you want to use these types with (let's say ts1.ts). To make this ...

Horizontal chip list in Material Angular 6 displayed as a sleek single-line design

Is it possible to implement a horizontal chip list in Material Angular that scrolls horizontally instead of expanding into multiple rows? ...

What is the process of specifying mapped types for function return types in TypeScript version 4.5.4?

Previously, in typescript 4.4.4, this code compiled successfully: /** * type to get only those properties that are functions */ type FunctionProperties<T> = { [P in keyof T]: T[P] extends (...args: any) => any ? P : never; }[keyof T]; type Re ...

Having trouble getting a local npm installation to work from a specific file path?

After following the instructions from this helpful link to install an npm package through a file path, I encountered an error when attempting to use it: Cannot find module '<module_name>' or its corresponding type declaration Are there an ...

The module rxjs/operators cannot be located

When trying to import rxjs/operators in my Angular project, I use the following syntax: import { map } from 'rxjs/operators'; However, this results in the following error message: map is declared but its value is never read. Cannot find modu ...

In the world of three js, objects vanish from view as the camera shifts

I am attempting to display a d3 force graph in three.js using standard Line and BoxGeometry with a photo texture applied. When the force graph is updated, I call the draw function which is triggered by: controls.addEventListener('change', () =&g ...

Is it possible for Angular 7 to disconnect from the internet?

I am looking to disable all buttons, clicks, and hyperlinks while displaying a backdrop with the message "GO ONLINE". It may come off as rude, but it is necessary. AppComponent (TS): The connectionMonitor can be used to monitor network connectivity. pr ...

Checking for a base class in Typescript

Is there a way to ensure type-checking for the handler class in the configuration object below? import { S01Handler } from "./handlers/start/S01Handler" const config: ConfigInterface = { states: { [StateEnum.S01]: { objec ...