I encountered TS2345 error: The argument type X cannot be assigned to the parameter type Y

Currently, I am delving into the world of Angular 8 as a beginner with this framework.

In my attempt to design a new user interface with additional elements, I encountered an unexpected linting error after smoothly adding the first two fields. The error message reads:

ERROR in src/app/weatherObject/weather-class.ts(27,17): error TS2345: Argument of type '{ cityName: any; degrees: number; impaction: number; }' is not assignable to parameter of type 'WeatherFeature'. Object literal may only specify known properties, and 'impaction' does not exist in type 'WeatherFeature'.

This is the Weather Feature interface being used:

interface WeatherFeature {
    cityName: string,
    degrees: number,
    impaction: number //FIELD REJECTED
    // sky: string //READY TO BE INSERTED, But due to impaction issue, it's on hold!
}

Below is the code snippet from the class where values are assigned:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { WeatherForecastApiService } from '../weatherForecastApiService/weather-forecast-api.service';

@Injectable({
    providedIn: 'root',
})
export class WeatherClass {

    public weatherFeature = new BehaviorSubject<WeatherFeature>(undefined);

    constructor(
        private wfas: WeatherForecastApiService,
    ) {
        this.retriver();
    }

    private retriver() {
        this.wfas.getItalyWeatherData('Pisa').subscribe((response) => {
            const ks: string[] = ['name', 'main', 'temp', 'pressure', 'weather'];
            console.log(response[ks[1]][ks[3]], response[ks[4]][0][ks[1]]);
            this.weatherFeature.next({
                cityName: response[ks[0]],
                degrees: Number((response[ks[1]][ks[2]] - 273.15).toFixed()),
                impaction: Number(response[ks[1]][ks[3]]) //QUERY REGARDING INSERTION
            });
        });
    }
}

The puzzling aspect for me is that despite expanding the interface, I continue to face the same error while trying to add new fields in the class file.

Hopefully, it's just a simple oversight or misunderstanding on my part.

Answer №1

When defining an interface, make sure to use semicolons ; instead of commas , to separate properties.

export interface WeatherFeature {
    cityName: string;
    degrees: number;
    impaction: number;
}

Don't forget to export/import the interface if it's being used in a different file.

Answer №2

You may have mistakenly edited the incorrect file related to WeatherFeature, possibly a .bak file.

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

Loading an Angular application by sending an HTTP request to populate an array

After developing a simple shopping cart application using Angular 9, I faced an issue where I could only retrieve the product list by triggering a click event. The core functionality of my app involved sending an HTTP request to the server in order to fet ...

Block-level declarations are commonly used in TypeScript and Asp.net MVC 5

In my asp.net mvc5 project, I decided to incorporate TypeScript. I created an app.ts file and installed the nuget-package jquery.TypeScript.DefinitelyTyped. Here is a snippet of the app.ts code: /// <reference path="typings/jquery/jquery.d.ts"/> cl ...

How can one overcome CORS policies to retrieve the title of a webpage using JavaScript?

As I work on a plugin for Obsidian that expands shortened urls like bit.ly or t.co to their full-length versions in Markdown, I encounter a problem. I need to fetch the page title in order to properly create a Markdown link [title](web link). Unfortunatel ...

Tips on assigning a selected option value to the upload file

The user interface has a selection of documents for the user to choose from. I am trying to associate the fileType with the image that will be uploaded through the input tag. Although I can retrieve the value of the selected document from the drop down usi ...

Utilizing the <slot> feature in Angular 5 for increased functionality

Currently, I am working on a single page application (SPA) where Vue framework has been utilized for development purposes. Front-End: Vue Back-End: NodeJs Within my application, there are other sub-modules built in Angular 4. I am looking to replicate th ...

Angular 5: Ensure Constructor Execution Occurs Prior to Injection

I am working with a file that contains global variables: @Injectable() export class Globals { public baseURL:string; public loginURL:string; public proxyURL:string; public servicesURL:string; constructor(platformLocation: PlatformLocation) { ...

There seems to be an issue with running a PHP script in Angular when using a Proxy server

I have been attempting to retrieve data from a separate localhost server while both it and the "Angular localhost" are running simultaneously. Here is the code I am using: const req = new HttpRequest('GET', 'http://localhost:4200/echo.php&a ...

The 'target' property is not found on the type 'KeyboardEventHandler<HTMLInputElement>'

My Visual Studio Code is giving me an error in my onKeyUp function when I try to access the input target and retrieve its value. import React from 'react'; import styles from './styles.module.scss'; export function Step3() { ...

Dealing with DomSanitizer problem in Angular 2

When using background-image inline for my *ngFor list items, I encountered an issue. In my Component Class, I defined a variable to store a common part of the images' URLs (e.g., ) along with unique parts of the image URLs as this.image (such as qwer ...

Building a recursive component in Angular 2 using templates

If you want to check out the complete proof of concept, click on this link: https://plnkr.co/edit/slshjP?p=preview I am aiming to develop a straightforward tree component that empowers users to define a template for each node like so: <app-tree-editor ...

There seems to be an issue with the TypeScript error: it does not recognize the property on the options

I have an item that looks like this: let options = {title: "", buttons: undefined} However, I would like to include a function, such as the following: options.open() {...} TypeScript is giving an error message: property does not exist on the options ty ...

Sorting with lodash in Angular 2

Section: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as _ from 'lodash'; @Component({ selector: 'app-ore-table', templateUrl: './ore-table ...

The VueJS function is not defined

Looking for a way to fetch data from graphql in my vue project and store it in a variable. The function is asynchronous and the value of rawID needs to be awaited. However, there is a possibility that it could result in undefined, causing an error in the ...

Enhanced assistance for optional chaining operator available in Visual Studio Code

React Native 0.56 now supports the Optional Chaining Operator with ?. Unfortunately, the latest stable version of VS Code does not recognize this syntax and displays a TypeScript validation error: [ts] Expression expected. No compile-time or eslint erro ...

add headers using a straightforward syntax

I'm attempting to append multiple header values. This is what I'm currently doing: options.headers.append('Content-Type', 'application/json'); options.headers.append('X-Requested-By', 'api-client'); ... ...

The input text in the Typeahead field does not reset even after calling this.setState

As I work on creating a watchlist with typeahead functionality to suggest options as the user types, I encountered an issue where the text box is not resetting after submission. I attempted the solution mentioned in this resource by calling this.setState( ...

Photo captured by camera is not stored in photo gallery

I am currently working on a basic image upload form that allows users to take photos using their phone camera and upload them. However, I have noticed that the pictures taken this way are not being saved to the gallery. Is there something missing in the H ...

Using the useRef hook in a TypeScript project to retrieve a boolean value

As I work on developing an application using Nextjs, I have encountered an issue while using react useRef with typescript. The problem arises when I use useRef without typescript, everything works smoothly. However, the moment I include HTMLDivEleement as ...

Is it possible to automatically switch to a different route in a Next.js server component after a certain period of time?

Is it possible to achieve a similar function in an async server component: displaying the ui, waiting 3 seconds, and then redirecting to another route? In a client component, you can accomplish this using: useEffect(() => { function delay(ms: number) ...

When using Angular2, the form is being mistakenly submitted instead of triggering the desired onSubmit() method

I am working on a component that includes the following elements: Template <div class="hide" id="login-contents"> <form *ngIf="!current_user" role="form" (ngSubmit)="onSubmit()" #loginForm="ngForm"> <div class="form-group"> ...