Type ' ' cannot be assigned to type ''..ts(2322) ANOTHA ONE

Being a beginner in TypeScript and currently learning about enums, I encountered an error with the following example code that I cannot seem to understand. Here's the code snippet:

enum Status {
    SUCCESS = 'success',
    FAILED = 'failed'
}

interface ResponseSuccess {
    databaseId: number
    sum: number
    from: number
    to: number
}

interface ResponseFail {
    errorMessage: string
    errorCode: number
}

interface GoodResponse {
    status: Status.SUCCESS
    data: ResponseSuccess
}

interface BadResponse {
    status: Status.FAILED
    data: ResponseFail
}

let data: GoodResponse = {
    "status": 'success',  // The error message says: Type '"success"' is not assignable to type 'Status.SUCCESS'.ts(2322)
    "data": {
        "databaseId": 567,
        "sum": 10000,
        "from": 2,
        "to": 4
    }
}

let data2: BadResponse = {
    'status': "failed", // Same error here
    "data": {
        "errorMessage": "Error",
        "errorCode": 4
    }
}

I found a workaround using objects to define my types and it worked perfectly:

const Status = {
    success: 'success',
    failed: 'failed',
} as const

export type StatusType = keyof typeof Status

However, I prefer to have the option to select between "good" and "bad" status types.

Answer №1

The issue arises because 'success' is only a literal String, while IStatus.FAILED is an enum that has the value of success, but its type remains as an enum. For more information, refer to this link.

In this scenario, it is recommended to utilize generics.

interface Response<T extend ResponseSuccess | ResponseFail > {
  status: IStatus;
  data: T
}

let data: Response<ResponseSuccess> = {
  "status": IStatus.SUCCESS, // if 'status' is a literal string, try casting the type: 'success' as IStatus.SUCCESS
  "data": {
    "databaseId": 567,
    "sum": 10000,
    "from": 2,
    "to": 4
  }
}

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

Guide on incorporating arrow buttons for navigation on the left and right sides within a Primeng tab view component in Angular 8

Looking to enhance navigation tabs with left and right arrows for better support of larger tab sizes in the nav menu. I attempted using Primeng since my Angular 8 application already utilizes this library. Are there any other libraries besides Angular Ma ...

The utilization of the rest parameter in combination with generics

I encountered an issue with my iteration. The error message "Operator '+=' cannot be applied to types 'number' and 'T'" is showing up. I am puzzled as to why this is happening. let a: number = 1, b: number = 2, c: number ...

Display Bootstrap Modal using Typescript in Angular

Looking for some creative ideas here... My Angular site allows users to register for events by filling out a form. They can also register themselves and other people at the same time. https://i.sstatic.net/a44I7.png The current issue ~ when a user clicks ...

The data stored in the variable cannot be accessed when calling it in a different method

Within my component, there are several methods including constructor(){...} and ngOnInit(){...}. I have declared a variable named values:any=[] in the class, and it is initialized with JSON data within a method called getData(). getData(){ this.service. ...

ParcelJS takes a unique approach by not bundling imported JavaScript libraries

My NodeJS app, which is a Cloudflare Worker, seems to be having trouble with bundling the 'ping-monitor' dependency. In my main typescript file (index.ts), I import the handler module and the first line reads: const Monitor = import('ping-m ...

Automatic type inference for functions in TypeScript with arguments

I am looking to define an interface with the following structure: interface CheckNActSetup<D, C> { defs: (event: Event) => D, context: (defs: D) => C; exec: (context: C) => any[]; when: ((context: C) => boolean)[]; } and implement it usi ...

The object literal is restricted to defining existing properties, and 'id' is not a recognized property in the type 'FindOptionsWhere<Teacher>'

I encountered a persistent error within my teachers.service: Object literal may only specify known properties, and 'id' does not exist in type 'FindOptionsWhere | FindOptionsWhere[]'.ts(2353) FindOneOptions.d.ts(23, 5): The expected t ...

What is the best way to customize the tooltip in VS Code for TypeScript type aliases?

Here is an issue with the code snippet below: type char = 'a' | 'b' | 'c' | 'd' | 'e' | 'f'; const s: string = 'foo'; const [c]: char = s; // [ERROR]: Type 'string' is not assi ...

Typescript - type assertion does not throw an error for an invalid value

When assigning a boolean for the key, I have to use a type assertion for the variable 'day' to avoid any errors. I don't simply do const day: Day = 2 because the value I receive is a string (dynamic value), and a type assertion is necessary ...

Troubleshooting SPFX and Angular: Difficulty accessing service in component.ts file

I recently developed a project using the SharePoint SPFX framework and integrated all the necessary Angular (6.0 or 7.0) TypeScript packages. While Angular seems to be functioning properly within my SPFx webpart, I encountered an issue when attempting to c ...

Avoid circular dependencies in Angular 6 to ensure proper association between modules

When working with TypeScript, how should I handle the scenario where Cat has an owner: Person Person owns a pet: Cat Cat import {Person} from './person' export class Cat { owner: Person constructor(){ this.owner = new Pers ...

Typescript - Conditional imports

When working with the moment-timezone module, one issue that arises is receiving a warning if it is included multiple times. In my specific case, I have a module that necessitates the use of this timezone functionality. Since I am unsure whether or not the ...

Passing values in onPress method of TouchableOpacity without using arrow functions or bind function can be achieved by using JSX props. Remember not to use arrow functions in JSX props

I am working on a React Native project and I have a TouchableOpacity component in my view with an onPress method. I want to avoid using arrow functions and bind functions in the onPress method as it creates a new function every time. My goal is to pass par ...

"Modifying the form of an item by adjusting its variable, and rendering certain object properties as

let myObj = { a: { value: 1 }, b: { value: 2 } } myObj = { // How can I make the property b optional in myObj without specifying my own type? a: { value: 123 } } Is there a way to make the property myObj.b ...

Converting an HTML page to PDF with Angular using jsPdf and Html2Canvas

[1st img of pdf generated with position -182, 0, image 208,298 ][1]Converting an HTML page to PDF in Angular 8+ using jspdf and Html2canvas has been a challenge. Only half of the page is successfully converted into PDF due to a scaling issue. Printing th ...

I am having trouble with the Primeng password template suggestions not appearing as expected

The demonstration available at this link is not functioning correctly, unlike the example provided in the documentation at this website. In the StackBlitz demo, the suggestions are not being displayed as expected for the password template. Take a look at ...

What are the best ways to enhance change detection efficiency in Angular?

One issue I am facing involves two components and a service. It appears that when moving from the view of a routed component to elements in different components like a matMenu and an input field, the routed component seems to refresh itself. This becomes p ...

Creating interfaces within props is essential for defining the structure of components

I'm trying to pass an Interface to one of my components, but I'm running into some issues with my approach. Here's what I have so far: import { InterfaceType } from "typescript"; type Props = { dataType: InterfaceType } export default ...

Uncovering TypeScript's Type Inference Power Through the keyof Keyword

Recently, I encountered a situation where I needed to utilize an abstract class. export abstract class ABaseModel { public static isKeyOf<T>(propName: (keyof T)): string { return propName; } } Following that, I also created another class wh ...

Discover the method to determine the total count of days in a given week number

I am developing a gantt chart feature that allows users to select a start date and an end date. The gantt chart should display the week numbers in accordance with the ISO standard. However, I have encountered two situations where either the start week numb ...