Is there a way to bypass type assertion while implementing spread syntax in an array that includes generics?

export type NavIconsName =
  | 'home-filled'
  | 'home-regular'
  | 'folder-filled'
  | 'folder-regular';

export interface INavLinkBase<T = {}> {
  linkName: string;
  svgIcon?: ISvgIconProps<T>;
  selectedSvgIcon?: ISvgIconProps<T>;
}

export interface ISvgIconProps<IconType> {
  iconName: IconType;
}

const shouldAddLink = true;
const navLinks: INavLinkBase<NavIconsName>[] = [
  ...(shouldAddLink ? ([
    {
      linkName: 'test4',
      svgIcon: {
        iconName: 'folder-regular'
      }
    }
  ]) as const: []),
  {
    linkName: 'test',
    svgIcon: {
      iconName: 'folder-regular'
    },
    selectedSvgIcon: {
      iconName: 'folder-filled'
    }
  }
];

There was a suggestion to use as const to fix this issue, but I am hesitant to take that route. When I attempted to remove it, I received the error message 

Type 'string' is not assignable to type 'NavIconsName'.(2322)
. Is there any alternative solution to this problem?

Even though I experimented with using as const or 

as INavLinkBase<NavIconsName>[]
, I would prefer to avoid type assertion if there is another option available.

typescripttypescript-generics

Answer №1

If I were in your situation, I would opt for using the as const assertion. This way, you can assign your spread array to a constant with explicit type annotation without facing any drawbacks.

Other viable options include:

  • Using the satisfies constraint
  • Extracting your array to a variable and providing it with a type annotation

The issue at hand is that Typescript tends to widen string and number constants in object literals.

export type NavIconsName =
  | 'home-filled'
  | 'home-regular'
  | 'folder-filled'
  | 'folder-regular';

const icon0 = {
    iconName: 'folder-regular',
    iconSize: 20
}

type IconType0 = typeof icon0;
// type IconType0 = {
//    iconName: string;
//    iconSize: number;
//}

There are 3 ways to address this challenge:

Type annotation

type Icon = {
  iconName: NavIconsName;
  iconSize: 20 | 40;
}

const icon1: Icon = {
    iconName: 'folder-regular',
    iconSize: 20
}

Pros:

  • Ensures type checking against expected type
  • Provides hints in the editor

Cons:

  • Precise type information may be lost

Const assertion

const icon2 = {
    iconName: 'folder-regular',
    iconSize: 20
} as const;

type IconType2 = typeof icon2;

//type IconType2 = {
//    readonly iconName: "folder-regular";
//    readonly iconSize: 20;
//}

Pros:

  • Maintains precise type information

Cons:

  • Lacks type checking
  • No hints in the editor

Using the satisfies constraint

const icon3 = {
    iconName: 'folder-regular',
    iconSize: 20
} satisfies Icon;

type IconType3 = typeof icon3;

//type IconType3 = {
//    iconName: "folder-regular";
//    iconSize: 20;
//}

Pros:

  • Maintains precise type information
  • Ensures type checking against expected type
  • Provides hints in the editor

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 is the best way to restrict the suggested values in a property depending on the value of another property?

I'm working on creating a third interface that depends on the value of properties from two other interfaces, while also introducing a unique third property. I've chosen not to extend the third property from the first two interfaces as it may not ...

typescript

Typescript is throwing an error stating that the type 'Promise<void>' cannot be assigned to the type 'void | Destructor'

The text editor is displaying the following message: Error: Type 'Promise' is not compatible with type 'void | Destructor'. This error occurs when calling checkUserLoggedIn() within the useEffect hook. To resolve this, I tried defin ...

javascripttypescriptpromisetypescript-genericsreact-typescript

Unexpected Null Object Error in TypeScript Function

Hi there! I'm new to TypeScript and encountered an 'Object may be null' error in a function. The function is meant to add two LinkedLists together, each representing numbers (with each digit as its own node), and return a new LinkedList. Can ...

typescriptalgorithmfunctiondebuggingnull

Using Angular 4's ngComponentOutlet to showcase ContentChildren that are dynamically changing

My main objective is to create a unique container component with a dynamic list of customized card components that can be accessed individually (instead of as a group using ng-content). <custom-card-holder> <custom-card></custom-card> ...

angulartypescript

Executing TypeORM commands yields no output

It's been a while since I last tested my Nest project with TypeORM, and now when I try to run any TypeORM command, nothing happens. I attempted to run TypeORM using these two commands: ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js ...

node.jstypescriptnestjstypeormts-node

Ways to set a default value for a function that returns an unknown type in TypeScript

In my code, I have a customizedHook that returns a value of type typeXYZ || unknown. However, when I try to destructure the returned value, I encounter an error TS2339: Property 'xyz' does not exist on type 'unknown', even though the da ...

typescripttypescript-typings

What measures can be taken to stop an event from being triggered from an external source?

Consider a scenario where there is a simple counting process functioning as a default Node EventEmitter: import {EventEmitter} from 'events'; async function sleep(milliseconds: number): Promise<void> { return new Promise((resolve) => ...

node.jstypescripteventseventemitter

Typescript error: the argument passed as type a cannot be assigned to the parameter of type b

In my programming interface, I have defined shapes as follows: type Shape = | Triangle | Rectangle; interface Triangle {...} interface Rectangle {...} function operateFunc(func: (shape: Shape) => void) {...} function testFunction() { const rectFun ...

javascripttypescript

The use of URL embedded parameters in @angular/http

Currently, I am utilizing a backend system that accepts search query parameters in both the ?-notation and the url-embedded format. I understand that I can use tools like URLSearchParams/RequestOptionsArgs to send requests to . However, I am curious about ...

resthttpangulartypescriptparameters

What steps should I take to troubleshoot the ParseError related to the restriction of using 'import' and 'export' exclusively with 'sourceType: module' for importing UpgradeAdapter?

I have been working on upgrading an angular.js app to angular 2, following the guidelines provided at https://angular.io/docs/ts/latest/guide/upgrade.html. The application is already coded in Typescript, and we are using browserify and tsify for compiling ...

angularjsangulartypescriptbrowserifytsify

Leverage the power of TypeScript with knockout's pureComputed function

I am facing an issue with referencing the this object in a function called problem: const c = { f() { console.log("hi"); }, problem: ko.pureComputed(() => { return this.f(); }), }; [ts] The containing arrow function captures the glob ...

typescriptknockout.js

Learn how to utilize a Library such as 'ngx-doc-viewer2' to preview *.docx and *.xlsx files within the application

After 3 days of searching, I finally found a solution to display my *.docx and *.xlxs files in my angular application. The API returns the files as blobs, so my task was to use that blob to show the file rather than just downloading it using window.open(bl ...

javascriptangulartypescriptblobngx-doc-viewer

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

htmlcssangulartypescriptcss-selectors

Troubleshooting: Angular add/edit form issue with retrieving data from a Span element within an ngFor loop

I am currently working on an add/edit screen that requires submitting a list, among other data. The user will need to check 2-3 checkboxes for this specific data, and the saved record will have multiple options mapped. Here is what the HTML looks like: &l ...

angulartypescript

"Exploring the world of mocking module functions in Jest

I have been working on making assertions with jest mocked functions, and here is the code I am using: const mockSaveProduct = jest.fn((product) => { //some logic return }); jest.mock('./db', () => ({ saveProduct: mockSaveProduct })); ...

javascripttypescriptjestjs

What are the steps to avoid TypeScript from automatically installing and referencing its own @types in the AppDataLocal directory?

I'm encountering a perplexing issue where it appears that TypeScript is setting up its own version of React in its unique global cache system (not entirely sure what to call it? presuming that's the case) and utilizing it within my project. In p ...

reactjstypescriptnpmtypesnode-modules

Posting an array as form data in Angular Typescript: A step-by-step guide

Hello there, I'm currently developing an application using Angular 8 and integrating web.api within .net core 2.2. One of the challenges I encountered is dealing with multi-selectable checkboxes in a form that also includes "regular" inputs and file ...

arraysangulartypescripthttp-postasp.net-core-webapi

Angular 2: Issue with data table not updating after item deletion

I need assistance with updating a data table after deleting an item. The database is updated correctly when I delete an item, but the table does not automatically refresh to reflect the changes. managenews.component.ts import { Component, OnInit } from ...

angulartypescript

Place a hook following the storage of a variable in the device's memory

Within a component, I am facing the following situation: const [home, setHome]=useState(false) if(home){ return(<Redirect push={true} to="/" />); } setItem("isRegistered", resquest[0].user) setHome(true) The issue here is that ...

reactjstypescript

The specified type 'ListRenderItem<IPhotos>' cannot be assigned to type 'ListRenderItem<unknown>'

Can someone assist with resolving this error I'm encountering: Type 'ListRenderItem<IPhotos>' is not assignable to type 'ListRenderItem<unknown> Here is the code snippet: import { Dimensions, Image, ListRenderItem, Pressabl ...

typescriptreact-native