Unexpected outcome in Typescript declaration file

This code snippet is dealing with the 'legend' function:

legend = (value) => {
    return typeof value === 'boolean' ?
        {
            'options.legend.display': value
        } :
        {
            'options.legend.display' : true,
            'options.legend.position': value
        };
};

}

Issue in the any.d.ts file:

legend: (value: any) => {
    'options.legend.display': boolean;
    options.legned.display?: undefined;
    options.legend.position?: undefined;
} | {
    'options.legned.display': boolean;
    'options.legend.position': any;
    options.legend.display?: undefined;
};

It seems there was an error in the *.d.ts files.

Why doesn't the compiler use quotes? Am I using the wrong syntax?


The following codes seem to work fine:

Modified version of any.d.ts:

legend: (value: any) => {
    'options.legend.display': boolean;
    'options.legned.display'?: undefined;
    'options.legend.position'?: undefined;
} | {
    'options.legned.display': boolean;
    'options.legend.position': any;
    'options.legend.display'?: undefined;
};

Answer №1

When using dots in property names, it is important to treat them as strings and access them using square bracket notation, rather than dot notation.

Why is this necessary, you may wonder?

Consider this scenario: you have a legend object with a property named options.legend.display. Now, imagine adding another property called options, followed by another called legend. If you attempt to set a property like this:

legend.options.legend.display = '';

Which property are you actually setting? This setup can lead to ambiguity. By using square bracket notation, you are clearly indicating that you are setting the property display of the legend object within the options property of another legend object.

To access properties with dots, the correct way is:

legend['options.legend.display'] = '';

And if you wish to access nested properties using square bracket notation:

legend['options']['legend']['display'] = '';

Understood?

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 are the consequences of relying too heavily on deep type inference in React and Typescript?

In the process of migrating my React + Javascript project to Typescript, I am faced with preserving a nice unidirectional flow in my existing code. The current flow is structured as follows: 1. Component: FoobarListComponent -> useQueryFetchFoobars() 2 ...

Tips on utilizing a connected service in a custom Azure DevOps extension's index.ts file

I have created a unique extension for Azure DevOps that includes a specialized Connected Service and Build task. When setting up the task through the pipeline visual designer, I am able to utilize the Connected Service to choose a service and then populate ...

The solution to enabling Type checking in this scenario is simple: Begin by addressing the issue of "Not assignable," followed by resolving any

After subscribing to an observable projected by a BehaviorSubject from a service, I encountered the following errors when trying to assign the subscribed value to a local variable: error TS2322: Type '{}' is not assignable to type 'DatosAdmi ...

"Encountering Devextreme Reactive Errors while navigating on the main client

Attempting to integrate Devextreme with Material Ui in my Typescript React app has been a challenge. Despite following the steps outlined in this documentation and installing all necessary packages, I am encountering issues. I have also installed Material ...

Angular 8: Issue encountered while resolving parameters for TextAreaEditorComponent

After upgrading angular to version 8.2.14, I attempted to convert the below code from a class to a component. However, I encountered the following error: ERROR in Can't resolve all parameters for TextAreaEditorComponent The issue seems to be with th ...

Efficient approach for combining list elements

I have a collection of content blocks structured like this: interface Content{ type: string, content: string | string[] } const content: Content[] = [ { type: "heading" content: "whatever" }, { type: "para&quo ...

Verifying User Permissions with Angular 2/4 and API

I am currently in the process of developing an Angular 2/4 application that interacts with an API built in Laravel 5.4. One area I'm seeking guidance on involves checking authentication and permissions on the backend through Angular. I want to verify ...

Angular is encountering a CORS issue with the "No Access-Control-Allow-Origin" error when trying to access a CSS file

Currently, in my Angular 5 application with a Web API back-end, my main goal is to reference a CSS file on a production server. I'm facing a cross-origin issue when trying to access the CSS file hosted on the IIS server website. Even though CORS is e ...

What are the steps to effectively utilize an interface within a TypeScript file that contains its own internal import?

Currently, I am in the process of developing a React JavaScript project using WebStorm and attempting to enable type hinting for our IDEs (including VS Code) by utilizing TypeScript interfaces and JSDoc annotations. Our goal is to potentially transition to ...

Angular8 does not recognize custom paths that have been added to the tsConfig file

Hey there! I'm facing an issue with Angular not recognizing a custom path I added to my tsConfig file. It seems like Angular already has a baseUrl property set to ./, starting from the current folder where the tsConfig file is located. The code snippe ...

ag-grid Server Side pagination function to enable independent setting of last row

Currently, I am utilizing ag-grid, Angular 7, and implementing a server-side datasource with pagination. In my API setup, I initiate two requests: the first request provides the total number of items in the table, while the second fetches the data for the ...

Data from HTML not being transferred by Angular Forms

I am facing an issue with transferring input data from HTML's <select> element to Angular Forms. Let's take a look at my code first. File Name: home-page.component.html <form [formGroup]="rForm" (ngSubmit)="addPaste(rForm.value)"> ...

Exploring Objects within an array using Angular loops

Hey there, I'm currently working on an Angular project and I need to retrieve the userName of the user for each comment that is posted. These entities are coming from my Spring Boot project. Is there a way to access the username for every comment? He ...

retrieve object from s3 using angular and open it as a pdf

I'm attempting to access a file from an s3 bucket using Angular and display it as a PDF. I have a node service set up to retrieve the object, which I then call from Angular. However, when I try to open the PDF in Angular, it appears as a blank (white) ...

Determine whether an interface includes a mandatory field

Can Typescript's Conditional Types be used to determine if an interface includes a required field? type AllRequired = { a: string; b: string } type PartiallyRequired = { a: string; b?: string } type Optional = { a?: string; b?: string } // Can we mo ...

The service has terminated unexpectedly because of signal: Ended prematurely: 9

I'm encountering the error 'Service exited due to signal: Killed: 9' and am unable to launch my app. I've come across information suggesting that this may be caused by memory leaks or a lengthy startup time for the app. In all honesty, ...

The system encountered an error when attempting to convert the data '19-10-2002' into a date format

I am trying to pass a date parameter in the format (dd-MM-yyyy) and then convert it into the format (yyyy-MM-dd) before sending it via API. Here is my code: convert(date:string){ date //is in the format(dd-MM-yyyy) date = formatDate(date , " ...

Error: It is not possible to add the "providers" property as the object is not extendable within N

Ever since updating to the latest version of NGRX, I've been encountering an issue: users$= createEffect(() => this.actions$ .pipe( ofType(users.LOAD_USERS), tap((action: users.LoadUsersAction) => { action.item.name = ...

What is the best way to add an external .js file to my Angular 2 application?

I'm currently working on a project using Angular 2's TypeScript API along with webpack to develop a web application. However, I've encountered an issue where one of my components needs to utilize functions from an external .js file that is p ...

Can one bring in a JavaScript function using webpack?

I have a unique JS library called: say-my-greeting.js function SayMyGreeting (greeting) { alert(greeting); } Now I want to incorporate this function in another (.ts) file; special-class.ts import SayMyGreeting from './say-my-greeting.js' ex ...