Merge pull request #8863 from marmelab/ts-record-reference-fields

Add TS support to fields

Author: fzaninotto

docs/Fields.md

@@ -597,4 +597,39 @@ You can find components for react-admin in third-party repositories.
 
 - [OoDeLally/react-admin-clipboard-list-field](https://github.com/OoDeLally/react-admin-clipboard-list-field): a quick and customizable copy-to-clipboard field.
 - [MrHertal/react-admin-json-view](https://github.com/MrHertal/react-admin-json-view): JSON field and input for react-admin.
-- [alexgschwend/react-admin-color-picker](https://github.com/alexgschwend/react-admin-color-picker): a color field
+- [alexgschwend/react-admin-color-picker](https://github.com/alexgschwend/react-admin-color-picker): a color field
+
+## TypeScript
+
+All field components accept a generic type that describes the record. This lets TypeScript validate that the `source` prop targets an actual field of the record:
+
+```tsx
+import * as React from "react";
+import { Show, SimpleShowLayout, TextField, DateField, RichTextField } from 'react-admin';
+
+// Note that you shouldn't extend RaRecord for this to work
+type Post = {
+    id: number;
+    title: string;
+    teaser: string;
+    body: string;
+    published_at: string;
+}
+
+export const PostShow = () => (
+    <Show>
+        <SimpleShowLayout>
+            <TextField<Post> source="title" />
+            <TextField<Post> source="teaser" />
+            {/* Here TS will show an error because a teasr field does not exist */}
+            <TextField<Post> source="teasr" />
+            <RichTextField<Post> source="body" />
+            <DateField<Post> label="Publication date" source="published_at" />
+        </SimpleShowLayout>
+    </Show>
+);
+```
+
+**Limitation**: You must not extend `RaRecord` for this to work. This is because `RaRecord` extends `Record<string, any>` and TypeScript would not be able to infer your types properties.
+
+Specifying the record type will also allow your IDE to provide auto-completion for both the `source` and `sortBy` prop. Note that the `sortBy` prop also accepts any string.

docs/js/prism.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRecordContext } from 'react-admin';
 import { Box } from '@mui/material';
 
-import { Company, Contact } from '../types';
+import { Company } from '../types';
 
 const sizeInPixel = {
     medium: 42,
@@ -14,7 +14,7 @@ export const LogoField = ({
 }: {
     size?: 'small' | 'medium';
 }) => {
-    const record = useRecordContext<Company | Contact>();
+    const record = useRecordContext<Company>();
     if (!record) return null;
     return (
         <Box

examples/crm/src/companies/LogoField.tsx

@@ -61,9 +61,7 @@ export const TagsListEdit = () => {
     };
 
     const handleDeleteTag = (id: Identifier) => {
-        const tags: Identifier[] = record.tags.filter(
-            (tagId: Identifier) => tagId !== id
-        );
+        const tags = record.tags.filter(tagId => tagId !== id);
         update('contacts', {
             id: record.id,
             data: { tags },
@@ -72,7 +70,7 @@ export const TagsListEdit = () => {
     };
 
     const handleAddTag = (id: Identifier) => {
-        const tags: Identifier[] = [...record.tags, id];
+        const tags = [...record.tags, id];
         update('contacts', {
             id: record.id,
             data: { tags },

examples/crm/src/contacts/TagsListEdit.tsx

@@ -1,13 +1,13 @@
 import { RaRecord } from 'react-admin';
-import { Company, Contact, ContactNote, Deal, Tag } from '../types';
+import { Company, Contact, ContactNote, Deal, Sale, Tag } from '../types';
 
 export interface Db {
     companies: Company[];
     contacts: Contact[];
     contactNotes: ContactNote[];
     deals: Deal[];
     dealNotes: RaRecord[];
-    sales: RaRecord[];
+    sales: Sale[];
     tags: Tag[];
     tasks: RaRecord[];
 }

examples/crm/src/dataGenerator/types.ts

@@ -1,4 +1,4 @@
-import { RaRecord, Identifier } from 'react-admin';
+import { Identifier, RaRecord } from 'react-admin';
 
 export interface Sale extends RaRecord {
     first_name: string;
@@ -38,6 +38,8 @@ export interface Contact extends RaRecord {
     gender: string;
     sales_id: Identifier;
     nb_notes: number;
+    status: string;
+    background: string;
 }
 
 export interface ContactNote extends RaRecord {
@@ -59,6 +61,7 @@ export interface Deal extends RaRecord {
     amount: number;
     created_at: string;
     updated_at: string;
+    start_at: string;
     sales_id: Identifier;
     index: number;
     nb_notes: number;

examples/crm/src/types.ts

@@ -7,7 +7,7 @@ interface Props {
 
 const ProductReferenceField = (
     props: Props &
-        Omit<Omit<ReferenceFieldProps, 'source'>, 'reference' | 'children'>
+        Omit<ReferenceFieldProps, 'source' | 'reference' | 'children'>
 ) => (
     <ReferenceField
         label="Product"

examples/demo/src/products/ProductReferenceField.tsx

@@ -16,10 +16,10 @@ import {
 } from 'react-admin';
 
 import AvatarField from '../visitors/AvatarField';
-import { Customer } from './../types';
+import { Customer, Review } from './../types';
 
 export const ReviewItem = () => {
-    const record = useRecordContext();
+    const record = useRecordContext<Review>();
     const createPath = useCreatePath();
     if (!record) {
         return null;

examples/demo/src/reviews/ReviewItem.tsx

@@ -1,4 +1,4 @@
-import { RaRecord, Identifier } from 'react-admin';
+import { Identifier, RaRecord } from 'react-admin';
 
 export type ThemeName = 'light' | 'dark';
 
@@ -35,6 +35,7 @@ export interface Customer extends RaRecord {
     groups: string[];
     nb_commands: number;
     total_spent: number;
+    email: string;
 }
 
 export type OrderStatus = 'ordered' | 'delivered' | 'cancelled';
@@ -44,14 +45,22 @@ export interface Order extends RaRecord {
     basket: BasketItem[];
     date: Date;
     total: number;
+    total_ex_taxes: number;
+    delivery_fees: number;
+    tax_rate: number;
+    taxes: number;
+    customer_id: Identifier;
+    reference: string;
 }
 
-export interface BasketItem {
+export type BasketItem = {
     product_id: Identifier;
     quantity: number;
-}
+};
 
-export interface Invoice extends RaRecord {}
+export interface Invoice extends RaRecord {
+    date: Date;
+}
 
 export type ReviewStatus = 'accepted' | 'pending' | 'rejected';
 
@@ -60,6 +69,7 @@ export interface Review extends RaRecord {
     status: ReviewStatus;
     customer_id: Identifier;
     product_id: Identifier;
+    comment: string;
 }
 
 declare global {

examples/demo/src/types.ts

@@ -38,7 +38,7 @@ const FullNameField = (props: Props) => {
 };
 
 FullNameField.defaultProps = {
-    source: 'last_name',
+    source: 'last_name' as const,
     label: 'resources.customers.fields.name',
 };