What is the best way to handle optional parameters while also ensuring that a required parameter is passed in TypeScript?

Currently, I am working on a function that requires only one of the configurations specified in the SubNodeConfig interface. While I can set all of them as optional as shown below, I am looking for a way to make one of them mandatory, possibly using the non-null assertion operator !.

export interface SubNodeConfig {
    alphaConfig?: AlphaConfig;
    betaConfig?: BetaConfig;
    charlieConfig?: CharlieConfig;
    deltaConfig?: DeltaConfig;
}

export interface MainNode {
    id: number;
    config: SubNodeConfig;
}

This function is intended to be used in the following context:

const getUpdated = (
    originalNodes: MainNode[],
    updatedConfig: SubNodeConfig 
) => {
    const updatedNodes= [...originalNodes];

    updatedNodes[indexOfNodeToUpdate] = {
        id: 123456,
        config: updatedConfig,
    };

    return updatedNodes;
};

I have also referred to the TypeScript utility docs, but I might have overlooked something. Thank you for your help.

typescripttypes

Answer №1

Check out this solution that leverages a self-indexing mapped type along with the Required and Pick utility types:

type AlphaConfig = { alpha: 'a' };
type BetaConfig = { beta: 'b' };
type CharlieConfig = { charlie: 'c' };
type DeltaConfig = { delta: 'd' };

interface SubNodeConfig {
    alphaConfig?: AlphaConfig;
    betaConfig?: BetaConfig;
    charlieConfig?: CharlieConfig;
    deltaConfig?: DeltaConfig;
}

type RequireOne<T> = {
    [K in keyof T]-?: Required<Pick<T, K>>;
}[keyof T]

const x: RequireOne<SubNodeConfig> = { alphaConfig: { alpha: 'a' } }; // OK
const y: RequireOne<SubNodeConfig> = {
  alphaConfig: { alpha: 'a' },
  betaConfig: { beta: 'b' }
}; // OK
const z: RequireOne<SubNodeConfig> = {}; // Error

Link to Playground

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

Verify the occurrence of an element within an array inside of another array

Here is the scenario: const arr1 = [{id: 1},{id: 2}] const arr2 = [{id: 1},{id: 4},{id: 3}] I need to determine if elements in arr2 are present in arr1 or vice versa. This comparison needs to be done for each element in the array. The expected output sho ...

javascriptreactjstypescript

I'm looking to inject both default static values and dynamic values into React's useForm hook. But I'm running into a TypeScript type error

Below is the useForm code I am using: const { register, handleSubmit, formState: { errors, isSubmitting }, reset, getValues, } = useForm({ defaultValues: { celebUid, //props fanUid, // props price, // props ...

reactjstypescript

The Mat-slide-toggle resembles a typical toggle switch, blending the functionalities of

I am facing an issue with a `mat-slide-toggle` on my angular page. Even though I have imported the necessary values in the module, the toggle is displayed as a normal checkbox once the page loads. HTML: <div style="width:100%;overflow:hidden"> < ...

htmlangulartypescript

Error: Unable to inject HttpClient dependency. Angular 5

I recently switched to using the Angular template in Visual Studio 2017 and decided to update to Angular 5.2. However, I encountered an error while trying to make a http call from the service class. The error message I received is: https://i.sstatic.net/p ...

asp.net-mvcangulartypescriptasp.net-core

The conundrum of nested function wrapping in Typescript and its impact on

Upon calling the following function, it returns a Promise<boolean>: const fnc = (i:number) : Promise<boolean> => Promise.resolve(true) // Promise<boolean> const res1 = errorHandler(errorPredicates.sdkError1, fnc, null, 4); However, ...

javascripttypescripttypescript-typingstypescript-generics

Unable to access specific data from the JSON string retrieved from the backend, as it is returning a value of undefined

After receiving a JSON string from the backend, my frontend is encountering issues when trying to index it post using JSON.parse(). The indexed value keeps returning as undefined, even though it's a JSON object literal and not within an array. For th ...

javascriptpythonjsondjangotypescript

Is it possible to import node_modules from a specific directory mentioned in the "main" section of the package.json file?

Is it feasible to import from a source other than what is defined by the "main" setting? In my node_modules-installed library, the main file is located at lib/index.js With es2015 imports (source generated from ts compiled js), I can use the following ...

node.jstypescriptnpmecmascript-6

Incorporate form information into an array in Angular Version 2 or higher

This form is where I craft my questions https://i.sstatic.net/93781.png When composing a question, the ability to include multiple alternatives is available. There will also be an option to edit these alternatives. The desired format for my array is as ...

arraysangulartypescriptangular-reactive-forms

Acquiring information from file within component operation

When a user drags and drops a file, how can I retrieve it from the drop event? HTML file <div (drop)="drop($event)" > drop file here </div> TS file drop (event) { console.log(event.target.files.length); // I need to retrieve the file her ...

angulartypescript

Error thrown due to missing property in type '{}' when using TypeScript arrow function parameter

As outlined in the documentation for interfaces in TypeScript, An interface declaration serves as an alternative way to define an object type. I'm puzzled by the error I encounter in the following code snippet. My attempt is to restrict the object ...

typescript

The value 'var(--header-position)' cannot be assigned to type 'Position or undefined'

Description of Issue I am attempting to utilize a CSS Custom Property to customize a component within a nextjs application using TypeScript. Strangely, all CSS properties accept the CSS variables except for the position property which triggers the error b ...

reactjstypescriptnext.jstypescss-variables

Enable the use of unfamiliar techniques on object

I am facing a challenge with an object that contains multiple method names which are not known at compile time. The signature of these methods always remains the same, but I am unsure about how to handle this scenario. I attempted to utilize an index type ...

typescript.d.ts

Guide to integrating global interfaces into your Nuxt project

Recently diving into the world of Nuxt 3, I've encountered a challenge while exploring TypeScript functionalities. My current goal is to create a versatile NavBar featuring multiple buttons with unique links. To achieve this, I aimed to establish an ...

typescriptnuxt.jsnuxtjs3

Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

Currently, I am facing an issue in my code where I am trying to introduce a delay using timer(500). However, the problem is that it is only returning partial data. Instead of the expected 17 fields, it is only returning 2 fields. Below is my code snippet f ...

javascriptangulartypescriptrxjs

Determine the type of input and output based on another argument

When working with a function that takes an object of either TypeA or TypeB, the first parameter is used to specify the type of the object and the returned type depends on this first parameter. The issue arises in TypeScript where the type of the object is ...

typescript

Angular 8: Issue with PatchValue in Conjunction with ChangeDetector and UpdateValue

I am puzzled by the fact that PatchValue does not seem to work properly with FormBuilder. While it shows data when retrieving the value, it fails to set it in the FormBuilder. Does anyone have an idea why this might be happening? I am utilizing UpdateValue ...

angulartypescriptangular8

Leveraging the typeof Operator within a Class

How can we utilize typeof in order to specify the type of a class property? Take a look at both examples below, where example A works but example B does not. A) Works outside class const data: {age:number, name:string} = {age:10, name:'John'}; c ...

typescript

What is the best way to send two separate properties to the selector function?

My selector relies on another one, requiring the userId to function properly. Now, I want to enhance the selector to also accept a property named "userFriend". However, there seems to be an issue with passing this new parameter, as it only recognizes the ...

angulartypescriptngrx

`express-validator version 4 is not functioning as expected`

Trying to implement input validation using express-validator v4.3.0 for my express routes, but despite following the documentation, I am unable to get it working correctly. It seems to not detect any errors and also gets stuck in the route. Could it be tha ...

node.jstypescriptexpressexpress-validator

What is the reason for TypeScript not displaying a type mismatch error in this particular instance?

After starting to use React with TypeScript, I defined my types as follows: type CardInfo = { cardIndex: null | number; title: string; note: string; _id: string; from: string; cardId: string; }; type ContentType = { title: string; note: st ...

reactjstypescript