A Typescript type, RequireSome<T, K extends keyof T>, designed to eliminate the presence of undefined and null values from specific properties

RequireSome type from a similar question, we are looking to create a new type that not only requires certain fields but also removes null and undefined values. This distinguishes it from the original RequireSome type.

We might consider naming this new type NonNullable or something similar. The purpose of this type is to define which fields within a type should not be undefined or null, and then return their types without these unwanted values.

type Question = {
    id: string;
    answer?: string | null;
    thirdProp?: number | null;
    fourthProp?: number | null;
}

// using NonNullable<Question, 'answer' | 'thirdProp'> would result in
/*

type Question = {
    id: string; // no changes
    answer: string; // changed
    thirdProp: number; // changed
    fourthProp?: number | null; // no changes
}

*/

Answer №1

In order to achieve the desired outcome, simply intersecting T with Required<Pick<T, K>>, which essentially overrides the optional properties in T, is not sufficient for this scenario. (Interestingly, this method works because { foo?: X } & { foo: X } is basically equivalent to { foo: X })

To completely eliminate nullability, a new type must be created that removes both null and undefined from a given type T (similar to the concept of Required). From there, it is necessary to intersect the properties we want to make required and non-null with the remaining keys in T</code using the <code>Omit type.

type Omit<T, K> = Pick<T, Exclude<keyof T, K>> // not applicable in ts 3.5

type RequiredAndNotNull<T> = {
    [P in keyof T]-?: Exclude<T[P], null | undefined>
}

type RequireAndNotNullSome<T, K extends keyof T> = 
    RequiredAndNotNull<Pick<T, K>> & Omit<T, K>

type Question = {
    id: string;
    answer?: string | null;
    thirdProp?: number | null;
    fourthProp?: number | null;
}

type T0 = RequireAndNotNullSome<Question, 'answer' | 'thirdProp'> 

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

In Angular 17, is there a way to trigger a component's method when a Signal is modified?

Our component is designed to monitor signals from a Service: export class PaginationComponent { private readonly pageSize = this.listService.pageSize.asReadonly(); private readonly totalCount = this.listService.totalCount.asReadonly(); readonly pag ...

What is the process for converting an image into base 64 using Angular 5?

Is there a way to convert an image into base 64 using angular5 when the image is sourced from Facebook or Google authentication API? I seem to be encountering an issue, what could I be doing wrong? getBase64Image(img) { var canvas = document.createEleme ...

What is the process for accessing getBoundingClientRect within the Vue Composition API?

While I understand that in Vue we can access template refs to use getBoundingClientRect() with the options API like this: const rect = this.$refs.image.$el.getBoundingClientRect(); I am now attempting to achieve the same using template refs within the com ...

Encountered an issue while attempting to convert a vue-cli project to TypeScript

I am currently attempting to migrate my vue-cli project to typescript. According to this resource, all I need to do is execute the following command: vue add typescript My project is being run on a Windows machine using Git Bash However, when I try to ru ...

Reactjs - The createStore function is unable to identify the reducer when TypeScript is being used

I recently delved into the world of Reactjs and Typescript and attempted to create a todo item project. However, I encountered an error in VSCode when trying to call createStore that I am struggling to resolve. Any assistance on this matter would be great ...

Implementing Global Value Assignment Post Angular Service Subscription

Is there a way to globally assign a value outside of a method within my app component? This is how my service is structured: import { NumberInput } from '@angular/cdk/coercion'; import { HttpClient } from '@angular/common/http'; import ...

Angular2 allows you to create pipes that can filter multiple values from JSON data

My program deals with an array of nested json objects that are structured as follows: [{name: {en:'apple',it:'mela'}},{name:{en:'coffee',it:'caffè'}}] I am looking to implement a pipe that can filter out objects b ...

Function reference in JSDoc that is not within a class context

If I have two stand-alone functions in the structure outlined below: A/foo.ts B/bar.ts Where bar.ts contains export const happy()... And foo.ts contains /** @see happy /* How can I establish the correct linkage to bar#happy? I experimented with borr ...

The typescript error "Cannot read properties of undefined" is encountered while trying to access the 'map' function

I was attempting to follow a guide on creating an app using typescript and react, but I'm encountering an error that says "Cannot read properties of undefined (reading 'map')". I'm not sure why this is happening, can someone please offe ...

Switching Facebook accounts on Firebase

I'm currently working on an Angular2 App that utilizes Firebase as its User system, with authentication providers including Email + Password, Facebook, and Google. One issue I have encountered is that when logging in with Facebook, I am unable to swi ...

How can a button click function be triggered in another component?

These are the three components in my dashboard.html <top-nav></top-nav> <sidebar-cmp></sidebar-cmp> <section class="main-container" [ngClass]="{sidebarPushRight: isActive}"> <router-outlet></router-outlet> & ...

Angular 4 - Automatically scroll to specific list item based on search query input

While I can achieve this with custom JavaScript, I'm curious if Angular 4 has any built-in features that could help. I have a list of checkboxes that are scrollable and a search input above them. My goal is to enable users to quickly jump to a section ...

The router should display a component based on the user's access level, even if they are

I'm working on a scenario where the home route needs to cater to both admin and user roles. Is there a way to dynamically display the UserComponent if logged in as a user, and show the AdminComponent if logged in as an admin? This is my current setup ...

Property initialization status not being inherited by class

I'm encountering a situation where the properties of the base class are not being recognized as initialized in the extended class when I inherit a class. I'm unsure if this is a TypeScript or TSLint issue, as my Google search didn't yield re ...

When a type is exported from a Typescript module, it can be of

I am facing an issue with exporting a complex type created using the typeof operator in Typescript. Here is the scenario: // controller/createProfile.ts import { z } from 'zod'; import { zValidator } from '@hono/zod-validator'; const ...

Troubleshooting: Issues with APIGateway's Default Integration

I'm currently utilizing the AWS CDK to construct my API Gateway REST API My objective is to have my RestApi configured to automatically return an HTTP 404 error, so I set it up as follows: this.gateway = new apigw.RestApi(this, "Gateway", { ...

Displaying personalized message 'Loading...' while waiting for the data to be retrieved from the API

How can I display a 'Loading' text message until the data is fetched from the API? Currently, it just shows a message saying 'No data to display' I have searched through the documentation but couldn't find any related information. ...

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...

Angular - Enabling the next screen button only after completing multiple selections

Currently, I'm working on a screen where users can select multiple options from a table. The requirement is that they must select at least 3 options before they can proceed. However, I am facing difficulties in implementing this functionality and unsu ...

Why does "excess property checking" seem pleased when I utilize a key from set A or set B, even though "keyof (A|B)" is consistently "never"?

I am diving deeper into Typescript types and encountering some puzzling behavior: interface Person { name: string; } interface Lifespan { birth: number; death?: number; } let k: keyof (Person | Lifespan); //k is never let test1: Person | Life ...