[TypeScript] Fix error when using typed args in <WithRecord render> function

[seongwon-privatenote]

This PR aims to align the types used in FunctionField and WithRecord. Currently, FunctionField utilizes Record<string, any>, whereas WithRecord employs Record<string, unknown>. The proposed change seeks to standardize these types.

I came across this change (#9092) and noticed that the WithRecord prop type hasn't been updated yet.

Given the discussion in this comment (#8963 (comment)), maintaining type consistency between FunctionField and WithRecord seems crucial.

[fzaninotto]

Looks good to me!

[fzaninotto]

The linter complains, though...

[seongwon-privatenote]

Oh, sorry. I've addressed it and updated the pull request accordingly.

[fzaninotto]

I'm just wondering: what bug does that PR fix? Did you run into an actual problem with the current type, or is it just cosmetic?

[seongwon-privatenote]

I'm experiencing a similar issue reported in #9102 .

The code below produces an error while compiling with the recent react-admin.

import { Show, SimpleShowLayout, WithRecord } from 'react-admin';

interface User {
  id: string;
  name: string;
  address: string;
};

const UserShow = () => (
  <Show>
    <SimpleShowLayout>
      <WithRecord
        render={
          (record: User) => (
            <span>{record.name}</span>
          )
        }
      />
    </SimpleShowLayout>
  </Show>
);

export default UserShow;

src/UserShow.tsx:13:9 - error TS2322: Type '(record: User) => JSX.Element' is not assignable to type '(record: Record<string, unknown>) => ReactNode'.
  Types of parameters 'record' and 'record' are incompatible.
    Type 'Record<string, unknown>' is missing the following properties from type 'User': id, name, address

13         render={
           ~~~~~~

  node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]__t7h7o25xmjflt6tysa5nx7q7lu/node_modules/ra-core/dist/cjs/controller/record/WithRecord.d.ts:16:5
    16     render: (record: RecordType) => ReactNode;
           ~~~~~~
    The expected type comes from property 'render' which is declared here on type 'IntrinsicAttributes & WithRecordProps<Record<string, unknown>>'

The code below as well.

import { Show, SimpleShowLayout, WithRecord } from 'react-admin';

interface User {
  id: string;
  name: string;
  address: string;
};

const UserShow = () => (
  <Show>
    <SimpleShowLayout>
      <WithRecord<User>
        render={
          (record) => (
            <span>{record.name}</span>
          )
        }
      />
    </SimpleShowLayout>
  </Show>
);

export default UserShow;

src/UserShow.tsx:12:19 - error TS2344: Type 'User' does not satisfy the constraint 'Record<string, unknown>'.
  Index signature for type 'string' is missing in type 'User'.

12       <WithRecord<User>
                     ~~~~

This sandbox is the minimum reproducible code.

[fzaninotto]

That's clear, thanks!