How can I add a new property to an object type within an Interface in TypeScript?

I'm currently exploring how to merge declare an interface, with the twist of adding a property to the object literal type instead of directly to the interface itself.

Within a library, I have a type that looks like this:

interface DefaultSession {
    user?: {
      name?: string | null;
      email?: string | null;
      image?: string | null;
    };
    expires: ISODateString;
}

If I wanted to include a field within this interface without altering the original definition, I could reopen and declare it like so:

interface DefaultSession {
    role?: string
}

However, my challenge lies in merging declare 'role' as a property under 'user', resulting in a type structured as follows:

interface DefaultSession {
    user?: {
        name?: string | null;
        email?: string | null;
        image?: string | null;
        role?: string | null;
    };
    expires: ISODateString;
}

Answer №1

If you're interested in intersection type, check out:

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

To create your own custom type, you can do something like this:

interface DefaultSession {
  user?: {
    name?: string | null;
    email?: string | null;
    image?: string | null;
  };
  expires: ISODateString;
}

type CustomDefaultSession = DefaultSession & {
  user?: {
    role?: string | null;
  }
}

Now you can use this custom type as is or modify it for your needs. You can also use an alias to refer to the library type with the same name.

If you need to override argument types for callbacks within the library, you can do so like this:

// Callback defined inside the library.
type LibraryCallback = (defaultSession: DefaultSession) => void;

// Function inside the library which accepts callback.
function libraryFunction(libraryCallback: LibraryCallback): void
{
    // Do stuff...
}

// Application code calling the library function and changing the callback argument type.
libraryFunction((customDefaultSession: CustomDefaultSession) =>
{
    const role = customDefaultSession.user.role;
});

Answer №2

To start, simply follow these steps:

export interface Foo {
    user?: {
      name?: string | null;
      email?: string | null;
      image?: string | null;
    };
    expires: Date;
}


export interface Bar extends Foo {
  user?: Foo['user'] & {
    role?: string
  }
} 

Initially, expand the Bar from Foo and set the user in a similar manner as shown above using the & symbol. The & merges two object types, resulting in the following:

https://i.sstatic.net/GsTSq.png

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

Angular 8 experiencing unexpected collision issues

Currently, I am utilizing Angular 8 with "typescript": "~3.5.3". My objective is to handle the undefined collision in my code. const { testLocation } = this.ngr.getState(); this.step2 = testLocation && testLocation.step2 ? testLocat ...

Mastering the art of implementing async/await properly within token validation scenarios

I am currently working on setting up an Express.js backend for a website that authenticates users using Google Sign-in. My goal is to develop a RESTful API call that: Accepts an ID token. Authenticates the token using Google's OAuth2 Library. Veri ...

Updating Mapped Components with Selected State

One of the components in my project is a mapped component that dynamically displays API data. Each card displayed by this component receives unique props, resulting in cards that look different from one another. An example can be seen below. View Example ...

Two unnamed objects cannot be combined using the AsyncPipe

Currently, I am looking to implement an autocomplete feature using Angular Material in Angular 8. Below is a snippet of the code used in the TypeScript file: @Input() admins: User[]; userGroupOptions: Observable<User[]>; filterFormFG: FormGrou ...

Flask Socket-IO - Instant Messaging App with Real-Time Communication, Socket Functionality Not Operating as Expected

I've been dedicating a good amount of time to this flask project, working on incorporating Flask-SocketIO along with JavaScript SocketIO to enable real-time messaging capabilities. Here's the Python section of the code: ## Setting up Socket IO f ...

What is the method for retrieving the active element with Waypoint?

Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...

Vue component fails to render due to a simple issue

I've been diving into Vue.JS and I'm facing an issue where the component I created isn't showing up on the page. Here's a snippet of my component: import Vue from 'vue' const card = new Vue({ el: '#card', data: ...

Styling sub-table titles in jQuery jTable with proper indentation

I am currently implementing jquery.jtable, where I have rows that invoke the openChildTable method in the jquery.jtable.js file. I'm attempting to figure out a way to indent the heading of the child table. Below is the code snippet responsible for cr ...

Is there a foolproof method to authenticate form submissions using Javascript/Ajax instead of relying on PHP?

Currently, my process of handling HTML form submissions is done in PHP where I submit the form to a PHP file that: Verifies against a cookie created at page load to prevent CSRF. Includes a require_once() function for validation purposes. Executes other ...

Using Discord.js to filter messages that start with a specific phrase and finding a solution for handling DiscordAPIError when using bulk

This is the code I am currently using. Shout out to @André Dion for the assistance. if (message.channel.type == 'text') { message.channel.fetchMessages().then(messages => { const botMessages = messages.filter(msg => msg.auth ...

The dreaded Heroku Node.js error H10 strikes again: "Application crashed"

I recently embarked on my journey to learn NodeJS and attempted to deploy it on Heroku. However, when I used 'heroku open,' the following error log appeared: 2020-10-08T14:19:52.778660+00:00 app[web.1]: at Module.load (internal/modules/cjs/loa ...

Alternative form for non-javascript browsers in the absence of script

I'm currently working on a landing page for an upcoming product, and I've run into a bit of a snag. <form novalidate method="POST" class="subscribe-form"> <noscript> </form> <form method="POST" action="/ ...

Ways to extract information from JSON files

Currently, I am working on a script to extract viewer count and follower count data from Twitch. While I have successfully retrieved the viewer count information, I am encountering issues with extracting the follower count. The essential information can be ...

Creating dynamic components in Vue.js using VueJS and jQuery synergistically

New to Vue.js and in the process of building a Vue component inspired by this custom select menu. I want to include an ionicon with each list item. Typically, I can add the icon in Vue.js using: <component class="icon" :is="name-of-icon& ...

How can we sort an array based on the inner HTML values of its children elements in JavaScript?

Can you arrange a JavaScript array based on the innerText values of its HTML elements? I am generating a div element (class="inbox" id="inbox${var}") with a number as its innerText, then adding all these divs to an array (numArr). I wan ...

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

I am currently working on a piece of code that consists of two main functions. When 'Add more' is clicked, a new value is added to the observable array and a new text box is displayed on the UI. Upon clicking Save, the values in the text boxes ...

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors. Below is the snippet of m ...

Ways to position divs without causing them to collapse or override existing divs

I am currently developing a demonstration in which users can select jQuery areas to create square blocks. When a user selects an area and adds a comment with color, the entire block is displayed at a specific position. This feature is working perfectly as ...

Guide to adding a Json file in a PHP file with PHP

I have a PHP file with an embedded JSON file, and I want to update the JSON file with new information from a form. The form looks like this: <form action="process.php" method="POST"> First name:<br> <input type="text" name="firstName"> ...

Tips for invoking a controller method in HTML code

Hello, I am completely new to AngularJS, HTML, JavaScript, and CSS. Please keep your explanations simple for beginners like me. I'm facing an issue where the function "updateFilterTerm" is not being called, causing the variable "filterTerm" to remain ...