Attempting to assign incompatible types in TypeScript

I'm encountering an error that I can't quite figure out:

Type '"New Choice"' is not assignable to type '"Yes" | "No"'.ts(2322)
test.ts(17, 14): The expected type comes from property 'text' which is declared here on type '{ text: 
"Yes"; } | { text: "No"; }'

While attempting to define multiple parameters with objects, I'm running into some issues.

This is the code snippet in question:

    export class HomeComponent implements OnInit {

survey:{
    name:"My Quick Survey",
    questionnaires:[{
    question:"Ready for a quick survey?",
    multi:true,
    choices:[
        {text:"Yes"},
        {text:"No"}
    ]
    }]  
}

results:{
    success:"",
    error:""
}

addchoice(i) {
    this.survey.questionnaires[i].choices.push({text:"New Choice"})
    // Error occurs at this line
}

removechoice(i,j) {
    this.survey.questionnaires[i].choices.splice(j,1)
}
addquestion() {
    this.survey.questionnaires.push({
    question:"Next question?",   // Error occurs here
    multi:true,
    choices:[
        {text:"Choice1"},    // Error occurs here
        {text:"Choice2"}     // Error occurs here
    ]
    })
}

}

Any ideas on how I can fix these errors?

javascripttypescript

Answer №1

When defining your class, you've specified survey in this manner:

survey:{
    name:"My Quick Survey",
    questionnaires:[{
    question:"Ready for a quick survey?",
    multi:true,
    choices:[
        {text:"Yes"},
        {text:"No"}
    ]
    }]  
}

This declaration only establishes a type and not a value. To assign a value, you need to use the equal sign (=) instead of the colon (:)

survey = {
    name:"My Quick Survey",
    questionnaires:[{
    question:"Ready for a quick survey?",
    multi:true,
    choices:[
        {text:"Yes"},
        {text:"No"}
    ]
    }]  
}

The same issue applies to the definition of results as well.

Answer №2

Right here:

data = {
    title: "My Awesome Data",
    info: [{
    description: "Ready for some awesome data?",
    numbers: true,
    values: [
            {number:"100"},
            {number:"200"}
        ]
    }]  
}

You might have intended to assign a value to the property data, but you mistakenly used : instead of =, turning it into a type declaration rather than an assignment.

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

Employ the vue.js method within the click EventListener of another method

In my Vue.js script, I have a method that generates an element called 'lens'. Now, I want to include an EventListener that triggers another method when the lens element is clicked. The problem: I have attempted two different approaches to add ...

javascriptvue.js

Selenium WebdriverIO is unable to detect all the texts within the options of a ReactJS list

Greetings! I encountered an issue while trying to retrieve text from an element using a ReactJS drop-down list. The WebDriver version is 3.6.0 and Chromium version is 63. Below is a snippet of the DOM: <div class="Select-menu-outer" data-reactid=".0. ...

javascriptreactjsseleniumchromiumwebdriver-io

Using Rails to render various js templates based on different AJAX requests

My Rails app includes a Movies#index page where I send AJAX requests in two scenarios: When I am loading more @movies When I am filtering @movies I am looking for a way to render different js files based on which scenario I am handling, instead of using ...

javascriptruby-on-railsajax

Placing a GIF on top of an image through the use of Javascript

Welcome to my first post on this platform! I'm currently in the process of creating a portfolio website featuring long panoramic photographs displayed within scrollable divs. You can check it out here: www.edentan.co.uk/portfolio.html. My challenge ri ...

javascripthtmljquerycss

Customizing Material UI themes with CSS variables is a powerful feature of the createMui

In an attempt to create a Material UI theme using existing colors defined as CSS variables in my-palette.scss, the following code is utilized: :root { --primary-color: '#FF0000'; ... } The goal is to incorporate these colors like so: import ...

javascriptmaterial-uicss-variables

I've been struggling with my Create React app for the past two days, and it just won

When trying to create a React project using the command `npx create-react-app reactproject`, I encountered an error: npm ERR! code ENOENT npm ERR! syscall spawn C:\Users\SUJITKUMAR\Desktop npm ERR! path D:\WebDev\React npm ERR! ...

javascriptreactjsnode.js

Preventing Multiple Form Resubmissions in PHP

I have multiple forms that require navigation from the initial form to the final form. Each form includes both 'NEXT' and 'BACK' buttons for moving forward and backward in the process. I am looking for a way to prevent the confirmation ...

javascriptphpjqueryhtmlforms

Refreshing canvas upon Vue.Js + HTML Range modification

My attempt to reload an image when I change a value is facing some challenges. It seems that my vue.js function is only executing once. The goal is to use Caman.js to apply a 'threshold' and 'sharpen' effect based on user input through ...

javascriptvue.jscamanjs

Having difficulty accessing an element within ng-template during the unit test writing process with Jasmine

I am encountering an issue when trying to access a button inside an ng-container in my testing environment. Despite manually setting the value of the ngIf condition to true, the elements inside are not being rendered. Here is what I have attempted so far: ...

angulartypescriptunit-testingjasminekarma-jasmine

An issue has occurred with the NullInjector, specifically regarding the AppModule and Storage in Ionic 4

When attempting to launch my Ionic app using npm start, an error message appears stating "NullInjectorError: No provider for Storage!". I have already included Storage in the app.module.ts file as shown below: imports: \[ BrowserModule, IonicModule ...

angulartypescriptionic-framework

during implementation of ng-repeat directive with JSON dataset

When I receive JSON data and attempt to display it using the ng-repeat directive, I encounter an error ng-dupes error <table> <tr ng-repeat="emp in empArr"> <td>{{emp.empcode}}</td> <td>{{emp.empName}}< ...

javascriptangularjsjson

Adjust website aesthetics through JavaScript by modifying its CSS styling

Hello, in my PHP application I am looking to update the style using JavaScript. <div id="middle-cnt" class="ad-image-wrapper"><div class="ad-image" style="width: 1000px; height: 450px; top: 0px; left: 131px;"><img height="450" width="1000" ...

phpjavascripthtml

Creating multipart/form-data with varying Content-Types for each part using JavaScript (or Angular)

Apologies for the confusion, please refer to my update below I have a requirement to link my AngularJS Project with an existing RESTful API. This API uses POST requests that involve uploading a file and submitting form data in a request. However, one of t ...

javascriptformsangularjsfile-uploadmultipartform-data

After updating the state in a Reducer with Redux Toolkit, make sure to utilize a

Issue: Seeking efficient code writing methods. Here is a detailed example of my Redux Toolkit slice below: import { createSlice } from '@reduxjs/toolkit'; import { setCookie } from '../../utils/storageHandler'; const initialState = { ...

reactjstypescriptreduxredux-toolkit

Using Capybara for testing integration with asynchronous JavaScript

I am currently facing an issue with a failing Rails integration test that has me stumped. The test utilizes Capybara with Selenium as the driver. The specific problem lies in verifying that certain page content is removed after an AJAX call is made. Essen ...

javascriptjqueryruby-on-railsseleniumcapybara

Strategies for effectively searching and filtering nested arrays

I'm facing a challenge with filtering an array of objects based on a nested property and a search term. Here is a sample array: let items = [ { category: 15, label: "Components", value: "a614741f-7d4b-4b33-91b7-89a0ef96a0 ...

javascriptarraystypescriptobjectecmascript-6

calling an Angular template function

Can the convert function be called in an Angular template like covert{{item.size}}? If so, what is the correct syntax to use? Thank you. <mat-cell *matCellDef="let item" fxHide fxShow.gt-xs fxShow.gt-md [matTooltip]="item.size"> ...

angulartypescript

I am having issues with my JavaScript code, I could really use some assistance

Currently, I am developing a custom file search program. The goal is to have a textarea where users can input text, which will then generate a clickable link below it. However, I am facing issues with the current implementation. Below is the snippet of my ...

javascripthtml

Load the flexslider once the fancybox container is opened

In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a ...

javascriptjqueryhtmlfancyboxflexslider

Flask fails to recognize JSON data when transmitted from Nodejs

I am encountering an issue when trying to send JSON data from Node to Flask. I am having trouble reading the data in Flask as expected. Despite attempting to print request.data in Flask, no output is being displayed. Additionally, when I tried printing req ...

javascriptpythonjsonnode.jsflask