Skip to content

Commit 7957a73

Browse files
committed
[react] Add types for experimental_use
- [`experimental` entrypoint](https://unpkg.com/browse/[email protected]/cjs/react.development.js) - [implementation in `experimental`](https://unpkg.com/browse/[email protected]/cjs/react-dom.development.js) - [experimental_use(Thenable)](facebook/react#25084) - [experimental_use(Context)](facebook/react#25202)
1 parent 55c08b6 commit 7957a73

File tree

2 files changed

+43
-0
lines changed

2 files changed

+43
-0
lines changed

types/react/experimental.d.ts

+27
Original file line numberDiff line numberDiff line change
@@ -102,4 +102,31 @@ declare module '.' {
102102
* @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
103103
*/
104104
export const SuspenseList: ExoticComponent<SuspenseListProps>;
105+
106+
interface ThenableImpl<T> {
107+
then(onFulfill: (value: T) => unknown, onReject: (error: unknown) => unknown): void | PromiseLike<unknown>;
108+
}
109+
interface UntrackedThenable<T> extends ThenableImpl<T> {
110+
status?: void;
111+
}
112+
113+
export interface PendingThenable<T> extends ThenableImpl<T> {
114+
status: 'pending';
115+
}
116+
117+
export interface FulfilledThenable<T> extends ThenableImpl<T> {
118+
status: 'fulfilled';
119+
value: T;
120+
}
121+
122+
export interface RejectedThenable<T> extends ThenableImpl<T> {
123+
status: 'rejected';
124+
reason: unknown;
125+
}
126+
127+
export type Thenable<T> = UntrackedThenable<T> | PendingThenable<T> | FulfilledThenable<T> | RejectedThenable<T>;
128+
129+
export type Usable<T> = Thenable<T> | Context<T>;
130+
131+
export function experimental_use<T>(usable: Usable<T>): T;
105132
}

types/react/test/experimental.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,19 @@ function suspenseTest() {
3636
<React.Suspense fallback="Loading">A</React.Suspense>
3737
<React.Suspense fallback="Loading">B</React.Suspense>
3838
</React.SuspenseList>;
39+
40+
const contextUsers = React.createContext(['HAL']);
41+
const promisedUsers = Promise.resolve(['Dave']);
42+
43+
function useUse() {
44+
// @ts-expect-error Missing value
45+
React.experimental_use();
46+
47+
// $ExpectType string[]
48+
const users = React.experimental_use(promisedUsers);
49+
// @ts-expect-error incompatible type. Mainly to potentially inspect TypeScript error message
50+
React.experimental_use({});
51+
52+
// $ExpectType string[]
53+
const contextValue = React.experimental_use(contextUsers);
54+
}

0 commit comments

Comments
 (0)