Is it possible to implement robust type checking in React-Admin resources?

As I work on my project, I am endeavoring to ensure that all data handled by ReactAdmin is strongly typed. It appears that ReactAdmin treats all data as instances of Record:

export interface Record {
    id: Identifier;
    [key: string]: any;
}

This essentially instructs Typescript to disregard type-checking on any object that is a Record. The challenge lies in the fact that every object in React-Admin falls under this category.

Is there a method to define a specific type for each resource? Am I overlooking something?

I appreciate your assistance!

typescriptreact-admin

Answer №1

When utilizing the specialized react-admin hooks for your queries, it is possible to specify a type:

const { data, error, loaded } = useGetOne<Product>('products', 123);
          |
          -- TypeScript identifies data as Product type value

The key requirement is that the type you provide (Product in this instance) must extend react-admin's Record type, ensuring that your records contain an id field.

Despite the lack of clear guidance in the react-admin documentation, observe the types indicated by your IDE, indicating generic hooks:

https://i.sstatic.net/GvdhC.png

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 replace document.getElementById in Angular4 using Typescript?

Angular4 is a new concept for me as I work on my practice projects. To access HTML elements and retrieve their values, I have been using <HTMLInputElement> document.getElementById or <HTMLSelectElement> document.getElementById. I'm curio ...

angulartypescript

Typescript seems to be having trouble identifying the names of computed property keys

I seem to be facing the identical problem mentioned here: https://github.com/Microsoft/TypeScript/issues/13948 Has there been a solution to this issue? I initially thought it could be related to a TypeScript version mismatch, but even with version 2.0, I ...

reactjstypescript

Using Angular to parse intricate JSON data

Need help parsing an http request in the following format: [ { "id": 1, "date": "2022-01-13T00:00:00.000+00:00", "time": "2022-01-13T21:21:21.000+00:00", "office&quo ...

arraysjsonangulartypescript

Failure encountered while attempting to process request: unable to establish connection due to refusal to connect

I have a cloud function that triggers every minute, sending push notifications to users export const sendScheduledNotifications = functions .region(REGION) .runWith({ timeoutSeconds: 540, }) .pubsub.schedule("* * * * *") .timeZone(& ...

typescriptfirebasegoogle-cloud-functionsfirebase-cloud-messaging

There was an error stating "exports is not defined" in a file created by Typescript that was not caught

I've decided to dive into Typescript for my Electron development journey. It was a bit of a struggle at first, especially with setting up typings for node and jQuery, but after some effort, I finally managed to get my .ts file free from errors. Howev ...

javascripttypescript

The Carousel Slider seems to encounter issues when trying to implement it with *ngFor in Angular 8

Currently tackling an issue in Angular 8 where my slider functions perfectly with static data. However, upon attempting to loop through some dynamic data, the 'left' and 'right' buttons on the carousel cease to work. The images also fai ...

javascripthtmlangulartypescriptbootstrap-4

Encountering a TypeScript React issue with passing objects to context in code

Within my project, there is a context provider that acts as an object containing various properties: <Provider value={ { scaleNum: scaleNum, // number scaleLet: scaleLet, // string ...

reactjstypescriptreact-context

Revoking TypeScript Compilation Files with Sublime Text

By mistake, I pressed CTRL + B and it created JavaScript files and source map files from Typescript. Is there a simple way to reverse this process? Sublime keeps generating/updating the JS files whenever I make changes to the Typescript files. My current ...

typescriptsublimetext3

Unlocking the secret to accessing keys from an unidentified data type in TypeScript

The code snippet above will not compile due to an error with the email protection link. const foo: unknown = {bar: 'baz'} if (foo && typeof foo === 'object' && 'bar' in foo) { console.log(foo.bar) } An erro ...

typescriptstructural-typing

Angular is throwing an error stating that it is unable to access the 'name' property of an undefined object

While working on my Angular application, I encountered the following error message: " Cannot read property 'name' of undefined" https://i.stack.imgur.com/O3vlh.png I've been searching through my code but am unable to pinpoint the issue. T ...

angulartypescript

When utilizing TypeScript's tsc compiler, errors may be generated upon invoking jQuery and Flot code

When I run "make" on x86-64 Linux with this code (a branch of a GitHub repository), I encounter the following errors: shlomif@telaviv1:~/Download/unpack/to-del/TypeScript-flot$ make tsc --outFile foo.js foo.ts foo.ts(18,12): error ...

javascriptjquerytypescriptflot

Is it possible to use string indexes with jQuery each method in Typescript?

When running a jQuery loop in Typescript, I encountered an issue where the index was being reported as a string. $.each(locations, (index, marker) => { if(this.options && this.options.bounds_marker_limit) { if(index <= (this.opt ...

jquerytypescripttypescasting

Angular authentication guard does not redirect properly after returning a Promise<UrlTree>

My authentication guard is set up to control access to the /sign-in and /verify-email routes, allowing only users who are not logged in or have not verified their email: export const signInGuard: CanActivateFn = (activatedRouteSnapshot: ActivatedRouteSnap ...

node.jsangulartypescriptnpmangular2-routing

Executing additional code after all tests have finished in Mocha.js

In the world of MochaJS testing, it is customary to have before and after blocks for setup and teardown operations. But what if we want to execute an extra cleanup step after all test files have been processed? This is crucial to ensure that any lingering ...

javascriptnode.jstypescriptunit-testingmocha.js

Footer Cell isn't showing up as expected within *ngFor loop in Mat-Table

I'm having trouble displaying the total sum at the bottom of my table. Despite following the steps outlined in the documentation exactly, it still doesn't seem to be working for me. Below you can find the code from my template: <table mat-t ...

javascriptangulartypescriptangular-materialangular-material-table

Creating a distinct Output type in Typescript to avoid any confusion between Output arguments and Input arguments

Inspired by C#, I am looking to define the following: type FunctionOutput<T> = T; // This is a basic implementation that needs improvement type Result = {result: number}; function myFun(a: number, b: number, c: FunctionOutput<Result>) { c.r ...

typescript

Style will be applied to Angular2 when the object's ID exceeds 100

I am working with object markers that have different Id's assigned to them. Now, I am trying to apply additional styling when the id > 100. Check out the code snippet below: <span *ngIf="result.object.reference > 100" class="tooltip-data"&g ...

typescriptangular

Incorporate Ng-Survey multiple times within one component

Incorporating the ng-surveys template into my Angular application via has been successful. However, I encountered an issue where when using the template selector *ngFor to display multiple surveys on the same page, the browser treats all the surveys as id ...

javascriptangulartypescript

Guide to setting up .env Variables on a DigitalOcean Ubuntu droplet

After deploying my Node.js app on a DigitalOcean Ubuntu droplet, I encountered the need for variables from my .env file. How can I go about creating these variables within the DigitalOcean droplet? ...

node.jstypescriptdigital-oceandroplet

Retrieve the thousand separator for numbers using Angular in various languages

When using the English locale, numbers appear as follows: 111,111,222.00, with a comma as the thousand separator and a point as the decimal separator. In languages like German, the same number would be represented as 111.111.222,00, reversing the positions ...

javascriptangulartypescript