Encountering the error "Type error: Property X is missing" while working with Angular 2

Receiving the following error:

Property 'conf' is absent in the type '{ text: string; label: string; }'.

when trying to access it from this object:

{
  //...
  digitalSkills: {
    skills: [
      {
        name: '...',
        tooltip: {
          text: '...',
          label: '...'
        }
      },
      {
        name: '...',
        tooltip: {
          text: '...',
          label: '...'
        }
      }
    ],
     //...
  }
  //...
}

within this configuration:

export interface TooltipConfig {
  text:string;
  label:string;
  conf?:string;
}

export class Tooltip implements TooltipConfig {
  text:string;
  label:string;
  conf:(any);

  constructor(c:TooltipConfig) {
    this.text = c.text;
    this.label = c.label;
    c.conf && (this.conf = c.conf);
  }
}

export interface Section {
  //...
  digitalSkills?:{
    skills?:{
      name:string,
      tooltip:Tooltip
    }
}

I have other classes with optional parameters declared similarly that work without issue. I am unsure where I went wrong here and how to correct it.

Important to note: I am not interested in a quick fix by simply adding an empty string as an option parameter. I am seeking to understand the root of the problem and the fundamental concept behind it.

This is part of my journey to comprehend TypeScript thoroughly.

angulartypescript

Answer №1

To enhance the functionality of the Tooltip class, consider making the conf property optional.

export class Tooltip implements TooltipConfig {
  text: string;
  label: string;
  conf?: any;

  constructor(config: TooltipConfig) {
    this.text = config.text;
    this.label = config.label;
    config.conf && (this.conf = config.conf);
  }
}

Alternatively, you can specify the TooltipConfig interface as the type for the tooltip property within the Section interface.

export interface Section {
  //...
  digitalSkills?: {
    skills?: {
      name: string,
      tooltip: TooltipConfig 
    }
}

Another option is to instantiate objects of the Tooltip class during object creation:

{
  //...
  digitalSkills: {
    skills: [
      {
        name: '...',
        tooltip: new Tooltip({
          text: '...',
          label: '...'
        })
      },
      {
        name: '...',
        tooltip: new Tooltip({
          text: '...',
          label: '...'
        })
      }
    ],
     //...
  }
  //...
}

For a detailed example, refer to this sample code.

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

Looking to update the URL from another component?

My current project is using Angular 6 and I am working on creating a list of buttons on the left panel such as "Ice cream", "Pop corns", and more. The goal is for users to click on these buttons which will then change the URL of the add button located in t ...

javascriptangular

Angular 2 - synchronizing timer for all users

I have developed a timer that needs to function consistently for all users at the same time. To achieve this, I stored the start_time (timestamp when the timer begins) in my database and implemented the following code snippet to calculate the remaining ti ...

javascriptangularrxjs

Best practices for incorporating CSS and JS files into an Angular deployment

I am currently in the process of integrating an Admin Template that I previously used in a traditional PHP application into a new Angular project. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel= ...

angular

Seeking a breakdown of fundamental Typescript/Javascript and RxJs code

Trying to make sense of rxjs has been a challenge for me, especially when looking at these specific lines of code: const dispatcher = fn => (...args) => appState.next(fn(...args)); const actionX = dispatcher(data =>({type: 'X', data})); ...

javascripttypescriptrxjs

Authentic property does not reveal its contents

Currently, I am utilizing Angular2 and my goal is to only display a component if a certain property is true. The issue arises when trying to show the <sci-company-form> element when the sci variable is set to true. When setting public sci: boolean = ...

angulartypescript

Create a TypeScript array of objects that mirrors a Java List<Map<String, String>>

In my Java function, the argument type is List<Map<String, String>>. To perform a fetch call from a TypeScript file, I need to declare a variable whose type corresponds to List<Map<String, String>>. As TypeScript does not have a bu ...

javatypescripttype-conversionfetch

Sorting the ids array has been modified in the ngrx updateOne

After loading an index of Invoices from an API into the NGRX Store, the user's input of a single Invoice triggers an update of the full details from the API. An issue arises with the order of the index changing when using Ngrx updateOne. The entity s ...

angularngrxngrx-store

Script execution in '<URL>' has been prevented due to sandboxing of the document's frame and the absence of the 'allow-scripts' permission setting

When I deploy my pure Angular application with a REST API to a production server and try to access its URL from another site (such as a link in an email), I encounter a strange problem. Firefox doesn't provide any error message, but Chrome says: Blo ...

javascriptangular

The attribute 'selectionStart' is not a valid property for the type 'EventTarget'

I'm currently utilizing the selectionStart and selectionEnd properties to determine the beginning and ending points of a text selection. Check out the code here: https://codesandbox.io/s/busy-gareth-mr04o Nevertheless, I am facing difficulties in id ...

javascriptreactjstypescriptmaterial-uiselection-api

webpack is having trouble compiling TypeScript with React components

I've been working on setting up a TypeScript React project with webpack. I followed the TypeScript Tutorial, but I keep running into an error message that says `module parse failed: ... you may need an appropriate loader` Interestingly, I can success ...

reactjstypescriptwebpack

Incorporating two components and nesting one within the other, similar to the way angular-material seamlessly integrates its components

I recently discovered the angular-material module and I'm a bit perplexed about how it allows multiple components to be used inside one another in the same place. Take a look at the example below: <mat-drawer-container class="example-container"> ...

angular

Altering a public variable of a component from a sibling component

Within my application, I have two sibling components that are being set from the app.component: <my-a></my-a> <my-b></my-b> The visibility of <my-a> is determined by a public variable in its component: @Component({ module ...

angulartypescriptpublic

The absence of a declaration file for a module results in it implicitly having an 'any' type, particularly when trying to import a portion of a CommonJS module

Presently, the project utilizes a CommonJS module to store configuration values in a single file: module.exports = { classA: `classA`, classB: `classB` classC: `classC` } This makes it easy to reuse these values for creating JS selectors by followi ...

javascripttypescriptcommonjs

The issue of HTTP parameters not being appended to the GET request was discovered

app.module.ts getHttpParams = () => { const httpParamsInstance = new HttpParams(); console.log(this.userForm.controls) Object.keys(this.userForm.controls).forEach(key => { console.log(this.userForm.get(key).value) const v ...

angulartypescriptangular8

What is the best way to incorporate Form Projection into Angular?

I have been attempting to incorporate form projection in Angular, inspired by Kara Erickson's presentation at Angular Connect in 2017, but I am encountering difficulties and errors along the way. view talk here The code provided in the slides is inco ...

javascriptangular

Encountered a setback while constructing a library of Angular 7 components

While I successfully created a component library in Angular version 11 without any issues, I encountered an error when trying to build a component library in Angular version 7. Cannot find module 'tsickle/src/tsickle' Require stack: - D:\Ang ...

node.jsangularangular-librarytsickle

What is the best way to invoke a function with multiple parameters in TypeScript?

I have a function that manipulates a specified query string, along with another version that always uses window.location.search. Here is the code snippet: class MyClass { public changeQuery(query: string; exclude: boolean = true; ...values: string[]): st ...

javascripttypescript

What are some effective methods for handling data from a backend API within an Angular service?

I'm currently facing challenges in effectively managing and manipulating data retrieved from a backend API within an Angular 2+ service. Take for instance the creation of a cart system. Upon sending an initial get request to fetch the current cart de ...

angulartypescriptobservable

What is the best way to terminate a connection in @aspnet/signalr?

My project utilizes the dependency "@aspnet/signalr": "^1.1.4". Does anyone know how to properly close a connection in Angular's destructor? I attempted to use: this.connection.close(); ...

angularangular8

What is the best way to transform an Observable<Observable<HttpEvent<any>>> into an Observable<HttpEvent<any>> within the Angular AuthInterceptor service?

export class AuthInterceptor implements HttpInterceptor { constructor(private usersService: UsersService){} intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return this.usersService ...

angular