[react] Add types for optimisticKey (DefinitelyTyped#74453)

Author: eps1lon

types/react/experimental.d.ts

@@ -174,4 +174,11 @@ declare module "." {
     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES {
         srcObject: Blob | MediaSource | MediaStream;
     }
+
+    // @enableOptimisticKey
+    export const optimisticKey: unique symbol;
+
+    interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES {
+        optimisticKey: typeof optimisticKey;
+    }
 }

types/react/index.d.ts

@@ -226,12 +226,20 @@ declare namespace React {
 
     type ComponentState = any;
 
+    interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES {}
+
     /**
      * A value which uniquely identifies a node among items in an array.
      *
      * @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs}
      */
-    type Key = string | number | bigint;
+    type Key =
+        | string
+        | number
+        | bigint
+        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES[
+            keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES
+        ];
 
     /**
      * @internal The props any component can receive.

types/react/test/experimental.tsx

@@ -209,3 +209,11 @@ function swipeTransitionTest() {
     >
     </React.ViewTransition>;
 }
+
+function optimisticKeyTest() {
+    <div key={React.optimisticKey} />;
+    <div
+        // @ts-expect-error -- random symbols are not allowed.
+        key={Symbol("foreign-key")}
+    />;
+}

types/react/ts5.0/experimental.d.ts

@@ -174,4 +174,11 @@ declare module "." {
     interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES {
         srcObject: Blob | MediaSource | MediaStream;
     }
+
+    // @enableOptimisticKey
+    export const optimisticKey: unique symbol;
+
+    interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES {
+        optimisticKey: typeof optimisticKey;
+    }
 }

types/react/ts5.0/index.d.ts

@@ -226,12 +226,20 @@ declare namespace React {
 
     type ComponentState = any;
 
+    interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES {}
+
     /**
      * A value which uniquely identifies a node among items in an array.
      *
      * @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs}
      */
-    type Key = string | number | bigint;
+    type Key =
+        | string
+        | number
+        | bigint
+        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES[
+            keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES
+        ];
 
     /**
      * @internal The props any component can receive.

types/react/ts5.0/test/experimental.tsx

@@ -209,3 +209,11 @@ function swipeTransitionTest() {
     >
     </React.ViewTransition>;
 }
+
+function optimisticKeyTest() {
+    <div key={React.optimisticKey} />;
+    <div
+        // @ts-expect-error -- random symbols are not allowed.
+        key={Symbol("foreign-key")}
+    />;
+}