Merge pull request #10761 from marmelab/ts-5-8

djhi · web-flow · commit e25da348ecac · 2025-06-02T10:46:07.000+02:00
[Chore] Upgrade TypeScript to v5.8
diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
         "storybook": "^8.6.11",
         "ts-jest": "^29.1.0",
         "tsx": "^4.19.3",
-        "typescript": "^5.1.3",
+        "typescript": "^5.8.3",
         "typescript-eslint": "^8.28.0",
         "whatwg-fetch": "^3.0.0"
     },
diff --git a/packages/ra-core/src/dataProvider/HttpError.ts b/packages/ra-core/src/dataProvider/HttpError.ts
@@ -1,10 +1,10 @@
 class HttpError extends Error {
-    constructor(
-        public readonly message,
-        public readonly status,
-        public readonly body: any = null
-    ) {
+    status;
+    body;
+    constructor(message, status, body: any = null) {
         super(message);
+        this.status = status;
+        this.body = body;
         Object.setPrototypeOf(this, HttpError.prototype);
         this.name = this.constructor.name;
         if (typeof Error.captureStackTrace === 'function') {
diff --git a/packages/ra-core/src/i18n/useTranslatable.ts b/packages/ra-core/src/i18n/useTranslatable.ts
@@ -30,7 +30,7 @@ export const useTranslatable = (
     const context = useMemo<TranslatableContextValue>(
         () => ({
             locales,
-            selectedLocale,
+            selectedLocale: selectedLocale || 'en',
             selectLocale: setSelectedLocale,
             getRecordForLocale,
         }),
diff --git a/packages/ra-core/src/inference/InferredElement.ts b/packages/ra-core/src/inference/InferredElement.ts
@@ -2,11 +2,11 @@ import { createElement } from 'react';
 import { InferredType } from './types';
 
 class InferredElement {
-    constructor(
-        private type?: InferredType,
-        private props?: any,
-        private children?: any
-    ) {
+    type?: InferredType;
+    props?: any;
+    children?: any;
+
+    constructor(type?: InferredType, props?: any, children?: any) {
         this.type = type;
         this.props = props;
         this.children = children;
diff --git a/packages/ra-core/src/inference/assertions.ts b/packages/ra-core/src/inference/assertions.ts
@@ -24,37 +24,45 @@ export const isHtml = (value: any) => !value || HtmlRegexp.test(value);
 export const valuesAreHtml = (values: any[]) => values.every(isHtml);
 
 const UrlRegexp = /http(s*):\/\/.*/i;
-export const isUrl = (value: any) => !value || UrlRegexp.test(value);
+export const isUrl = (value: any): value is string =>
+    !value || UrlRegexp.test(value);
 export const valuesAreUrl = (values: any[]) => values.every(isUrl);
 
 const ImageUrlRegexp =
-    /http(s*):\/\/.*\.(jpeg|jpg|jfif|pjpeg|pjp|png|svg|gif|webp|apng|bmp|ico|cur|tif|tiff)/i;
-export const isImageUrl = (value: any) => !value || ImageUrlRegexp.test(value);
+    /^http(s*):\/\/.*\.(jpeg|jpg|jfif|pjpeg|pjp|png|svg|gif|webp|apng|bmp|ico|cur|tif|tiff)/i;
+export const isImageUrl = (value: any): value is string =>
+    !value || ImageUrlRegexp.test(value);
 export const valuesAreImageUrl = (values: any[]) => values.every(isImageUrl);
 
 // This is a very simple regex to find emails
 // It is NOT meant to validate emails as the spec is way more complicated but is
 // enough for our inference needs
 const EmailRegexp = /@{1}/;
-export const isEmail = (value: any) => !value || EmailRegexp.test(value);
+export const isEmail = (value: any): value is string =>
+    !value || EmailRegexp.test(value);
 export const valuesAreEmail = (values: any[]) => values.every(isEmail);
 
-export const isArray = (value: any) => Array.isArray(value);
-export const valuesAreArray = (values: any[]) => values.every(isArray);
+export const isArray = (value: any): value is Array<any> =>
+    Array.isArray(value);
+export const valuesAreArray = (values: any[]): values is Array<any>[] =>
+    values.every(isArray);
 
-export const isDate = (value: any) => !value || value instanceof Date;
-export const valuesAreDate = (values: any[]) => values.every(isDate);
+export const isDate = (value: any): value is Date =>
+    !value || value instanceof Date;
+export const valuesAreDate = (values: any[]): values is Date[] =>
+    values.every(isDate);
 
-export const isDateString = (value: any) =>
+export const isDateString = (value: any): value is string =>
     !value ||
     (typeof value === 'string' &&
         (isMatch(value, 'MM/dd/yyyy') ||
             isMatch(value, 'MM/dd/yy') ||
             isValid(parseISO(value))));
 
-export const valuesAreDateString = (values: any[]) =>
+export const valuesAreDateString = (values: any[]): values is string[] =>
     values.every(isDateString);
 
-export const isObject = (value: any) =>
+export const isObject = (value: any): value is object =>
     Object.prototype.toString.call(value) === '[object Object]';
-export const valuesAreObject = (values: any[]) => values.every(isObject);
+export const valuesAreObject = (values: any[]): values is Array<object> =>
+    values.every(isObject);
diff --git a/packages/ra-core/src/inference/inferElementFromValues.tsx b/packages/ra-core/src/inference/inferElementFromValues.tsx
@@ -79,7 +79,7 @@ const hasType = (type, types) => typeof types[type] !== 'undefined';
  */
 const inferElementFromValues = (
     name,
-    values = [],
+    values: any[] = [],
     types: InferredTypeMap = defaultTypes
 ) => {
     if (name === 'id' && hasType('id', types)) {
diff --git a/packages/ra-core/src/inference/inferTypeFromValues.ts b/packages/ra-core/src/inference/inferTypeFromValues.ts
@@ -58,7 +58,7 @@ export interface InferredElementDescription {
  */
 export const inferTypeFromValues = (
     name,
-    values = []
+    values: any[] = []
 ): InferredElementDescription => {
     if (name === 'id') {
         return { type: 'id', props: { source: name } };
diff --git a/packages/ra-core/src/preferences/usePreference.ts b/packages/ra-core/src/preferences/usePreference.ts
@@ -12,7 +12,22 @@ import { usePreferenceKey } from './PreferenceKeyContext';
  * // this is equivalent to
  * const [theme, setTheme] = useStore('my-app.theme', 'light');
  */
-export const usePreference = <T = any>(key?: string, defaultValue?: T) => {
+function usePreference<T>(
+    key: string,
+    defaultValue: T
+): [T, (value: T | ((value: T) => void), defaultValue?: T) => void];
+function usePreference<T = undefined>(
+    key: string,
+    defaultValue?: T | undefined
+): [T | undefined, (value: T | ((value: T) => void), defaultValue?: T) => void];
+function usePreference(): [
+    unknown,
+    (
+        value: unknown | ((value: unknown) => void),
+        defaultValue?: unknown
+    ) => void,
+];
+function usePreference<T>(key = '', defaultValue = undefined) {
     const preferenceKey = usePreferenceKey();
     if (!preferenceKey) {
         throw new Error(
@@ -24,4 +39,6 @@ export const usePreference = <T = any>(key?: string, defaultValue?: T) => {
         preferenceKey && key ? `${preferenceKey}.${key}` : preferenceKey ?? key,
         defaultValue
     );
-};
+}
+
+export { usePreference };
diff --git a/packages/ra-core/src/preferences/usePreferenceInput.ts b/packages/ra-core/src/preferences/usePreferenceInput.ts
@@ -18,7 +18,7 @@ import { usePreference } from './usePreference';
  *     );
  * }
  */
-export const usePreferenceInput = (key?: string, defaultValue?: any) => {
+export const usePreferenceInput = (key: string, defaultValue?: any) => {
     const [valueFromStore, setValueFromStore] = usePreference(
         key,
         defaultValue
diff --git a/packages/ra-core/src/routing/useRestoreScrollPosition.ts b/packages/ra-core/src/routing/useRestoreScrollPosition.ts
@@ -62,8 +62,11 @@ export const useRestoreScrollPosition = (
  *   );
  * };
  */
-export const useTrackScrollPosition = (storeKey: string, debounceMs = 250) => {
-    const [position, setPosition] = useStore(storeKey);
+export const useTrackScrollPosition = (
+    storeKey: string,
+    debounceMs: number = 250
+): [number | undefined, (value: number | undefined) => void] => {
+    const [position, setPosition] = useStore<number | undefined>(storeKey);
 
     useEffect(() => {
         if (typeof window === 'undefined') {
diff --git a/packages/ra-core/src/store/localStorageStore.ts b/packages/ra-core/src/store/localStorageStore.ts
@@ -99,7 +99,7 @@ export const localStorageStore = (
                 window.removeEventListener('storage', onLocalStorageChange);
             }
         },
-        getItem<T = any>(key: string, defaultValue?: T): T {
+        getItem<T = any>(key: string, defaultValue?: T): T | undefined {
             const valueFromStorage = getStorage().getItem(`${prefix}.${key}`);
 
             return valueFromStorage == null
diff --git a/packages/ra-core/src/store/types.ts b/packages/ra-core/src/store/types.ts
@@ -1,7 +1,7 @@
 export interface Store {
     setup: () => void;
     teardown: () => void;
-    getItem: <T = any>(key: string, defaultValue?: T) => T;
+    getItem: <T = any>(key: string, defaultValue?: T) => T | undefined;
     setItem: <T = any>(key: string, value: T) => void;
     removeItem: (key: string) => void;
     removeItems: (keyPrefix: string) => void;
diff --git a/packages/ra-core/src/store/useStore.ts b/packages/ra-core/src/store/useStore.ts
@@ -45,12 +45,17 @@ import { useStoreContext } from './useStoreContext';
  *     );
  * };
  */
-export const useStore = <T = any>(
+function useStore<T>(
     key: string,
-    defaultValue?: T
-): useStoreResult<T> => {
+    defaultValue: T
+): [T, (value: T | ((value: T) => void), defaultValue?: T) => void];
+function useStore<T = undefined>(
+    key: string,
+    defaultValue?: T | undefined
+): [T | undefined, (value: T | ((value: T) => void), defaultValue?: T) => void];
+function useStore<T>(key, defaultValue) {
     const { getItem, setItem, subscribe } = useStoreContext();
-    const [value, setValue] = useState(() => getItem(key, defaultValue));
+    const [value, setValue] = useState<T>(() => getItem(key, defaultValue));
 
     // subscribe to changes on this key, and change the state when they happen
     useEffect(() => {
@@ -80,9 +85,11 @@ export const useStore = <T = any>(
         );
     });
     return [value, set];
-};
+}
 
 export type useStoreResult<T = any> = [
     T,
     (value: T | ((value: T) => void), defaultValue?: T) => void,
 ];
+
+export { useStore };
diff --git a/packages/ra-data-graphql-simple/src/buildVariables.ts b/packages/ra-data-graphql-simple/src/buildVariables.ts
@@ -271,7 +271,9 @@ const buildGetListVariables =
                     const resourceField = resource.type.fields.find(
                         f => f.name === parts[0]
                     );
-                    const type = getFinalType(resourceField.type);
+                    const type = getFinalType(
+                        resourceField.type
+                    ) as IntrospectionType;
                     return {
                         ...acc,
                         [key]: sanitizeValue(type, params.filter[key]),
@@ -283,7 +285,9 @@ const buildGetListVariables =
                 );
 
                 if (resourceField) {
-                    const type = getFinalType(resourceField.type);
+                    const type = getFinalType(
+                        resourceField.type
+                    ) as IntrospectionType;
                     const isAList = isList(resourceField.type);
 
                     if (isAList) {
diff --git a/packages/ra-input-rich-text/src/buttons/ColorButtons.tsx b/packages/ra-input-rich-text/src/buttons/ColorButtons.tsx
@@ -21,17 +21,16 @@ import {
     purple,
 } from '@mui/material/colors';
 
-enum ColorType {
-    FONT = 'font',
-    BACKGROUND = 'background',
-}
+const FONT = 'font';
+const BACKGROUND = 'background';
+type ColorType = typeof FONT | typeof BACKGROUND;
 
 export const ColorButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
     const translate = useTranslate();
     const editor = useTiptapEditor();
     const [showColorChoiceDialog, setShowColorChoiceDialog] =
         React.useState<boolean>(false);
-    const [colorType, setColorType] = React.useState<ColorType>(ColorType.FONT);
+    const [colorType, setColorType] = React.useState<ColorType>(FONT);
 
     const colorLabel = translate('ra.tiptap.color', { _: 'Color' });
     const highlightLabel = translate('ra.tiptap.highlight', { _: 'Highlight' });
@@ -51,7 +50,7 @@ export const ColorButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
                         {...props}
                         disabled={!editor || !editor.isEditable}
                         value="color"
-                        onClick={() => displayColorChoiceDialog(ColorType.FONT)}
+                        onClick={() => displayColorChoiceDialog(FONT)}
                     >
                         <FormatColorTextIcon fontSize="inherit" />
                     </ToggleButton>
@@ -61,9 +60,7 @@ export const ColorButtons = (props: Omit<ToggleButtonProps, 'value'>) => {
                         {...props}
                         disabled={!editor || !editor.isEditable}
                         value="highlight"
-                        onClick={() =>
-                            displayColorChoiceDialog(ColorType.BACKGROUND)
-                        }
+                        onClick={() => displayColorChoiceDialog(BACKGROUND)}
                     >
                         <FontDownloadIcon fontSize="inherit" />
                     </ToggleButton>
@@ -96,7 +93,7 @@ const ColorChoiceDialog = ({
     const shades = [900, 700, 500, 300, 100];
 
     const selectColor = (color: string) => {
-        if (colorType === ColorType.FONT) {
+        if (colorType === FONT) {
             editor.chain().focus().setColor(color).run();
         } else {
             editor.chain().focus().toggleHighlight({ color }).run();
@@ -109,7 +106,7 @@ const ColorChoiceDialog = ({
             sx={{
                 position: 'absolute',
                 top: 38,
-                left: colorType === ColorType.FONT ? 0 : '50%',
+                left: colorType === FONT ? 0 : '50%',
                 p: 1,
                 border: `1px solid ${(theme.vars || theme)?.palette?.background?.default}`,
                 display: 'flex',
diff --git a/packages/ra-ui-materialui/src/layout/PageTitleConfigurable.tsx b/packages/ra-ui-materialui/src/layout/PageTitleConfigurable.tsx
@@ -58,7 +58,7 @@ const PageTitleConfigurableInner = ({ title, defaultTitle, ...props }) => {
     const translate = useTranslate();
     const record = useRecordContext();
 
-    return titleFromPreferences ? (
+    return typeof titleFromPreferences === 'string' ? (
         <span className={props.className} {...props}>
             {translate(titleFromPreferences, {
                 ...record,
diff --git a/tsconfig.json b/tsconfig.json
@@ -58,7 +58,8 @@
         /* Experimental Options */
         // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
         // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "erasableSyntaxOnly": true
     }
     // "references": [
     //     { "path": "./packages/ra-core" },
diff --git a/yarn.lock b/yarn.lock
@@ -16491,7 +16491,7 @@ __metadata:
     storybook: "npm:^8.6.11"
     ts-jest: "npm:^29.1.0"
     tsx: "npm:^4.19.3"
-    typescript: "npm:^5.1.3"
+    typescript: "npm:^5.8.3"
     typescript-eslint: "npm:^8.28.0"
     whatwg-fetch: "npm:^3.0.0"
   dependenciesMeta:
@@ -19118,23 +19118,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:>=3 < 6, typescript@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "typescript@npm:5.1.3"
+"typescript@npm:>=3 < 6, typescript@npm:^5.1.3, typescript@npm:^5.8.3":
+  version: 5.8.3
+  resolution: "typescript@npm:5.8.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 1faba8d5ffd4717864ddce767613c5ab77c1c8510c1ce21dc9b112a4c662357b9338dc0a6121615266d3a44ebec699f115ef2dabf18d9d7341ea1675692b9b24
+  checksum: 5f8bb01196e542e64d44db3d16ee0e4063ce4f3e3966df6005f2588e86d91c03e1fb131c2581baf0fb65ee79669eea6e161cd448178986587e9f6844446dbb48
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.1.3#optional!builtin<compat/typescript>":
-  version: 5.1.3
-  resolution: "typescript@patch:typescript@npm%3A5.1.3#optional!builtin<compat/typescript>::version=5.1.3&hash=5da071"
+"typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.1.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.8.3#optional!builtin<compat/typescript>":
+  version: 5.8.3
+  resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=e012d7"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 769c5a11a9d5207ae5ce4c84b5c7a72ad92a28877a0061881ccfb326a43a1a1de79c4daff2f9d74720137744cfc9332fddbfbc4c3973c1e859b2f977f5d11b72
+  checksum: 92ea03509e06598948559ddcdd8a4ae5a7ab475766d5589f1b796f5731b3d631a4c7ddfb86a3bd44d58d10102b132cd4b4994dda9b63e6273c66d77d6a271dbd
   languageName: node
   linkType: hard
 
