How can I customize an external interface in TypeScript?

Currently, I am working with the GridOptions interface in my project:

https://github.com/ag-grid/ag-grid/blob/f065d96ee682d4c43a7275f35935d122d9faeee6/packages/ag-grid-community/dist/lib/entities/gridOptions.d.ts

As per the API documentation:

https://www.ag-grid.com/javascript-grid-events/

The onFirstDataRendered event is supposed to be on the interface but it is missing.

In my code, I have imported and used the interface like this:

import { GridOptions } from "ag-grid/main";
private gridOptions: GridOptions = <GridOptions>{};

How should I modify the interface to include the onFirstDataRendered event?

Update:

The API documentation mentions the following:

To use events with the 'on' prefix, for example gridOptions.onCellClicked.

For instance, gridReady becomes onGridReady as seen in this code:

https://github.com/ag-grid/ag-grid/blob/f065d96ee682d4c43a7275f35935d122d9faeee6/packages/ag-grid-community/dist/lib/entities/gridOptions.d.ts

Answer №1

Have you considered using "firstDataRendered" instead of "onFirstDataRendered"?

Update:

It seems like there might be an error here, as neither "onFirstDataRendered" nor "firstDataRendered" is found in the GridOptions interface, despite what was promised here that "All of these grid events are available through the GridOptions interface."

By the way, visit this link to see event constants that can help make things easier for you (at least you won't risk typing the event name incorrectly).

If you need to extend the interface, you can do so like this:

private gridOptions: GridOptions & {onFirstDataRendered: any} = {}; // Use "any" because it's unclear what type the value should have. I removed the redundant type guard (<GridOptions>) and recommend using "as GridOptions" syntax.

P.S. It seems like the other person mentioned it's a new feature, but despite being published on npm (v.19.0.0), it appears to be buggy (not showing in the interface). Consider raising an issue about this in their GitHub repository.

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

How can I dynamically insert a new HTML element into $event.target using Angular 2?

I have a webpage with a list of items. I want to display a "copy" button next to each item when the mouse hovers over it. I am currently able to create the "copy" button within the element using the following method: mouseOver(event) { if (event.tar ...

Having trouble updating an array of objects using setState in Typescript

As a TypeScript novice, I am currently learning how to update the state of an array containing objects. The array in question is as follows: const [quantity, setQuantity] = React.useState<any[]>([ { id: '1', q: 100, }, ...

Angular dynamically filling in a table with incomplete object data

I am currently working on a scientific project that involves displaying large amounts of data in tables. The experiments I'm working with have timestamps that follow this format: interface TimeData { time: string; data: {SD: string, SEM: string ...

Do type assertions impact the type narrowing process of the following code?

I have run into a TypeScript problem while attempting to create a utility function for registering a Vue plugin. Below is a simplified version of the code: import { type Component, type Plugin } from 'vue' export type ComponentWithInstall<T> ...

Unexpected behavior: Axios post still enters catch block despite successful completion of Rest API call

Having an issue with my axios post request not returning the value from the API in a non-success scenario (401 error). It works fine for successful scenarios. When using Postman to test the output of my reset password API by providing an incorrect current ...

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

Tips for correctly inputting formik parameters into a React component

I'm struggling with how to properly define the props parameter on a Formik component. Can anyone offer assistance? import React from 'react'; import { useField, FormikProps } from 'formik'; interface InputFields { id: string; ...

Tips for utilizing 'safe-json-stringify' within Angular 4 Application

I have a specific requirement to convert a JSON object to a string. However, simply using JSON.stringify() does not work due to circular references. After some research online, I came across a package that can handle this issue for me. The only problem is ...

Setting a default value for NULL property in TypeScript

Trying to establish a default value for all NULL objects has been quite the challenge. The current code looks like this: private setDisplayAmount(summaries: summary[]): void { summaries.map(t => { // performing some operations, and then... ...

"Exploring the Concept of Tuple Narrowing and Type

Is there anyone who can assist me in comprehending the scenario below: export function functionThatReturnsTurpleObjects(): | [{ a: number }, undefined] | [undefined, { a: number }] { if (Math.random() > 0.5) { return [undefined, { a: 1 }]; ...

Manipulating URL parameters in Angular 2

I have implemented the following code: this.router.navigate(['/app/chart', {chartColor: this.color, chartWidth: this.width}]); Upon executing this code, the URL is set to: http://localhost/app/chart;chartColor=blue;chartWidth=600 Everything s ...

Issue with retrieving value using Typescript

Every time I attempt to retrieve a value using typescript, I keep encountering the same error message: Unsafe return of an any typed value. This issue arises from a function within the @update method of a select element. <q-select ...

What is the best way to utilize the constructor in a JavaScript object so that only the properties within `this` are utilized?

I am looking to instantiate the following class: class Person { firstName; lastName; birthday; constructor(props: Person) { {firstName, lastName, birthday} = props } } var me = new Person({firstName: "donald", lastName: "trum ...

Identifying digits and letters by processing individual user input

I am facing a coding challenge with the following code snippet: <div class="form-group"> <label for="txtName">Name</label> <input type="text" pInputText class="form-control" id="txtName" formControlName="name"> < ...

Tips for creating and obtaining content in a model-view-controller (MVC) project

I am facing a challenge with the connection between my ASP.NET MVC app's TypeScript and C# code. While I can see that the C# code is giving the response in the Inspect, the value is there but I am unsure how to handle it in TypeScript. C# Code: name ...

Issue encountered in the Jasmine.d.ts file during the build process

After including the jasmine.d.ts file, I encountered a build error. Despite checking for duplicate entries and confirming that it hasn't been referenced in my project, the issue persists. I've tried searching extensively for a solution without a ...

Adding and removing/hiding tab-panels in Angular 4 with PrimeNg: A step-by-step guide

I'm currently working on a tabView project with a list of tab-panels. However, I am struggling to find a way to dynamically hide and unhide one of the tab panels based on specific runtime conditions. Does anyone have any suggestions or insights on how ...

Are undefined Static Properties an Issue in Mocked Classes? (Jest)

Currently, I am facing a challenge in mocking a class that includes a static property. jest.mock("../../src/logger/index"); import { Logger } from "../../src/logger/index"; // .. const LoggerMock = Logger as jest.MockedClass<typeof ...

Building intricate structures in Typescript: A comprehensive guide

My objective is to create a sophisticated object, with values that need to be calculated or extracted from another object. The specific object I am working on is defined as follows: interface A extends B { key1: string key2: { it's a complex object ...

Unit testing an Angular service using Jasmine with a JSON object schema in Angular 2/4

Looking for assistance with unit testing a service I have. The service includes a current json array object that is functioning properly when the observable is subscribed to. However, I seem to be encountering issues with my unit test setup. Can anyone pr ...