Require fields in TypeScript interfaces only for array types

Is there a way to make only array type interface fields required, not all of them? The Required operator currently makes every field mandatory, but I specifically need just the array fields to be required.

`

interface IExample {
    a: number,
    b?: string,
    c?: number[]
}

function getTest(data: IExample): Required<IExample> {

    return {
        ...data,
        c: data.c ?? []
    }
}

//Issue arises as 'c' field is also being checked, even though it is not an array. How can we validate arrays only?

`

Appreciate any help or suggestions.

I've tried experimenting with tuples as a possible solution, but haven't been able to make it work so far.

typescript

Answer №1

Give this a shot:

type ArrayKeyof<T> = {
  [P in keyof T]-?: any[] extends T[P] ? P : never;
}[keyof T];

export type ArrayRequired<T> = Omit<T, ArrayKeyof<T>> & Required<Pick<T, ArrayKeyof<T>>;

// example

interface IExample {
    a: number,
    b?: string,
    c?: number[]
}

const d: ArrayRequired<IExample> = {
  a: 1,
  c: [1],
}

Check out the demonstration here.

Answer №2

Here is my proposed solution:

If you wish to maintain all necessary types in their original form, you can utilize the KeepAllSameButArraysRequired. However, if you prefer them to be optional and only mandate arrays, then you can opt for OnlyArrayRequired

interface IExample {
    a: number,
    b?: string,
    c?: number[]
}
type ArrayKeys<T> = {
    [K in keyof T]: Array<any> extends T[K] ? K : never
}[keyof T];

type OnlyArrayRequired<T extends object> = Partial<T> & Pick<Required<T>, ArrayKeys<T>>

type KeepAllSameButArraysRequired<T extends object> = T & Pick<Required<T>, ArrayKeys<T>>


const testOnlyArray: OnlyArrayRequired<IExample> = {
    c: [] // acceptable
}

const testKeepingRequriedTypesButNowArrayIsRequired: KeepAllSameButArraysRequired<IExample> = {
    a: 4, // Now necessitates "a"
    c: [] // acceptable
}

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's custom reactive form validator fails to function as intended

Struggling to incorporate a customized angular validator to check for date ranges. The validator is functioning correctly and throwing a validation error. However, the issue lies in the fact that nothing is being displayed on the client side - there are n ...

angulartypescriptvalidationfrontendcustomvalidator

In Typescript, we can use a class to encapsulate another class and then return a generic result

Trying to wrap my head around the concept of generic classes, and now I need to dynamically create another class. However, I am uncertain about how to go about it. Class A {} Class B<T> { Return T } Const c = B(A); // which is T More context on w ...

javascripttypescript

I rely on the angular-responsive-carousel library for my project, but unfortunately, I am unable to customize the arrow and dots

When it comes to CSS, I utilize ng deep style in Angular 10 to make changes for browser CSS. However, I am facing an issue where the problem is not being resolved by my CSS code. Here is a snippet of my code: > ::ngdeep .carousel-arrow { > b ...

csstypescriptsasscarouselangular10

Can the arrow function properly subscribe to an Observable in Angular and what is the accurate way to interpret it?

I'm currently working through the official Angular tutorial: https://angular.io/tutorial/toh-pt4 Within this tutorial, there is a component class that subscribes to a service: import { Component, OnInit } from '@angular/core'; import { He ...

angulartypescriptarrow-functionsangular-observable

Adjusting table to include hashed passwords for migration

How can I convert a string password into a hash during migration? I've tried using the following code, but it seems the transaction completes after the selection: const users = await queryRunner.query('SELECT * FROM app_user;'); user ...

node.jstypescriptdatabase-migrationtypeorm

Spread operator in Typescript for complex nested collection types

I have implemented a Firestore database and defined a schema to organize my data: type FirestoreCollection<T> = { documentType: T; subcollections?: { [key: string]: FirestoreCollection<object>; }; }; type FirestoreSchema< T exte ...

typescripttypescript-typingstypescript-generics

Tips for accurately defining the return type for querySelector(All) connections

I enjoy doing this particular task, ensuring the types are correct. const qs = document.querySelector.bind(document) as HTMLElementTagNameMap | null; const qsa = document.querySelectorAll.bind(document) as NodeListOf<any>; While hovering over query ...

typescriptbinddeclare

Utilizing TypeScript's Type Inference to Simplify Function Combinations

I'm facing a challenge with what should be simple. The types aren't coming through as expected when trying to combine a couple of functions. Is there a way to have TypeScript infer the types without explicitly specifying them? import { pipe, map ...

typescriptfunctional-programmingtypescript-typingsramda.js

Unexpected behavior: Promise.catch() fails to catch exception in AngularJS unit test

During the process of writing Jasmine unit tests for my Typescript app and running them via Resharper, I encountered an issue with executing an action when the handler throws an exception: describe("Q Service Test", () => { var q: ng.IQService; ...

angularjsunit-testingtypescriptjasmine

Guide to recursively iterating through an array of objects in TypeScript/Javascript

In my current programming challenge, I am dealing with an array of objects that have two properties: target and source. Additionally, there is a designated starting source to begin with. The goal is to start from the starting source and recursively find a ...

javascriptarraystypescriptecmascript-6ecmascript-5

Use contextual type when determining the return type of a function, rather than relying solely on

When using Typescript 2.2.2 (with the strictNullChecks option set to true), I encountered an unexpected behavior. Is this a bug or intentional? interface Fn { (value: any): number; } var example1: Fn = function(value) { if (value === -1) { ...

typescript

How can one properly extend the Object class in JavaScript?

I have a scenario where I want to enhance a record (plain Javascript object) of arrays with additional properties/methods, ideally by instantiating a new class: class Dataframe extends Object { _nrow: number; _ncol: number; _identity: number[]; co ...

javascripttypescriptpojo

What could be causing the lack of updates in my shared service across all components?

I have implemented an Angular2 app where I am initializing an authentication service called LocalStorage which I want to be accessible across all my components: bootstrap(AppComponent, [ ROUTER_PROVIDERS, LocalStorage ]); The definition of the Lo ...

javascriptdependency-injectiontypescriptangularsharedservices

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

javascriptangulartypescriptformssubmit

Issue encountered with NextJS where the post request utilizing Bcrypt is not being recognized

In the process of developing a basic login feature using nextJS, I have successfully managed to save new usernames and encrypted passwords from the registration page. The login functionality is intended to be similar, but requires comparing the password st ...

javascriptreactjstypescriptbcryptprisma

Encountering errors while working with React props in typing

In my application, I am utilizing ANT Design and React with 2 components in the mix: //PARENT const Test = () => { const [state, setState] = useState([]); function onChange( pagination: TablePaginationConfig, filters: Record<string, ...

reactjstypescript

Launch another modal and then deactivate the initial modal

Having two Modals has presented a challenge for me when it comes to closing the first modal after the second one is opened. I attempted a solution, but it prevented the second Modal from opening altogether. This code snippet below belongs to the first Mo ...

angulartypescriptionic-frameworkionic4

Utilizing CDK to transfer files to S3 storage bucket

I've been trying to upload a file to an S3 bucket created using CDK, but I keep encountering the same error even when using AWS's example code. Here is the stack: export class TestStack extends cdk.Stack { public readonly response: string; ...

typescriptamazon-web-servicesamazon-s3aws-cdk

The type 'MenuOptions[]' cannot be assigned to type 'empty[]'

Even after numerous attempts, I am still grappling with TypeScript problems. Currently, I am at a loss on how to resolve this particular issue, despite all the research I have conducted. The code snippet below is what I am working with, but I am struggling ...

reactjstypescript

Securing Angular 2 routes with Firebase authentication using AuthGuard

Attempting to create an AuthGuard for Angular 2 routes with Firebase Auth integration. This is the implementation of the AuthGuard Service: import { Injectable } from '@angular/core'; import { CanActivate, Router, Activated ...

angulartypescriptfirebasefirebase-authenticationangularfire2