[flow] Bump flow to v0.317.0 (#36701)

## Summary

Mostly changing the casting syntax from `(x: Y)` to `x as Y`, as the old
syntax was deprecated and always causing an error in Flow

## How did you test this change?

`yarn flow-ci`

package.json

@@ -75,8 +75,8 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.307.1",
-    "flow-remove-types": "^2.307.1",
+    "flow-bin": "^0.317.0",
+    "flow-remove-types": "^2.317.0",
     "flow-typed": "^4.1.1",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",

packages/react-cache/src/LRU.js

@@ -56,21 +56,21 @@ export function createLRU<T>(limit: number): LRU<T> {
   function deleteLeastRecentlyUsedEntries(targetSize: number) {
     // Delete entries from the cache, starting from the end of the list.
     if (first !== null) {
-      const resolvedFirst: Entry<T> = (first: any);
+      const resolvedFirst: Entry<T> = first as any;
       let last: null | Entry<T> = resolvedFirst.previous;
       while (size > targetSize && last !== null) {
         const onDelete = last.onDelete;
         const previous = last.previous;
-        last.onDelete = (null: any);
+        last.onDelete = null as any;
 
         // Remove from the list
-        last.previous = last.next = (null: any);
+        last.previous = last.next = null as any;
         if (last === first) {
           // Reached the head of the list.
           first = last = null;
         } else {
-          (first: any).previous = previous;
-          previous.next = (first: any);
+          (first as any).previous = previous;
+          previous.next = first as any;
           last = previous;
         }
 
@@ -88,8 +88,8 @@ export function createLRU<T>(limit: number): LRU<T> {
     const entry = {
       value,
       onDelete,
-      next: (null: any),
-      previous: (null: any),
+      next: null as any,
+      previous: null as any,
     };
     if (first === null) {
       entry.previous = entry.next = entry;
@@ -118,7 +118,7 @@ export function createLRU<T>(limit: number): LRU<T> {
     // $FlowFixMe[invalid-compare]
     if (next !== null) {
       // Entry already cached
-      const resolvedFirst: Entry<T> = (first: any);
+      const resolvedFirst: Entry<T> = first as any;
       if (first !== entry) {
         // Remove from current position
         const previous = entry.previous;

packages/react-cache/src/ReactCacheOld.js

@@ -107,14 +107,14 @@ function accessResult<I, K, V>(
     thenable.then(
       value => {
         if (newResult.status === Pending) {
-          const resolvedResult: ResolvedResult<V> = (newResult: any);
+          const resolvedResult: ResolvedResult<V> = newResult as any;
           resolvedResult.status = Resolved;
           resolvedResult.value = value;
         }
       },
       error => {
         if (newResult.status === Pending) {
-          const rejectedResult: RejectedResult = (newResult: any);
+          const rejectedResult: RejectedResult = newResult as any;
           rejectedResult.status = Rejected;
           rejectedResult.value = error;
         }
@@ -128,7 +128,7 @@ function accessResult<I, K, V>(
     entriesForResource.set(key, newEntry);
     return newResult;
   } else {
-    return (lru.access(entry): any);
+    return lru.access(entry) as any;
   }
 }
 
@@ -147,7 +147,7 @@ export function unstable_createResource<I, K: string | number, V>(
   maybeHashInput?: I => K,
 ): Resource<I, V> {
   const hashInput: I => K =
-    maybeHashInput !== undefined ? maybeHashInput : (identityHashFn: any);
+    maybeHashInput !== undefined ? maybeHashInput : (identityHashFn as any);
 
   const resource = {
     read(input: I): V {
@@ -171,7 +171,7 @@ export function unstable_createResource<I, K: string | number, V>(
         }
         default:
           // Should be unreachable
-          return (undefined: any);
+          return undefined as any;
       }
     },
 

packages/react-client/src/ReactFlightClient.js

@@ -116,7 +116,7 @@ import type {SharedStateClient} from 'react/src/ReactSharedInternalsClient';
 // client both in the RSC environment, in the SSR environments as well as the
 // browser client. We should probably have a separate RSC build. This is DEV
 // only though.
-const ReactSharedInteralsServer: void | SharedStateServer = (React: any)
+const ReactSharedInteralsServer: void | SharedStateServer = (React as any)
   .__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 const ReactSharedInternals: SharedStateServer | SharedStateClient =
   React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ||
@@ -254,7 +254,7 @@ function ReactPromise(status: any, value: any, reason: any) {
   }
 }
 // We subclass Promise.prototype so that we get other methods like .catch
-ReactPromise.prototype = (Object.create(Promise.prototype): any);
+ReactPromise.prototype = Object.create(Promise.prototype) as any;
 // TODO: This doesn't return a new Promise chain unlike the real .then
 ReactPromise.prototype.then = function <T>(
   this: SomeChunk<T>,
@@ -304,15 +304,15 @@ ReactPromise.prototype.then = function <T>(
     case BLOCKED:
       if (typeof resolve === 'function') {
         if (chunk.value === null) {
-          chunk.value = ([]: Array<InitializationReference | (T => mixed)>);
+          chunk.value = [] as Array<InitializationReference | (T => mixed)>;
         }
         chunk.value.push(resolve);
       }
       if (typeof reject === 'function') {
         if (chunk.reason === null) {
-          chunk.reason = ([]: Array<
+          chunk.reason = [] as Array<
             InitializationReference | (mixed => mixed),
-          >);
+          >;
         }
         chunk.reason.push(reject);
       }
@@ -394,7 +394,7 @@ function unwrapWeakResponse(weakResponse: WeakResponse): Response {
     }
     return response;
   } else {
-    return (weakResponse: any); // In prod we just use the real Response directly.
+    return weakResponse as any; // In prod we just use the real Response directly.
   }
 }
 
@@ -402,7 +402,7 @@ function getWeakResponse(response: Response): WeakResponse {
   if (__DEV__) {
     return response._weakResponse;
   } else {
-    return (response: any); // In prod we just use the real Response directly.
+    return response as any; // In prod we just use the real Response directly.
   }
 }
 
@@ -437,7 +437,7 @@ function readChunk<T>(chunk: SomeChunk<T>): T {
     case BLOCKED:
     case HALTED:
       // eslint-disable-next-line no-throw-literal
-      throw ((chunk: any): Thenable<T>);
+      throw chunk as any as Thenable<T>;
     default:
       throw chunk.reason;
   }
@@ -446,7 +446,7 @@ function readChunk<T>(chunk: SomeChunk<T>): T {
 export function getRoot<T>(weakResponse: WeakResponse): Thenable<T> {
   const response = unwrapWeakResponse(weakResponse);
   const chunk = getChunk(response, 0);
-  return (chunk: any);
+  return chunk as any;
 }
 
 function createPendingChunk<T>(response: Response): PendingChunk<T> {
@@ -547,7 +547,7 @@ function moveDebugInfoFromChunkToInnerValue<T>(
         debugInfo,
       );
     } else if (!Object.isFrozen(resolvedValue)) {
-      Object.defineProperty((resolvedValue: any), '_debugInfo', {
+      Object.defineProperty(resolvedValue as any, '_debugInfo', {
         configurable: false,
         enumerable: false,
         writable: true,
@@ -665,9 +665,9 @@ function wakeChunkIfInitialized<T>(
               }
             }
             // The status might have changed after fulfilling the reference.
-            switch ((chunk: SomeChunk<T>).status) {
+            switch ((chunk as SomeChunk<T>).status) {
               case INITIALIZED:
-                const initializedChunk: InitializedChunk<T> = (chunk: any);
+                const initializedChunk: InitializedChunk<T> = chunk as any;
                 wakeChunk(
                   response,
                   resolveListeners,
@@ -721,7 +721,7 @@ function triggerErrorOnChunk<T>(
   if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
     // If we get more data to an already resolved ID, we assume that it's
     // a stream chunk since any other row shouldn't have more than one entry.
-    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const streamChunk: InitializedStreamChunk<any> = chunk as any;
     const controller = streamChunk.reason;
     // $FlowFixMe[incompatible-type]: The error method should accept mixed.
     controller.error(error);
@@ -736,7 +736,7 @@ function triggerErrorOnChunk<T>(
       const prevHandler = initializingHandler;
       const prevChunk = initializingChunk;
       initializingHandler = null;
-      const cyclicChunk: BlockedChunk<T> = (chunk: any);
+      const cyclicChunk: BlockedChunk<T> = chunk as any;
       cyclicChunk.status = BLOCKED;
       cyclicChunk.value = null;
       cyclicChunk.reason = null;
@@ -761,7 +761,7 @@ function triggerErrorOnChunk<T>(
     }
   }
 
-  const erroredChunk: ErroredChunk<T> = (chunk: any);
+  const erroredChunk: ErroredChunk<T> = chunk as any;
   erroredChunk.status = ERRORED;
   erroredChunk.reason = error;
   if (listeners !== null) {
@@ -861,7 +861,7 @@ function resolveModelChunk<T>(
   if (chunk.status !== PENDING) {
     // If we get more data to an already resolved ID, we assume that it's
     // a stream chunk since any other row shouldn't have more than one entry.
-    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const streamChunk: InitializedStreamChunk<any> = chunk as any;
     const controller = streamChunk.reason;
     controller.enqueueModel(value);
     return;
@@ -869,7 +869,7 @@ function resolveModelChunk<T>(
   releasePendingChunk(response, chunk);
   const resolveListeners = chunk.value;
   const rejectListeners = chunk.reason;
-  const resolvedChunk: ResolvedModelChunk<T> = (chunk: any);
+  const resolvedChunk: ResolvedModelChunk<T> = chunk as any;
   resolvedChunk.status = RESOLVED_MODEL;
   resolvedChunk.value = value;
   resolvedChunk.reason = response;
@@ -895,7 +895,7 @@ function resolveModuleChunk<T>(
   releasePendingChunk(response, chunk);
   const resolveListeners = chunk.value;
   const rejectListeners = chunk.reason;
-  const resolvedChunk: ResolvedModuleChunk<T> = (chunk: any);
+  const resolvedChunk: ResolvedModuleChunk<T> = chunk as any;
   resolvedChunk.status = RESOLVED_MODULE;
   resolvedChunk.value = value;
   resolvedChunk.reason = null;
@@ -960,7 +960,7 @@ function initializeDebugChunk(
         }
         // Initializing the model for the first time.
         initializeModelChunk(debugChunk);
-        const initializedChunk = ((debugChunk: any): SomeChunk<any>);
+        const initializedChunk = debugChunk as any as SomeChunk<any>;
         switch (initializedChunk.status) {
           case INITIALIZED: {
             debugInfo[idx] = initializeDebugInfo(
@@ -1028,7 +1028,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
   // We go to the BLOCKED state until we've fully resolved this.
   // We do this before parsing in case we try to initialize the same chunk
   // while parsing the model. Such as in a cyclic reference.
-  const cyclicChunk: BlockedChunk<T> = (chunk: any);
+  const cyclicChunk: BlockedChunk<T> = chunk as any;
   cyclicChunk.status = BLOCKED;
   cyclicChunk.value = null;
   cyclicChunk.reason = null;
@@ -1075,7 +1075,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
         return;
       }
     }
-    const initializedChunk: InitializedChunk<T> = (chunk: any);
+    const initializedChunk: InitializedChunk<T> = chunk as any;
     initializedChunk.status = INITIALIZED;
     initializedChunk.value = value;
     initializedChunk.reason = null;
@@ -1084,7 +1084,7 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
       processChunkDebugInfo(response, initializedChunk, value);
     }
   } catch (error) {
-    const erroredChunk: ErroredChunk<T> = (chunk: any);
+    const erroredChunk: ErroredChunk<T> = chunk as any;
     erroredChunk.status = ERRORED;
     erroredChunk.reason = error;
   } finally {
@@ -1098,12 +1098,12 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
 function initializeModuleChunk<T>(chunk: ResolvedModuleChunk<T>): void {
   try {
     const value: T = requireModule(chunk.value);
-    const initializedChunk: InitializedChunk<T> = (chunk: any);
+    const initializedChunk: InitializedChunk<T> = chunk as any;
     initializedChunk.status = INITIALIZED;
     initializedChunk.value = value;
     initializedChunk.reason = null;
   } catch (error) {
-    const erroredChunk: ErroredChunk<T> = (chunk: any);
+    const erroredChunk: ErroredChunk<T> = chunk as any;
     erroredChunk.status = ERRORED;
     erroredChunk.reason = error;
   }
@@ -1240,7 +1240,7 @@ function initializeElement(
   element._debugStack = normalizedStackTrace;
   let task: null | ConsoleTask = null;
   if (supportsCreateTask && stack !== null) {
-    const createTaskFn = (console: any).createTask.bind(
+    const createTaskFn = (console as any).createTask.bind(
       console,
       getTaskName(element.type),
     );
@@ -1322,19 +1322,19 @@ function createElement(
   let element: any;
   if (__DEV__) {
     // `ref` is non-enumerable in dev
-    element = ({
+    element = {
       $$typeof: REACT_ELEMENT_TYPE,
       type,
       key,
       props,
       _owner: owner === undefined ? null : owner,
-    }: any);
+    } as any;
     Object.defineProperty(element, 'ref', {
       enumerable: false,
       get: nullRefGetter,
     });
   } else {
-    element = ({
+    element = {
       // This tag allows us to uniquely identify this as a React Element
       $$typeof: REACT_ELEMENT_TYPE,
 
@@ -1342,16 +1342,16 @@ function createElement(
       key,
       ref: null,
       props,
-    }: any);
+    } as any;
   }
 
   if (__DEV__) {
     // We don't really need to add any of these but keeping them for good measure.
     // Unfortunately, _store is enumerable in jest matchers so for equality to
     // work, I need to keep it or make _store non-enumerable in the other file.
-    element._store = ({}: {
+    element._store = {} as {
       validated?: number,
-    });
+    };
     Object.defineProperty(element._store, 'validated', {
       configurable: false,
       enumerable: false,
@@ -1463,7 +1463,7 @@ function getChunk(response: Response, id: number): SomeChunk<any> {
         // For partial streams, chunks accessed after close should be HALTED
         // (never resolve).
         chunk = createPendingChunk(response);
-        const haltedChunk: HaltedChunk<any> = (chunk: any);
+        const haltedChunk: HaltedChunk<any> = chunk as any;
         haltedChunk.status = HALTED;
         haltedChunk.value = null;
         haltedChunk.reason = null;
@@ -1673,7 +1673,7 @@ function fulfillReference(
       return;
     }
     const resolveListeners = chunk.value;
-    const initializedChunk: InitializedChunk<any> = (chunk: any);
+    const initializedChunk: InitializedChunk<any> = chunk as any;
     initializedChunk.status = INITIALIZED;
     initializedChunk.value = handler.value;
     initializedChunk.reason = handler.reason; // Used by streaming chunks
@@ -1762,7 +1762,7 @@ function waitForReference<T>(
       // If it's still pending that suggests that it was referencing an object in the debug
       // channel, but no debug channel was wired up so it's missing. In this case we can just
       // drop the debug info instead of halting the whole stream.
-      return (null: any);
+      return null as any;
     }
   }
 
@@ -1805,7 +1805,7 @@ function waitForReference<T>(
   }
 
   // Return a place holder value for now.
-  return (null: any);
+  return null as any;
 }
 
 function loadServerReference<A: Iterable<any>, T>(
@@ -1840,7 +1840,7 @@ function loadServerReference<A: Iterable<any>, T>(
   let promise: null | Thenable<any> = preloadModule(serverReference);
   if (!promise) {
     if (!metaData.bound) {
-      const resolvedValue = (requireModule(serverReference): any);
+      const resolvedValue = requireModule(serverReference) as any;
       registerBoundServerReference(
         resolvedValue,
         metaData.id,
@@ -1871,11 +1871,11 @@ function loadServerReference<A: Iterable<any>, T>(
   }
 
   function fulfill(): void {
-    let resolvedValue = (requireModule(serverReference): any);
+    let resolvedValue = requireModule(serverReference) as any;
 
     if (metaData.bound) {
       // This promise is coming from us and should have initilialized by now.
-      const boundArgs: Array<any> = (metaData.bound: any).value.slice(0);
+      const boundArgs: Array<any> = (metaData.bound as any).value.slice(0);
       boundArgs.unshift(null); // this
       resolvedValue = resolvedValue.bind.apply(resolvedValue, boundArgs);
     }
@@ -1927,7 +1927,7 @@ function loadServerReference<A: Iterable<any>, T>(
         return;
       }
       const resolveListeners = chunk.value;
-      const initializedChunk: InitializedChunk<T> = (chunk: any);
+      const initializedChunk: InitializedChunk<T> = chunk as any;
       initializedChunk.status = INITIALIZED;
       initializedChunk.value = handler.value;
       initializedChunk.reason = null;
@@ -1990,7 +1990,7 @@ function loadServerReference<A: Iterable<any>, T>(
   promise.then(fulfill, reject);
 
   // Return a place holder value for now.
-  return (null: any);
+  return null as any;
 }
 
 function resolveLazy(value: any): mixed {
@@ -2025,7 +2025,7 @@ function transferReferencedDebugInfo(
       for (let i = 0; i < referencedDebugInfo.length; ++i) {
         const debugInfoEntry = referencedDebugInfo[i];
         if (debugInfoEntry.name != null) {
-          (debugInfoEntry: ReactComponentInfo);
+          debugInfoEntry as ReactComponentInfo;
           // We're not transferring Component info since we use Component info
           // in Debug info to fill in gaps between Fibers for the parent stack.
         } else {
@@ -2112,7 +2112,7 @@ function getOutlinedModel<T>(
                   errored: false,
                 };
               }
-              return (null: any);
+              return null as any;
             }
             default: {
               // This is an error. Instead of erroring directly, we're going to encode this on
@@ -2131,7 +2131,7 @@ function getOutlinedModel<T>(
                   errored: true,
                 };
               }
-              return (null: any);
+              return null as any;
             }
           }
         }
@@ -2209,7 +2209,7 @@ function getOutlinedModel<T>(
           errored: false,
         };
       }
-      return (null: any);
+      return null as any;
     }
     default:
       // This is an error. Instead of erroring directly, we're going to encode this on
@@ -2229,7 +2229,7 @@ function getOutlinedModel<T>(
         };
       }
       // Placeholder
-      return (null: any);
+      return null as any;
   }
 }
 
@@ -2651,7 +2651,7 @@ function parseModelTuple(
   response: Response,
   value: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>,
 ): any {
-  const tuple: [mixed, mixed, mixed, mixed] = (value: any);
+  const tuple: [mixed, mixed, mixed, mixed] = value as any;
 
   if (tuple[0] === REACT_ELEMENT_TYPE) {
     // TODO: Consider having React just directly accept these arrays as elements.
@@ -2661,9 +2661,9 @@ function parseModelTuple(
       tuple[1],
       tuple[2],
       tuple[3],
-      __DEV__ ? (tuple: any)[4] : null,
-      __DEV__ ? (tuple: any)[5] : null,
-      __DEV__ ? (tuple: any)[6] : 0,
+      __DEV__ ? (tuple as any)[4] : null,
+      __DEV__ ? (tuple as any)[5] : null,
+      __DEV__ ? (tuple as any)[6] : 0,
     );
   }
   return value;
@@ -2730,7 +2730,7 @@ function ResponseInstance(
       ReactSharedInteralsServer === undefined ||
       ReactSharedInteralsServer.A === null
         ? null
-        : (ReactSharedInteralsServer.A.getOwner(): any);
+        : (ReactSharedInteralsServer.A.getOwner() as any);
 
     this._debugRootOwner = rootOwner;
     this._debugRootStack =
@@ -2746,7 +2746,7 @@ function ResponseInstance(
       // elements created by the server. We use the "use server" string to indicate that
       // this is where we enter the server from the client.
       // TODO: Make this string configurable.
-      this._debugRootTask = (console: any).createTask(
+      this._debugRootTask = (console as any).createTask(
         '"use ' + rootEnv.toLowerCase() + '"',
       );
     }
@@ -2850,19 +2850,19 @@ export function createStreamState(
   weakResponse: WeakResponse, // DEV-only
   streamDebugValue: mixed, // DEV-only
 ): StreamState {
-  const streamState: StreamState = (({
+  const streamState: StreamState = {
     _rowState: 0,
     _rowID: 0,
     _rowTag: 0,
     _rowLength: 0,
     _buffer: [],
-  }: Omit<StreamState, '_debugInfo' | '_debugTargetChunkSize'>): any);
+  } as Omit<StreamState, '_debugInfo' | '_debugTargetChunkSize'> as any;
   if (__DEV__ && enableAsyncDebugInfo) {
     const response = unwrapWeakResponse(weakResponse);
     // Create an entry for the I/O to load the stream itself.
     const debugValuePromise = Promise.resolve(streamDebugValue);
-    (debugValuePromise: any).status = 'fulfilled';
-    (debugValuePromise: any).value = streamDebugValue;
+    (debugValuePromise as any).status = 'fulfilled';
+    (debugValuePromise as any).value = streamDebugValue;
     streamState._debugInfo = {
       name: 'rsc stream',
       start: response._debugStartTime,
@@ -2896,7 +2896,7 @@ function incrementChunkDebugInfo(
     const debugInfo: ReactIOInfo = streamState._debugInfo;
     const endTime = performance.now();
     const previousEndTime = debugInfo.end;
-    const newByteLength = ((debugInfo.byteSize: any): number) + chunkLength;
+    const newByteLength = (debugInfo.byteSize as any as number) + chunkLength;
     if (
       newByteLength > streamState._debugTargetChunkSize ||
       endTime > previousEndTime + 10
@@ -2942,7 +2942,7 @@ function addAsyncInfo(chunk: SomeChunk<any>, asyncInfo: ReactAsyncInfo): void {
     } else if (!Object.isFrozen(value)) {
       // TODO: Debug info is dropped for frozen elements. See the TODO in
       // moveDebugInfoFromChunkToInnerValue.
-      Object.defineProperty((value: any), '_debugInfo', {
+      Object.defineProperty(value as any, '_debugInfo', {
         configurable: false,
         enumerable: false,
         writable: true,
@@ -2988,7 +2988,7 @@ function resolveDebugHalt(response: Response, id: number): void {
     return;
   }
   releasePendingChunk(response, chunk);
-  const haltedChunk: HaltedChunk<any> = (chunk: any);
+  const haltedChunk: HaltedChunk<any> = chunk as any;
   haltedChunk.status = HALTED;
   haltedChunk.value = null;
   haltedChunk.reason = null;
@@ -3030,7 +3030,7 @@ function resolveText(
   if (chunk && chunk.status !== PENDING) {
     // If we get more data to an already resolved ID, we assume that it's
     // a stream chunk since any other row shouldn't have more than one entry.
-    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const streamChunk: InitializedStreamChunk<any> = chunk as any;
     const controller = streamChunk.reason;
     controller.enqueueValue(text);
     return;
@@ -3056,7 +3056,7 @@ function resolveBuffer(
   if (chunk && chunk.status !== PENDING) {
     // If we get more data to an already resolved ID, we assume that it's
     // a stream chunk since any other row shouldn't have more than one entry.
-    const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+    const streamChunk: InitializedStreamChunk<any> = chunk as any;
     const controller = streamChunk.reason;
     controller.enqueueValue(buffer);
     return;
@@ -3109,7 +3109,7 @@ function resolveModule(
       releasePendingChunk(response, chunk);
       // This can't actually happen because we don't have any forward
       // references to modules.
-      blockedChunk = (chunk: any);
+      blockedChunk = chunk as any;
       blockedChunk.status = BLOCKED;
     }
     if (__DEV__) {
@@ -3171,7 +3171,7 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>(
       const prevHandler = initializingHandler;
       const prevChunk = initializingChunk;
       initializingHandler = null;
-      const cyclicChunk: BlockedChunk<T> = (chunk: any);
+      const cyclicChunk: BlockedChunk<T> = chunk as any;
       cyclicChunk.status = BLOCKED;
       cyclicChunk.value = null;
       cyclicChunk.reason = null;
@@ -3198,12 +3198,12 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>(
     }
   }
 
-  const resolvedChunk: InitializedStreamChunk<T> = (chunk: any);
+  const resolvedChunk: InitializedStreamChunk<T> = chunk as any;
   resolvedChunk.status = INITIALIZED;
   resolvedChunk.value = stream;
   resolvedChunk.reason = controller;
   if (resolveListeners !== null) {
-    wakeChunk(response, resolveListeners, chunk.value, (chunk: any));
+    wakeChunk(response, resolveListeners, chunk.value, chunk as any);
   } else {
     if (__DEV__) {
       processChunkDebugInfo(response, resolvedChunk, stream);
@@ -3217,7 +3217,7 @@ function startReadableStream<T>(
   type: void | 'bytes',
   streamState: StreamState,
 ): void {
-  let controller: ReadableStreamController = (null: any);
+  let controller: ReadableStreamController = null as any;
   let closed = false;
   const stream = new ReadableStream({
     type: type,
@@ -3252,7 +3252,7 @@ function startReadableStream<T>(
         } else {
           chunk.then(
             v => controller.enqueue(v),
-            e => controller.error((e: any)),
+            e => controller.error(e as any),
           );
           previousBlockedChunk = chunk;
         }
@@ -3262,7 +3262,7 @@ function startReadableStream<T>(
         const chunk: SomeChunk<T> = createPendingChunk(response);
         chunk.then(
           v => controller.enqueue(v),
-          e => controller.error((e: any)),
+          e => controller.error(e as any),
         );
         previousBlockedChunk = chunk;
         blockedChunk.then(function () {
@@ -3301,7 +3301,7 @@ function startReadableStream<T>(
         const blockedChunk = previousBlockedChunk;
         // We shouldn't get any more enqueues after this so we can set it back to null.
         previousBlockedChunk = null;
-        blockedChunk.then(() => controller.error((error: any)));
+        blockedChunk.then(() => controller.error(error as any));
       }
     },
   };
@@ -3323,7 +3323,7 @@ function createIterator<T>(
   // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
   // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
   // to satisfy the iterable protocol.
-  (iterator: any)[ASYNC_ITERATOR] = asyncIterator;
+  (iterator as any)[ASYNC_ITERATOR] = asyncIterator;
   return iterator;
 }
 
@@ -3345,13 +3345,13 @@ function startAsyncIterable<T>(
           false,
         );
       } else {
-        const chunk: PendingChunk<IteratorResult<T, T>> = (buffer[
+        const chunk: PendingChunk<IteratorResult<T, T>> = buffer[
           nextWriteIndex
-        ]: any);
+        ] as any;
         const resolveListeners = chunk.value;
         const rejectListeners = chunk.reason;
         const initializedChunk: InitializedChunk<IteratorResult<T, T>> =
-          (chunk: any);
+          chunk as any;
         initializedChunk.status = INITIALIZED;
         initializedChunk.value = {done: false, value: value};
         initializedChunk.reason = null;
@@ -3428,7 +3428,7 @@ function startAsyncIterable<T>(
     },
   };
 
-  const iterable: $AsyncIterable<T, T, void> = ({}: any);
+  const iterable: $AsyncIterable<T, T, void> = {} as any;
   // $FlowFixMe[cannot-write]
   iterable[ASYNC_ITERATOR] = (): $AsyncIterator<T, T, void> => {
     let nextReadIndex = 0;
@@ -3484,7 +3484,7 @@ function stopStream(
       response._weakResponse.response = null;
     }
   }
-  const streamChunk: InitializedStreamChunk<any> = (chunk: any);
+  const streamChunk: InitializedStreamChunk<any> = chunk as any;
   const controller = streamChunk.reason;
   controller.close(row === '' ? '"$undefined"' : row);
 }
@@ -3533,7 +3533,7 @@ function resolveErrorDev(
           cause: reviveModel(
             response,
             // $FlowFixMe[incompatible-type] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
-            (errorInfo.cause: JSONValue),
+            errorInfo.cause as JSONValue,
             errorInfo,
             'cause',
           ),
@@ -3547,7 +3547,7 @@ function resolveErrorDev(
       ? reviveModel(
           response,
           // $FlowFixMe[incompatible-type]
-          (errorInfo.errors: JSONValue),
+          errorInfo.errors as JSONValue,
           errorInfo,
           'errors',
         )
@@ -3597,8 +3597,8 @@ function resolveErrorDev(
     error = ownerTask.run(callStack);
   }
 
-  (error: any).name = name;
-  (error: any).environmentName = env;
+  (error as any).name = name;
+  (error as any).environmentName = env;
   return error;
 }
 
@@ -3617,8 +3617,8 @@ function resolveErrorModel(
   } else {
     error = resolveErrorProd(response);
   }
-  (error: any).digest = errorInfo.digest;
-  const errorWithDigest: ErrorWithDigest = (error: any);
+  (error as any).digest = errorInfo.digest;
+  const errorWithDigest: ErrorWithDigest = error as any;
   if (!chunk) {
     const newChunk: ErroredChunk<any> = createErrorChunk(
       response,
@@ -3645,12 +3645,12 @@ function resolveHint<Code: HintCode>(
   dispatchHint(code, hintModel);
 }
 
-const supportsCreateTask = __DEV__ && !!(console: any).createTask;
+const supportsCreateTask = __DEV__ && !!(console as any).createTask;
 
 type FakeFunction<T> = (() => T) => T;
 const fakeFunctionCache: Map<string, FakeFunction<any>> = __DEV__
   ? new Map()
-  : (null: any);
+  : (null as any);
 
 let fakeFunctionIdx = 0;
 function createFakeFunction<T>(
@@ -3882,7 +3882,7 @@ function getRootTask(
     // If the root most owner component is itself in a different environment than the requested
     // environment then we create an extra task to indicate that we're transitioning into it.
     // Like if one environment just requests another environment.
-    const createTaskFn = (console: any).createTask.bind(
+    const createTaskFn = (console as any).createTask.bind(
       console,
       '"use ' + childEnvironmentName.toLowerCase() + '"',
     );
@@ -3935,10 +3935,10 @@ function initializeFakeTask(
       ? '"use ' + env.toLowerCase() + '"'
       : // Some unfortunate pattern matching to refine the type.
         debugInfo.key !== undefined
-        ? getServerComponentTaskName(((debugInfo: any): ReactComponentInfo))
+        ? getServerComponentTaskName(debugInfo as any as ReactComponentInfo)
         : debugInfo.name !== undefined
-          ? getIOInfoTaskName(((debugInfo: any): ReactIOInfo))
-          : getAsyncInfoTaskName(((debugInfo: any): ReactAsyncInfo));
+          ? getIOInfoTaskName(debugInfo as any as ReactIOInfo)
+          : getAsyncInfoTaskName(debugInfo as any as ReactAsyncInfo);
   // $FlowFixMe[cannot-write]: We consider this part of initialization.
   return (debugInfo.debugTask = buildFakeTask(
     response,
@@ -3958,7 +3958,7 @@ function buildFakeTask(
   env: string,
   useEnclosingLine: boolean,
 ): ConsoleTask {
-  const createTaskFn = (console: any).createTask.bind(console, taskName);
+  const createTaskFn = (console as any).createTask.bind(console, taskName);
   const callStack = buildFakeCallStack(
     response,
     stack,
@@ -4003,8 +4003,8 @@ const createFakeJSXCallStackInDEV: (
   ? // We use this technique to trick minifiers to preserve the function name.
     (createFakeJSXCallStack.react_stack_bottom_frame.bind(
       createFakeJSXCallStack,
-    ): any)
-  : (null: any);
+    ) as any)
+  : (null as any);
 
 /** @noinline */
 function fakeJSXCallSite() {
@@ -4120,7 +4120,7 @@ function resolveDebugModel(
   initializeDebugChunk(response, parentChunk);
   if (
     __DEV__ &&
-    ((debugChunk: any): SomeChunk<any>).status === BLOCKED &&
+    (debugChunk as any as SomeChunk<any>).status === BLOCKED &&
     (response._debugChannel === undefined ||
       !response._debugChannel.hasReadable)
   ) {
@@ -4167,7 +4167,7 @@ const replayConsoleWithCallStack = {
     const prevStack = ReactSharedInternals.getCurrentStack;
     ReactSharedInternals.getCurrentStack = getCurrentStackInDEV;
     currentOwnerInDEV =
-      owner === null ? (response._debugRootOwner: any) : owner;
+      owner === null ? (response._debugRootOwner as any) : owner;
 
     try {
       const callStack = buildFakeCallStack(
@@ -4205,8 +4205,8 @@ const replayConsoleWithCallStackInDEV: (
   ? // We use this technique to trick minifiers to preserve the function name.
     (replayConsoleWithCallStack.react_stack_bottom_frame.bind(
       replayConsoleWithCallStack,
-    ): any)
-  : (null: any);
+    ) as any)
+  : (null as any);
 
 type ConsoleEntry = [
   string,
@@ -4290,7 +4290,7 @@ function initializeIOInfo(response: Response, ioInfo: ReactIOInfo): void {
     const env = response._rootEnvironmentName;
     const promise = ioInfo.value;
     if (promise) {
-      const thenable: Thenable<mixed> = (promise: any);
+      const thenable: Thenable<mixed> = promise as any;
       switch (thenable.status) {
         case INITIALIZED:
           logIOInfo(ioInfo, env, thenable.value);
@@ -4621,7 +4621,7 @@ function flushComponentPerformance(
             const env = response._rootEnvironmentName;
             const promise = asyncInfo.awaited.value;
             if (promise) {
-              const thenable: Thenable<mixed> = (promise: any);
+              const thenable: Thenable<mixed> = promise as any;
               switch (thenable.status) {
                 case INITIALIZED:
                   logComponentAwait(
@@ -4889,7 +4889,7 @@ function processFullStringRow(
       return;
     }
     case 72 /* "H" */: {
-      const code: HintCode = (row[0]: any);
+      const code: HintCode = row[0] as any;
       resolveHint(response, code, row.slice(1));
       return;
     }
@@ -5323,7 +5323,7 @@ function reviveModel(
   }
   if (isArray(value)) {
     for (let i = 0; i < value.length; i++) {
-      (value: any)[i] = reviveModel(response, value[i], value, '' + i);
+      (value as any)[i] = reviveModel(response, value[i], value, '' + i);
     }
     // $FlowFixMe[invalid-compare]
     if (value[0] === REACT_ELEMENT_TYPE) {
@@ -5335,13 +5335,13 @@ function reviveModel(
   // Plain object
   for (const k in value) {
     if (k === __PROTO__) {
-      delete (value: any)[k];
+      delete (value as any)[k];
     } else {
-      const walked = reviveModel(response, (value: any)[k], value, k);
+      const walked = reviveModel(response, (value as any)[k], value, k);
       if (walked !== undefined) {
-        (value: any)[k] = walked;
+        (value as any)[k] = walked;
       } else {
-        delete (value: any)[k];
+        delete (value as any)[k];
       }
     }
   }
@@ -5366,7 +5366,7 @@ export function close(weakResponse: WeakResponse): void {
         // Clear listeners to release closures and transition to HALTED.
         // Future .then() calls on HALTED chunks are no-ops.
         releasePendingChunk(response, chunk);
-        const haltedChunk: HaltedChunk<any> = (chunk: any);
+        const haltedChunk: HaltedChunk<any> = chunk as any;
         haltedChunk.status = HALTED;
         haltedChunk.value = null;
         haltedChunk.reason = null;

packages/react-client/src/ReactFlightReplyClient.js

@@ -415,7 +415,7 @@ export function processReply(
     }
 
     if (typeof value === 'object') {
-      switch ((value: any).$$typeof) {
+      switch ((value as any).$$typeof) {
         case REACT_ELEMENT_TYPE: {
           if (temporaryReferences !== undefined && key.indexOf(':') === -1) {
             // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
@@ -445,7 +445,7 @@ export function processReply(
         }
         case REACT_LAZY_TYPE: {
           // Resolve lazy as if it wasn't here. In the future this will be encoded as a Promise.
-          const lazy: LazyComponent<any, any> = (value: any);
+          const lazy: LazyComponent<any, any> = value as any;
           const payload = lazy._payload;
           const init = lazy._init;
           if (formData === null) {
@@ -472,7 +472,7 @@ export function processReply(
               // Suspended
               pendingParts++;
               const lazyId = nextPartId++;
-              const thenable: Thenable<any> = (x: any);
+              const thenable: Thenable<any> = x as any;
               const retry = function () {
                 // While the first promise resolved, its value isn't necessarily what we'll
                 // resolve into because we might suspend again.
@@ -529,7 +529,7 @@ export function processReply(
         const promiseId = nextPartId++;
         const promiseReference = serializePromiseID(promiseId);
         writtenObjects.set(value, promiseReference);
-        const thenable: Thenable<any> = (value: any);
+        const thenable: Thenable<any> = value as any;
         thenable.then(
           partValue => {
             try {
@@ -702,7 +702,7 @@ export function processReply(
           // Iterator, not Iterable
           const iteratorId = nextPartId++;
           const partJSON = serializeModel(
-            Array.from((iterator: any)),
+            Array.from(iterator as any),
             iteratorId,
           );
           if (formData === null) {
@@ -711,7 +711,7 @@ export function processReply(
           formData.append(formFieldPrefix + iteratorId, partJSON);
           return serializeIteratorID(iteratorId);
         }
-        return Array.from((iterator: any));
+        return Array.from(iterator as any);
       }
 
       // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
@@ -721,13 +721,14 @@ export function processReply(
       ) {
         return serializeReadableStream(value);
       }
-      const getAsyncIterator: void | (() => $AsyncIterator<any, any, any>) =
-        (value: any)[ASYNC_ITERATOR];
+      const getAsyncIterator: void | (() => $AsyncIterator<any, any, any>) = (
+        value as any
+      )[ASYNC_ITERATOR];
       if (typeof getAsyncIterator === 'function') {
         // We treat AsyncIterables as a Fragment and as such we might need to key them.
         return serializeAsyncIterable(
-          (value: any),
-          getAsyncIterator.call((value: any)),
+          value as any,
+          getAsyncIterator.call(value as any),
         );
       }
 
@@ -749,7 +750,7 @@ export function processReply(
         return serializeTemporaryReferenceMarker();
       }
       if (__DEV__) {
-        if ((value: any).$$typeof === REACT_CONTEXT_TYPE) {
+        if ((value as any).$$typeof === REACT_CONTEXT_TYPE) {
           console.error(
             'React Context Providers cannot be passed to Server Functions from the Client.%s',
             describeObjectForErrorMessage(parent, key),
@@ -945,13 +946,13 @@ function encodeFormData(reference: any): Thenable<FormData> {
         data.append('0', body);
         body = data;
       }
-      const fulfilled: FulfilledThenable<FormData> = (thenable: any);
+      const fulfilled: FulfilledThenable<FormData> = thenable as any;
       fulfilled.status = 'fulfilled';
       fulfilled.value = body;
       resolve(body);
     },
     e => {
-      const rejected: RejectedThenable<FormData> = (thenable: any);
+      const rejected: RejectedThenable<FormData> = thenable as any;
       rejected.status = 'rejected';
       rejected.reason = e;
       reject(e);
@@ -1023,7 +1024,7 @@ function customEncodeFormAction(
         'This is a bug in React.',
     );
   }
-  let boundPromise: Promise<Array<any>> = (referenceClosure.bound: any);
+  let boundPromise: Promise<Array<any>> = referenceClosure.bound as any;
   // $FlowFixMe[invalid-compare]
   if (boundPromise === null) {
     boundPromise = Promise.resolve([]);
@@ -1072,18 +1073,18 @@ function isSignatureEqual(
         // Only instrument the thenable if the status if not defined.
       } else {
         const pendingThenable: PendingThenable<Array<any>> =
-          (boundPromise: any);
+          boundPromise as any;
         pendingThenable.status = 'pending';
         pendingThenable.then(
           (boundArgs: Array<any>) => {
             const fulfilledThenable: FulfilledThenable<Array<any>> =
-              (boundPromise: any);
+              boundPromise as any;
             fulfilledThenable.status = 'fulfilled';
             fulfilledThenable.value = boundArgs;
           },
           (error: mixed) => {
             const rejectedThenable: RejectedThenable<number> =
-              (boundPromise: any);
+              boundPromise as any;
             rejectedThenable.status = 'rejected';
             rejectedThenable.reason = error;
           },
@@ -1220,7 +1221,7 @@ export function registerBoundServerReference<T: Function>(
               encodeFormAction,
             );
           };
-    Object.defineProperties((reference: any), {
+    Object.defineProperties(reference as any, {
       $$FORM_ACTION: {value: $$FORM_ACTION},
       $$IS_SIGNATURE_EQUAL: {value: isSignatureEqual},
       bind: {value: bind},
@@ -1266,7 +1267,7 @@ function bind(this: Function): Function {
   const args = ArraySlice.call(arguments, 1);
   let boundPromise = null;
   if (referenceClosure.bound !== null) {
-    boundPromise = Promise.resolve((referenceClosure.bound: any)).then(
+    boundPromise = Promise.resolve(referenceClosure.bound as any).then(
       boundArgs => boundArgs.concat(args),
     );
   } else {
@@ -1284,7 +1285,7 @@ function bind(this: Function): Function {
   // $FlowFixMe[constant-condition]
   if (usedWithSSR) {
     // Only expose this in builds that would actually use it. Not needed on the client.
-    Object.defineProperties((newFn: any), {
+    Object.defineProperties(newFn as any, {
       $$FORM_ACTION: {value: this.$$FORM_ACTION},
       $$IS_SIGNATURE_EQUAL: {value: isSignatureEqual},
       bind: {value: bind},
@@ -1326,7 +1327,7 @@ export function createBoundServerReference<A: Iterable<any>, T>(
     }
     // Since this is a fake Promise whose .then doesn't chain, we have to wrap it.
     // TODO: Remove the wrapper once that's fixed.
-    return ((Promise.resolve(p): any): Promise<Array<any>>).then(
+    return (Promise.resolve(p) as any as Promise<Array<any>>).then(
       function (boundArgs) {
         return callServer(id, boundArgs.concat(args));
       },

packages/react-client/src/ReactFlightTemporaryReferences.js

@@ -27,5 +27,5 @@ export function readTemporaryReference<T>(
   set: TemporaryReferenceSet,
   reference: string,
 ): T {
-  return (set.get(reference): any);
+  return set.get(reference) as any;
 }

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -74,7 +74,7 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
     let readHookLog;
     try {
       // Use all hooks here to add them to the hook log.
-      Dispatcher.useContext(({_currentValue: null}: any));
+      Dispatcher.useContext({_currentValue: null} as any);
       Dispatcher.useState(null);
       Dispatcher.useReducer((s: mixed, a: mixed) => s, null);
       Dispatcher.useRef(null);
@@ -106,23 +106,19 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       }
       if (typeof Dispatcher.use === 'function') {
         // This type check is for Flow only.
-        Dispatcher.use(
-          ({
-            $$typeof: REACT_CONTEXT_TYPE,
-            _currentValue: null,
-          }: any),
-        );
+        Dispatcher.use({
+          $$typeof: REACT_CONTEXT_TYPE,
+          _currentValue: null,
+        } as any);
         Dispatcher.use({
           then() {},
           status: 'fulfilled',
           value: null,
         });
         try {
-          Dispatcher.use(
-            ({
-              then() {},
-            }: any),
-          );
+          Dispatcher.use({
+            then() {},
+          } as any);
         } catch (x) {}
       }
 
@@ -174,7 +170,7 @@ function readContext<T>(context: ReactContext<T>): T {
     // For now we don't expose readContext usage in the hooks debugging info.
     if (hasOwnProperty.call(currentContextDependency, 'memoizedValue')) {
       // $FlowFixMe[incompatible-use] Flow thinks `hasOwnProperty` mutates `currentContextDependency`
-      value = ((currentContextDependency.memoizedValue: any): T);
+      value = currentContextDependency.memoizedValue as any as T;
 
       // $FlowFixMe[incompatible-use] Flow thinks `hasOwnProperty` mutates `currentContextDependency`
       currentContextDependency = currentContextDependency.next;
@@ -211,7 +207,7 @@ function use<T>(usable: Usable<T>): T {
         currentThenableState !== null &&
         currentThenableIndex < currentThenableState.length
           ? currentThenableState[currentThenableIndex++]
-          : (usable: any);
+          : (usable as any);
 
       switch (thenable.status) {
         case 'fulfilled': {
@@ -245,7 +241,7 @@ function use<T>(usable: Usable<T>): T {
       });
       throw SuspenseException;
     } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
-      const context: ReactContext<T> = (usable: any);
+      const context: ReactContext<T> = usable as any;
       const value = readContext(context);
 
       hookLog.push({
@@ -310,7 +306,7 @@ function useReducer<S, I, A>(
   if (hook !== null) {
     state = hook.memoizedState;
   } else {
-    state = init !== undefined ? init(initialArg) : ((initialArg: any): S);
+    state = init !== undefined ? init(initialArg) : (initialArg as any as S);
   }
   hookLog.push({
     displayName: null,
@@ -608,7 +604,7 @@ function useFormState<S, P>(
       // $FlowFixMe[method-unbinding]
       typeof actionResult.then === 'function'
     ) {
-      const thenable: Thenable<Awaited<S>> = (actionResult: any);
+      const thenable: Thenable<Awaited<S>> = actionResult as any;
       switch (thenable.status) {
         case 'fulfilled': {
           value = thenable.value;
@@ -630,7 +626,7 @@ function useFormState<S, P>(
           value = thenable;
       }
     } else {
-      value = (actionResult: any);
+      value = actionResult as any;
     }
   } else {
     value = initialState;
@@ -651,7 +647,7 @@ function useFormState<S, P>(
 
   // value being a Thenable is equivalent to error being not null
   // i.e. we only reach this point with Awaited<S>
-  const state = ((value: any): Awaited<S>);
+  const state = value as any as Awaited<S>;
 
   // TODO: support displaying pending value
   return [state, (payload: P) => {}, false];
@@ -678,7 +674,7 @@ function useActionState<S, P>(
       // $FlowFixMe[method-unbinding]
       typeof actionResult.then === 'function'
     ) {
-      const thenable: Thenable<Awaited<S>> = (actionResult: any);
+      const thenable: Thenable<Awaited<S>> = actionResult as any;
       switch (thenable.status) {
         case 'fulfilled': {
           value = thenable.value;
@@ -700,7 +696,7 @@ function useActionState<S, P>(
           value = thenable;
       }
     } else {
-      value = (actionResult: any);
+      value = actionResult as any;
     }
   } else {
     value = initialState;
@@ -721,7 +717,7 @@ function useActionState<S, P>(
 
   // value being a Thenable is equivalent to error being not null
   // i.e. we only reach this point with Awaited<S>
-  const state = ((value: any): Awaited<S>);
+  const state = value as any as Awaited<S>;
 
   // TODO: support displaying pending value
   return [state, (payload: P) => {}, false];
@@ -731,10 +727,10 @@ function useHostTransitionStatus(): TransitionStatus {
   const status = readContext<TransitionStatus>(
     // $FlowFixMe[prop-missing] `readContext` only needs _currentValue
     // $FlowFixMe[incompatible-type]
-    ({
+    {
       // $FlowFixMe[incompatible-type] TODO: Incorrect bottom value without access to Fiber config.
       _currentValue: null,
-    }: ReactContext<TransitionStatus>),
+    } as ReactContext<TransitionStatus>,
   );
 
   hookLog.push({
@@ -1228,7 +1224,7 @@ export function inspectHooks<Props>(
   }
   const rootStack =
     ancestorStackError === undefined
-      ? ([]: ParsedStackFrame[])
+      ? ([] as Array<ParsedStackFrame>)
       : ErrorStackParser.parse(ancestorStackError);
   return buildTree(rootStack, readHookLog);
 }
@@ -1238,9 +1234,9 @@ function setupContexts(contextMap: Map<ReactContext<any>, any>, fiber: Fiber) {
   while (current) {
     if (current.tag === ContextProvider) {
       let context: ReactContext<any> = current.type;
-      if ((context: any)._context !== undefined) {
+      if ((context as any)._context !== undefined) {
         // Support inspection of pre-19+ providers.
-        context = (context: any)._context;
+        context = (context as any)._context;
       }
       if (!contextMap.has(context)) {
         // Store the current value that we're going to restore later.
@@ -1279,7 +1275,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
   }
   const rootStack =
     ancestorStackError === undefined
-      ? ([]: ParsedStackFrame[])
+      ? ([] as Array<ParsedStackFrame>)
       : ErrorStackParser.parse(ancestorStackError);
   return buildTree(rootStack, readHookLog);
 }
@@ -1324,7 +1320,7 @@ export function inspectHooksOfFiber(
 
   // Set up the current hook so that we can step through and read the
   // current state from them.
-  currentHook = (fiber.memoizedState: Hook);
+  currentHook = fiber.memoizedState as Hook;
   currentFiber = fiber;
   const thenableState =
     fiber.dependencies && fiber.dependencies._debugThenableState;
@@ -1341,17 +1337,17 @@ export function inspectHooksOfFiber(
     currentContextDependency =
       dependencies !== null ? dependencies.firstContext : null;
   } else if (hasOwnProperty.call(currentFiber, 'dependencies_old')) {
-    const dependencies: Dependencies = (currentFiber: any).dependencies_old;
+    const dependencies: Dependencies = (currentFiber as any).dependencies_old;
     currentContextDependency =
       // $FlowFixMe[invalid-compare]
       dependencies !== null ? dependencies.firstContext : null;
   } else if (hasOwnProperty.call(currentFiber, 'dependencies_new')) {
-    const dependencies: Dependencies = (currentFiber: any).dependencies_new;
+    const dependencies: Dependencies = (currentFiber as any).dependencies_new;
     currentContextDependency =
       // $FlowFixMe[invalid-compare]
       dependencies !== null ? dependencies.firstContext : null;
   } else if (hasOwnProperty.call(currentFiber, 'contextDependencies')) {
-    const contextDependencies = (currentFiber: any).contextDependencies;
+    const contextDependencies = (currentFiber as any).contextDependencies;
     currentContextDependency =
       contextDependencies !== null ? contextDependencies.first : null;
   } else {

packages/react-devtools-core/src/backend.js

@@ -99,7 +99,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
     useHttps = false,
     port = 8097,
     websocket,
-    resolveRNStyle = (null: $FlowFixMe),
+    resolveRNStyle = null as $FlowFixMe,
     retryConnectionDelay = 2000,
     isAppActive = () => true,
     onSettingsUpdated,
@@ -217,7 +217,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
         bridge,
         agent,
         // $FlowFixMe[constant-condition]
-        ((resolveRNStyle || hook.resolveRNStyle: any): ResolveNativeStyle),
+        (resolveRNStyle || hook.resolveRNStyle) as any as ResolveNativeStyle,
         nativeStyleEditorValidAttributes ||
           hook.nativeStyleEditorValidAttributes ||
           null,
@@ -241,36 +241,28 @@ export function connectToDevTools(options: ?ConnectOptions) {
       };
 
       if (!hook.hasOwnProperty('resolveRNStyle')) {
-        Object.defineProperty(
-          hook,
-          'resolveRNStyle',
-          ({
-            enumerable: false,
-            get() {
-              return lazyResolveRNStyle;
-            },
-            set(value: $FlowFixMe) {
-              lazyResolveRNStyle = value;
-              initAfterTick();
-            },
-          }: Object),
-        );
+        Object.defineProperty(hook, 'resolveRNStyle', {
+          enumerable: false,
+          get() {
+            return lazyResolveRNStyle;
+          },
+          set(value: $FlowFixMe) {
+            lazyResolveRNStyle = value;
+            initAfterTick();
+          },
+        } as Object);
       }
       if (!hook.hasOwnProperty('nativeStyleEditorValidAttributes')) {
-        Object.defineProperty(
-          hook,
-          'nativeStyleEditorValidAttributes',
-          ({
-            enumerable: false,
-            get() {
-              return lazyNativeStyleEditorValidAttributes;
-            },
-            set(value: $FlowFixMe) {
-              lazyNativeStyleEditorValidAttributes = value;
-              initAfterTick();
-            },
-          }: Object),
-        );
+        Object.defineProperty(hook, 'nativeStyleEditorValidAttributes', {
+          enumerable: false,
+          get() {
+            return lazyNativeStyleEditorValidAttributes;
+          },
+          set(value: $FlowFixMe) {
+            lazyNativeStyleEditorValidAttributes = value;
+            initAfterTick();
+          },
+        } as Object);
       }
     }
   };
@@ -311,7 +303,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
       }
     } catch (e) {
       console.error(
-        '[React DevTools] Failed to parse JSON: ' + (event.data: any),
+        '[React DevTools] Failed to parse JSON: ' + (event.data as any),
       );
       return;
     }

packages/react-devtools-core/src/standalone.js

@@ -32,7 +32,7 @@ export type StatusTypes = 'server-connected' | 'devtools-connected' | 'error';
 export type StatusListener = (message: string, status: StatusTypes) => void;
 export type OnDisconnectedCallback = () => void;
 
-let node: HTMLElement = ((null: any): HTMLElement);
+let node: HTMLElement = null as any as HTMLElement;
 let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
 let statusListener: StatusListener = (
@@ -112,11 +112,11 @@ function reload() {
     root = createRoot(node);
     root.render(
       createElement(DevTools, {
-        bridge: ((bridge: any): FrontendBridge),
+        bridge: bridge as any as FrontendBridge,
         canViewElementSourceFunction,
         hookNamesModuleLoaderFunction,
         showTabBar: true,
-        store: ((store: any): Store),
+        store: store as any as Store,
         warnIfLegacyBackendDetected: true,
         viewElementSourceFunction,
         fetchFileWithCaching,
@@ -263,7 +263,7 @@ function initialize(socket: WebSocket) {
       }
     },
   });
-  ((bridge: any): FrontendBridge).addListener('shutdown', () => {
+  (bridge as any as FrontendBridge).addListener('shutdown', () => {
     socket.close();
   });
 

packages/react-devtools-extensions/src/main/index.js

@@ -486,10 +486,10 @@ function performInTabNavigationCleanup() {
   // Do not clean mostRecentOverrideTab on purpose, so we remember last opened
   // React DevTools tab, when user does in-tab navigation
 
-  store = (null: $FlowFixMe);
-  bridge = (null: $FlowFixMe);
-  render = (null: $FlowFixMe);
-  root = (null: $FlowFixMe);
+  store = null as $FlowFixMe;
+  bridge = null as $FlowFixMe;
+  render = null as $FlowFixMe;
+  root = null as $FlowFixMe;
 }
 
 function performFullCleanup() {
@@ -511,15 +511,15 @@ function performFullCleanup() {
   componentsPortalContainer = null;
   profilerPortalContainer = null;
   suspensePortalContainer = null;
-  root = (null: $FlowFixMe);
+  root = null as $FlowFixMe;
 
   mostRecentOverrideTab = null;
-  store = (null: $FlowFixMe);
-  bridge = (null: $FlowFixMe);
-  render = (null: $FlowFixMe);
+  store = null as $FlowFixMe;
+  bridge = null as $FlowFixMe;
+  render = null as $FlowFixMe;
 
   port?.disconnect();
-  port = (null: $FlowFixMe);
+  port = null as $FlowFixMe;
 }
 
 function connectExtensionPort(): void {
@@ -546,7 +546,7 @@ function connectExtensionPort(): void {
   // so, when we call `port.disconnect()` from this script,
   // this should not trigger this callback and port reconnection
   port.onDisconnect.addListener(() => {
-    port = (null: $FlowFixMe);
+    port = null as $FlowFixMe;
     connectExtensionPort();
   });
 }
@@ -599,9 +599,9 @@ function mountReactDevToolsWhenReactHasLoaded() {
   );
 }
 
-let bridge: FrontendBridge = (null: $FlowFixMe);
+let bridge: FrontendBridge = null as $FlowFixMe;
 let lastSubscribedBridgeListener = null;
-let store: Store = (null: $FlowFixMe);
+let store: Store = null as $FlowFixMe;
 
 let profilingData = null;
 
@@ -617,12 +617,12 @@ let editorPortalContainer = null;
 let inspectedElementPortalContainer = null;
 
 let mostRecentOverrideTab: null | TabID = null;
-let render: (overrideTab?: TabID) => void = (null: $FlowFixMe);
-let root: RootType = (null: $FlowFixMe);
+let render: (overrideTab?: TabID) => void = null as $FlowFixMe;
+let root: RootType = null as $FlowFixMe;
 
 let currentSelectedSource: null | SourceSelection = null;
 
-let port: ExtensionRuntimePort = (null: $FlowFixMe);
+let port: ExtensionRuntimePort = null as $FlowFixMe;
 
 // In case when multiple navigation events emitted in a short period of time
 // This debounced callback primarily used to avoid mounting React DevTools multiple times, which results

packages/react-devtools-inline/src/backend.js

@@ -109,7 +109,7 @@ export function createBridge(contentWindow: any, wall?: Wall): BackendBridge {
     };
   }
 
-  return (new Bridge(wall): BackendBridge);
+  return new Bridge(wall) as BackendBridge;
 }
 
 export function initialize(contentWindow: any): void {

packages/react-devtools-inline/src/frontend.js

@@ -40,7 +40,7 @@ export function createBridge(contentWindow: any, wall?: Wall): FrontendBridge {
     };
   }
 
-  return (new Bridge(wall): FrontendBridge);
+  return new Bridge(wall) as FrontendBridge;
 }
 
 export function initialize(
@@ -58,7 +58,7 @@ export function initialize(
   }
 
   // Type refinement.
-  const frontendBridge = ((bridge: any): FrontendBridge);
+  const frontendBridge = bridge as any as FrontendBridge;
 
   if (store == null) {
     store = createStore(frontendBridge);

packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js

@@ -97,14 +97,11 @@ function measureStyle(
 ) {
   const data = agent.getInstanceAndStyle({id, rendererID});
   if (!data || !data.style) {
-    bridge.send(
-      'NativeStyleEditor_styleAndLayout',
-      ({
-        id,
-        layout: null,
-        style: null,
-      }: StyleAndLayout),
-    );
+    bridge.send('NativeStyleEditor_styleAndLayout', {
+      id,
+      layout: null,
+      style: null,
+    } as StyleAndLayout);
     return;
   }
 
@@ -119,14 +116,11 @@ function measureStyle(
   }
 
   if (!instance || typeof instance.measure !== 'function') {
-    bridge.send(
-      'NativeStyleEditor_styleAndLayout',
-      ({
-        id,
-        layout: null,
-        style: resolvedStyle || null,
-      }: StyleAndLayout),
-    );
+    bridge.send('NativeStyleEditor_styleAndLayout', {
+      id,
+      layout: null,
+      style: resolvedStyle || null,
+    } as StyleAndLayout);
     return;
   }
 
@@ -134,14 +128,11 @@ function measureStyle(
     // RN Android sometimes returns undefined here. Don't send measurements in this case.
     // https://github.com/jhen0409/react-native-debugger/issues/84#issuecomment-304611817
     if (typeof x !== 'number') {
-      bridge.send(
-        'NativeStyleEditor_styleAndLayout',
-        ({
-          id,
-          layout: null,
-          style: resolvedStyle || null,
-        }: StyleAndLayout),
-      );
+      bridge.send('NativeStyleEditor_styleAndLayout', {
+        id,
+        layout: null,
+        style: resolvedStyle || null,
+      } as StyleAndLayout);
       return;
     }
     const margin =
@@ -150,23 +141,20 @@ function measureStyle(
     const padding =
       (resolvedStyle != null && resolveBoxStyle('padding', resolvedStyle)) ||
       EMPTY_BOX_STYLE;
-    bridge.send(
-      'NativeStyleEditor_styleAndLayout',
-      ({
-        id,
-        layout: {
-          x,
-          y,
-          width,
-          height,
-          left,
-          top,
-          margin,
-          padding,
-        },
-        style: resolvedStyle || null,
-      }: StyleAndLayout),
-    );
+    bridge.send('NativeStyleEditor_styleAndLayout', {
+      id,
+      layout: {
+        x,
+        y,
+        width,
+        height,
+        left,
+        top,
+        margin,
+        padding,
+      },
+      style: resolvedStyle || null,
+    } as StyleAndLayout);
   });
 }
 
@@ -194,7 +182,7 @@ function renameStyle(
   const {instance, style} = data;
 
   const newStyle = newName
-    ? {[oldName]: (undefined: string | void), [newName]: value}
+    ? {[oldName]: undefined as string | void, [newName]: value}
     : {[oldName]: undefined};
 
   let customStyle;

packages/react-devtools-shared/src/backend/StyleX/utils.js

@@ -82,7 +82,7 @@ function crawlObjectProperties(
 
 function getPropertyValueForStyleName(styleName: string): string | null {
   if (cachedStyleNameToValueMap.has(styleName)) {
-    return ((cachedStyleNameToValueMap.get(styleName): any): string);
+    return cachedStyleNameToValueMap.get(styleName) as any as string;
   }
 
   for (
@@ -90,9 +90,9 @@ function getPropertyValueForStyleName(styleName: string): string | null {
     styleSheetIndex < document.styleSheets.length;
     styleSheetIndex++
   ) {
-    const styleSheet = ((document.styleSheets[
+    const styleSheet = document.styleSheets[
       styleSheetIndex
-    ]: any): CSSStyleSheet);
+    ] as any as CSSStyleSheet;
     let rules: CSSRuleList | null = null;
     // this might throw if CORS rules are enforced https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
     try {
@@ -105,7 +105,7 @@ function getPropertyValueForStyleName(styleName: string): string | null {
       if (!(rules[ruleIndex] instanceof CSSStyleRule)) {
         continue;
       }
-      const rule = ((rules[ruleIndex]: any): CSSStyleRule);
+      const rule = rules[ruleIndex] as any as CSSStyleRule;
       const {cssText, selectorText, style} = rule;
 
       if (selectorText != null) {

packages/react-devtools-shared/src/backend/agent.js

@@ -226,9 +226,9 @@ function mergeRoots(
   }
 
   const leftSuspendedBy: DehydratedData = left.suspendedBy;
-  const {data, cleaned, unserializable} = (right.suspendedBy: DehydratedData);
-  const leftSuspendedByData = ((leftSuspendedBy.data: any): Array<mixed>);
-  const rightSuspendedByData = ((data: any): Array<mixed>);
+  const {data, cleaned, unserializable} = right.suspendedBy as DehydratedData;
+  const leftSuspendedByData = leftSuspendedBy.data as any as Array<mixed>;
+  const rightSuspendedByData = data as any as Array<mixed>;
   for (let i = 0; i < rightSuspendedByData.length; i++) {
     leftSuspendedByData.push(rightSuspendedByData[i]);
   }
@@ -464,9 +464,9 @@ export default class Agent extends EventEmitter<{
     if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') {
       // In React Native or non-DOM we simply pick any renderer that has a match.
       for (const rendererID in this._rendererInterfaces) {
-        const renderer = ((this._rendererInterfaces[
-          (rendererID: any)
-        ]: any): RendererInterface);
+        const renderer = this._rendererInterfaces[
+          rendererID as any
+        ] as any as RendererInterface;
         try {
           const id = onlySuspenseNodes
             ? renderer.getSuspenseNodeIDForHostInstance(target)
@@ -491,11 +491,11 @@ export default class Agent extends EventEmitter<{
       let bestRendererID: number = 0;
       // Find the nearest ancestor which is mounted by a React.
       for (const rendererID in this._rendererInterfaces) {
-        const renderer = ((this._rendererInterfaces[
-          (rendererID: any)
-        ]: any): RendererInterface);
+        const renderer = this._rendererInterfaces[
+          rendererID as any
+        ] as any as RendererInterface;
         const nearestNode: null | Element = renderer.getNearestMountedDOMNode(
-          (target: any),
+          target as any,
         );
         if (nearestNode !== null) {
           if (nearestNode === target) {
@@ -537,9 +537,9 @@ export default class Agent extends EventEmitter<{
   getComponentNameForHostInstance(target: HostInstance): string | null {
     const match = this.getIDForHostInstance(target);
     if (match !== null) {
-      const renderer = ((this._rendererInterfaces[
-        (match.rendererID: any)
-      ]: any): RendererInterface);
+      const renderer = this._rendererInterfaces[
+        match.rendererID as any
+      ] as any as RendererInterface;
       return renderer.getDisplayNameForElementID(match.id);
     }
     return null;
@@ -575,7 +575,7 @@ export default class Agent extends EventEmitter<{
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
       const owners = renderer.getOwnersList(id);
-      this._bridge.send('ownersList', ({id, owners}: OwnersList));
+      this._bridge.send('ownersList', {id, owners} as OwnersList);
     }
   };
 
@@ -653,9 +653,9 @@ export default class Agent extends EventEmitter<{
     }
 
     for (const rendererID in this._rendererInterfaces) {
-      const renderer = ((this._rendererInterfaces[
-        (rendererID: any)
-      ]: any): RendererInterface);
+      const renderer = this._rendererInterfaces[
+        rendererID as any
+      ] as any as RendererInterface;
       let path: InspectElementParams['path'] = null;
       if (suspendedByPathIndex !== null && rendererPath !== null) {
         const suspendedByPathRendererIndex =
@@ -709,14 +709,14 @@ export default class Agent extends EventEmitter<{
           mergeRoots(inspectedScreen, inspectedRoots, suspendedByOffset);
           const dehydratedSuspendedBy: DehydratedData =
             inspectedRoots.suspendedBy;
-          const suspendedBy = ((dehydratedSuspendedBy.data: any): Array<mixed>);
+          const suspendedBy = dehydratedSuspendedBy.data as any as Array<mixed>;
           suspendedByOffset += suspendedBy.length;
           found = true;
           break;
         case 'no-change':
           found = true;
           const rootsSuspendedBy: Array<mixed> =
-            (renderer.getElementAttributeByPath(id, ['suspendedBy']): any);
+            renderer.getElementAttributeByPath(id, ['suspendedBy']) as any;
           suspendedByOffset += rootsSuspendedBy.length;
           break;
         case 'not-found':
@@ -792,9 +792,9 @@ export default class Agent extends EventEmitter<{
     rendererID,
     suspendedSet,
   }) => {
-    const renderer = ((this._rendererInterfaces[
-      (rendererID: any)
-    ]: any): RendererInterface);
+    const renderer = this._rendererInterfaces[
+      rendererID as any
+    ] as any as RendererInterface;
     if (renderer.supportsTogglingSuspense) {
       renderer.overrideSuspenseMilestone(suspendedSet);
     }
@@ -978,9 +978,9 @@ export default class Agent extends EventEmitter<{
       setTraceUpdatesEnabled(traceUpdatesEnabled);
 
       for (const rendererID in this._rendererInterfaces) {
-        const renderer = ((this._rendererInterfaces[
-          (rendererID: any)
-        ]: any): RendererInterface);
+        const renderer = this._rendererInterfaces[
+          rendererID as any
+        ] as any as RendererInterface;
         renderer.setTraceUpdatesEnabled(traceUpdatesEnabled);
       }
     };
@@ -1004,9 +1004,9 @@ export default class Agent extends EventEmitter<{
   }) => void = ({recordChangeDescriptions, recordTimeline}) => {
     this._isProfiling = true;
     for (const rendererID in this._rendererInterfaces) {
-      const renderer = ((this._rendererInterfaces[
-        (rendererID: any)
-      ]: any): RendererInterface);
+      const renderer = this._rendererInterfaces[
+        rendererID as any
+      ] as any as RendererInterface;
       renderer.startProfiling(recordChangeDescriptions, recordTimeline);
     }
     this._bridge.send('profilingStatus', this._isProfiling);
@@ -1015,9 +1015,9 @@ export default class Agent extends EventEmitter<{
   stopProfiling: () => void = () => {
     this._isProfiling = false;
     for (const rendererID in this._rendererInterfaces) {
-      const renderer = ((this._rendererInterfaces[
-        (rendererID: any)
-      ]: any): RendererInterface);
+      const renderer = this._rendererInterfaces[
+        rendererID as any
+      ] as any as RendererInterface;
       renderer.stopProfiling();
     }
     this._bridge.send('profilingStatus', this._isProfiling);
@@ -1060,9 +1060,9 @@ export default class Agent extends EventEmitter<{
     componentFilters => {
       for (const rendererIDString in this._rendererInterfaces) {
         const rendererID = +rendererIDString;
-        const renderer = ((this._rendererInterfaces[
-          (rendererID: any)
-        ]: any): RendererInterface);
+        const renderer = this._rendererInterfaces[
+          rendererID as any
+        ] as any as RendererInterface;
         if (this._lastSelectedRendererID === rendererID) {
           // Changing component filters will unmount and remount the DevTools tree.
           // Track the last selection's path so we can restore the selection.
@@ -1204,7 +1204,7 @@ export default class Agent extends EventEmitter<{
     if (path !== null) {
       sessionStorageSetItem(
         SESSION_STORAGE_LAST_SELECTION_KEY,
-        JSON.stringify(({rendererID, path}: PersistedSelection)),
+        JSON.stringify({rendererID, path} as PersistedSelection),
       );
     } else {
       sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);

packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js

@@ -165,7 +165,7 @@ export function getOwnerStackByFiberInDev(
     if (workInProgress.tag === HostText) {
       // Text nodes never have an owner/stack because they're not created through JSX.
       // We use the parent since text nodes are always created through a host parent.
-      workInProgress = (workInProgress.return: any);
+      workInProgress = workInProgress.return as any;
     }
 
     // The owner stack of the current fiber will be where it was created, i.e. inside its owner.
@@ -197,7 +197,7 @@ export function getOwnerStackByFiberInDev(
 
     while (owner) {
       if (typeof owner.tag === 'number') {
-        const fiber: Fiber = (owner: any);
+        const fiber: Fiber = owner as any;
         owner = fiber._debugOwner;
         let debugStack: void | null | string | Error = fiber._debugStack;
         // If we don't actually print the stack if there is no owner of this JSX element.

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -215,7 +215,7 @@ function createFiberInstance(fiber: Fiber): FiberInstance {
 
 // This is used to represent a filtered Fiber but still lets us find its host instance.
 function createFilteredFiberInstance(fiber: Fiber): FilteredFiberInstance {
-  return ({
+  return {
     kind: FILTERED_FIBER_INSTANCE,
     id: 0,
     parent: null,
@@ -227,7 +227,7 @@ function createFilteredFiberInstance(fiber: Fiber): FilteredFiberInstance {
     suspendedBy: null,
     suspenseNode: null,
     data: fiber,
-  }: any);
+  } as any;
 }
 
 function createVirtualInstance(
@@ -290,14 +290,14 @@ export function getDispatcherRef(renderer: {
     // We got a legacy dispatcher injected, let's create a wrapper proxy to translate.
     return {
       get H() {
-        return (injectedRef: any).current;
+        return (injectedRef as any).current;
       },
       set H(value) {
-        (injectedRef: any).current = value;
+        (injectedRef as any).current = value;
       },
     };
   }
-  return (injectedRef: any);
+  return injectedRef as any;
 }
 
 // All environment names we've seen so far. This lets us create a list of filters to apply.
@@ -971,7 +971,7 @@ export function attach(
       currentRoot = rootInstance;
       unmountInstanceRecursively(rootInstance);
       rootToFiberInstanceMap.delete(root);
-      currentRoot = (null: any);
+      currentRoot = null as any;
     });
 
     if (
@@ -1040,7 +1040,7 @@ export function attach(
       currentRoot = newRoot;
       setRootPseudoKey(currentRoot.id, root.current);
       mountFiberRecursively(root.current, false);
-      currentRoot = (null: any);
+      currentRoot = null as any;
     });
 
     // We need to write back the new ID for the focused Fiber.
@@ -1278,7 +1278,7 @@ export function attach(
   }
 
   // When a mount or update is in progress, this value tracks the root that is being operated on.
-  let currentRoot: FiberInstance = (null: any);
+  let currentRoot: FiberInstance = null as any;
 
   // Removes a Fiber (and its alternate) from the Maps used to track their id.
   // This method should always be called when a Fiber is unmounting.
@@ -2884,7 +2884,7 @@ export function attach(
         for (let i = 0; i < debugInfo.length; i++) {
           const debugEntry = debugInfo[i];
           if (debugEntry.awaited) {
-            const asyncInfo: ReactAsyncInfo = (debugEntry: any);
+            const asyncInfo: ReactAsyncInfo = debugEntry as any;
             insertSuspendedBy(asyncInfo);
           }
         }
@@ -2917,7 +2917,7 @@ export function attach(
         for (let j = 0; j < debugInfo.length; j++) {
           const debugEntry = debugInfo[j];
           if (debugEntry.awaited) {
-            const asyncInfo: ReactAsyncInfo = (debugEntry: any);
+            const asyncInfo: ReactAsyncInfo = debugEntry as any;
             insertSuspendedBy(asyncInfo);
           }
         }
@@ -2989,14 +2989,14 @@ export function attach(
           start = resourceEntry.startTime;
           end = start + resourceEntry.duration;
           // $FlowFixMe[prop-missing]
-          byteSize = (resourceEntry.transferSize: any) || 0;
+          byteSize = (resourceEntry.transferSize as any) || 0;
         }
       }
     }
     const value = instance.sheet;
     const promise = Promise.resolve(value);
-    (promise: any).status = 'fulfilled';
-    (promise: any).value = value;
+    (promise as any).status = 'fulfilled';
+    (promise as any).value = value;
     const ioInfo: ReactIOInfo = {
       name: 'stylesheet',
       start,
@@ -3085,9 +3085,9 @@ export function attach(
           start = resourceEntry.startTime;
           end = start + resourceEntry.duration;
           // $FlowFixMe[prop-missing]
-          fileSize = (resourceEntry.decodedBodySize: any) || 0;
+          fileSize = (resourceEntry.decodedBodySize as any) || 0;
           // $FlowFixMe[prop-missing]
-          byteSize = (resourceEntry.transferSize: any) || 0;
+          byteSize = (resourceEntry.transferSize as any) || 0;
         }
       }
     }
@@ -3111,8 +3111,8 @@ export function attach(
       value.fileSize = fileSize;
     }
     const promise = Promise.resolve(value);
-    (promise: any).status = 'fulfilled';
-    (promise: any).value = value;
+    (promise as any).status = 'fulfilled';
+    (promise as any).value = value;
     const ioInfo: ReactIOInfo = {
       name: 'img',
       start,
@@ -3175,7 +3175,7 @@ export function attach(
           const debugEntry = fiber._debugInfo[i];
           if (debugEntry.awaited) {
             // Async Info
-            const asyncInfo: ReactAsyncInfo = (debugEntry: any);
+            const asyncInfo: ReactAsyncInfo = debugEntry as any;
             if (level === virtualLevel) {
               // Track any async info between the previous virtual instance up until to this
               // instance and add it to the parent. This can add the same set multiple times
@@ -3189,7 +3189,7 @@ export function attach(
             continue;
           }
           // Scan up until the next Component to see if this component changed environment.
-          const componentInfo: ReactComponentInfo = (debugEntry: any);
+          const componentInfo: ReactComponentInfo = debugEntry as any;
           const secondaryEnv = getSecondaryEnvironmentName(fiber._debugInfo, i);
           if (componentInfo.env != null) {
             knownEnvironmentNames.add(componentInfo.env);
@@ -3789,7 +3789,7 @@ export function attach(
           // In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)
           // In other cases (e.g. Memo) actualDuration might be greater than 0 even if we "bailed out".
           const metadata =
-            ((currentCommitProfilingMetadata: any): CommitProfilingData);
+            currentCommitProfilingMetadata as any as CommitProfilingData;
           metadata.durations.push(id, actualDuration, selfDuration);
           metadata.maxActualDuration = Math.max(
             metadata.maxActualDuration,
@@ -3819,7 +3819,7 @@ export function attach(
           (fiber.alternate !== null && updaters.has(fiber.alternate)))
       ) {
         const metadata =
-          ((currentCommitProfilingMetadata: any): CommitProfilingData);
+          currentCommitProfilingMetadata as any as CommitProfilingData;
         if (metadata.updaters === null) {
           metadata.updaters = [];
         }
@@ -4044,7 +4044,7 @@ export function attach(
           const debugEntry = nextChild._debugInfo[i];
           if (debugEntry.awaited) {
             // Async Info
-            const asyncInfo: ReactAsyncInfo = (debugEntry: any);
+            const asyncInfo: ReactAsyncInfo = debugEntry as any;
             if (level === virtualLevel) {
               // Track any async info between the previous virtual instance up until to this
               // instance and add it to the parent. This can add the same set multiple times
@@ -4057,7 +4057,7 @@ export function attach(
             // Not a Component. Some other Debug Info.
             continue;
           }
-          const componentInfo: ReactComponentInfo = (debugEntry: any);
+          const componentInfo: ReactComponentInfo = debugEntry as any;
           const secondaryEnv = getSecondaryEnvironmentName(
             nextChild._debugInfo,
             i,
@@ -4218,7 +4218,7 @@ export function attach(
         if (existingInstance !== null) {
           // Common case. Match in the same parent.
           const fiberInstance: FiberInstance | FilteredFiberInstance =
-            (existingInstance: any); // Only matches if it's a Fiber.
+            existingInstance as any; // Only matches if it's a Fiber.
 
           // We keep track if the order of the children matches the previous order.
           // They are always different referentially, but if the instances line up
@@ -4235,7 +4235,7 @@ export function attach(
           updateFlags |= updateFiberRecursively(
             fiberInstance,
             nextChild,
-            (prevChild: any),
+            prevChild as any,
             traceNearestHostComponentUpdate,
           );
         } else if (prevChild !== null && shouldFilterFiber(nextChild)) {
@@ -5054,7 +5054,7 @@ export function attach(
 
         flushPendingEvents(currentRoot);
 
-        currentRoot = (null: any);
+        currentRoot = null as any;
       });
 
       needsToFlushComponentLogs = false;
@@ -5169,20 +5169,20 @@ export function attach(
 
     if (isProfiling && isProfilingSupported) {
       if (!shouldBailoutWithPendingOperations()) {
-        const commitProfilingMetadata =
-          ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-            currentRoot.id,
-          );
+        const commitProfilingMetadata = (
+          rootToCommitProfilingMetadataMap as any as CommitProfilingMetadataMap
+        ).get(currentRoot.id);
 
         if (commitProfilingMetadata != null) {
           commitProfilingMetadata.push(
-            ((currentCommitProfilingMetadata: any): CommitProfilingData),
+            currentCommitProfilingMetadata as any as CommitProfilingData,
           );
         } else {
-          ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
-            currentRoot.id,
-            [((currentCommitProfilingMetadata: any): CommitProfilingData)],
-          );
+          (
+            rootToCommitProfilingMetadataMap as any as CommitProfilingMetadataMap
+          ).set(currentRoot.id, [
+            currentCommitProfilingMetadata as any as CommitProfilingData,
+          ]);
         }
       }
     }
@@ -5196,7 +5196,7 @@ export function attach(
       hook.emit('traceUpdates', traceUpdatesForNodes);
     }
 
-    currentRoot = (null: any);
+    currentRoot = null as any;
   }
 
   function getResourceInstance(fiber: Fiber): HostInstance | null {
@@ -5331,7 +5331,7 @@ export function attach(
         const owner = getUnfilteredOwner(fiber);
         if (owner != null) {
           if (typeof owner.tag === 'number') {
-            return getDisplayNameForFiber((owner: any));
+            return getDisplayNameForFiber(owner as any);
           } else {
             return owner.name || '';
           }
@@ -5371,7 +5371,7 @@ export function attach(
     if (instance !== undefined) {
       if (instance.kind === FILTERED_FIBER_INSTANCE) {
         // A Filtered Fiber Instance will always have a Virtual Instance as a parent.
-        return ((instance.parent: any): VirtualInstance).id;
+        return (instance.parent as any as VirtualInstance).id;
       }
       return instance.id;
     }
@@ -5406,7 +5406,7 @@ export function attach(
   ): mixed {
     if (isMostRecentlyInspectedElement(id)) {
       return getInObject(
-        ((mostRecentlyInspectedElement: any): InspectedElement),
+        mostRecentlyInspectedElement as any as InspectedElement,
         path,
       );
     }
@@ -5532,21 +5532,21 @@ export function attach(
       return null;
     }
     if (typeof owner.tag === 'number') {
-      const ownerFiber: Fiber = (owner: any); // Refined
+      const ownerFiber: Fiber = owner as any; // Refined
       owner = ownerFiber._debugOwner;
     } else {
-      const ownerInfo: ReactComponentInfo = (owner: any); // Refined
+      const ownerInfo: ReactComponentInfo = owner as any; // Refined
       owner = ownerInfo.owner;
     }
     while (owner) {
       if (typeof owner.tag === 'number') {
-        const ownerFiber: Fiber = (owner: any); // Refined
+        const ownerFiber: Fiber = owner as any; // Refined
         if (!shouldFilterFiber(ownerFiber)) {
           return ownerFiber;
         }
         owner = ownerFiber._debugOwner;
       } else {
-        const ownerInfo: ReactComponentInfo = (owner: any); // Refined
+        const ownerInfo: ReactComponentInfo = owner as any; // Refined
         if (!shouldFilterVirtual(ownerInfo, null)) {
           return ownerInfo;
         }
@@ -5572,7 +5572,7 @@ export function attach(
         // isn't propagated down as the new owner. In that case we might match the alternate
         // instead. This is a bit hacky but the fastest check since type casting owner to a Fiber
         // needs a duck type check anyway.
-        parentInstance.data === (owner: any).alternate
+        parentInstance.data === (owner as any).alternate
       ) {
         if (parentInstance.kind === FILTERED_FIBER_INSTANCE) {
           return null;
@@ -5653,7 +5653,7 @@ export function attach(
       }
       let firstInstance: null | DevToolsInstance = null;
       if (filterByChildInstance === null) {
-        firstInstance = (set.values().next().value: any);
+        firstInstance = set.values().next().value as any;
       } else {
         // eslint-disable-next-line no-for-of-loops/no-for-of-loops
         for (const childInstance of set.values()) {
@@ -6089,7 +6089,7 @@ export function attach(
         ? inspectRootsRaw(devtoolsInstance.id)
         : inspectFiberInstanceRaw(devtoolsInstance);
     }
-    (devtoolsInstance: FilteredFiberInstance); // assert exhaustive
+    devtoolsInstance as FilteredFiberInstance; // assert exhaustive
     throw new Error('Unsupported instance kind');
   }
 
@@ -6170,7 +6170,7 @@ export function attach(
       context = consumerResolvedContext._currentValue || null;
 
       // Look for overridden value.
-      let current = ((fiber: any): Fiber).return;
+      let current = (fiber as any as Fiber).return;
       while (current !== null) {
         const currentType = current.type;
         const currentTypeSymbol = getTypeSymbol(currentType);
@@ -6203,7 +6203,7 @@ export function attach(
       context = consumerResolvedContext._currentValue || null;
 
       // Look for overridden value.
-      let current = ((fiber: any): Fiber).return;
+      let current = (fiber as any as Fiber).return;
       while (current !== null) {
         const currentType = current.type;
         const currentTypeSymbol = getTypeSymbol(currentType);
@@ -6703,7 +6703,7 @@ export function attach(
   ): void {
     if (isMostRecentlyInspectedElement(id)) {
       const value = getInObject(
-        ((mostRecentlyInspectedElement: any): InspectedElement),
+        mostRecentlyInspectedElement as any as InspectedElement,
         path,
       );
       const key = `$reactTemp${count}`;
@@ -6721,7 +6721,7 @@ export function attach(
   ): ?string {
     if (isMostRecentlyInspectedElement(id)) {
       const valueToCopy = getInObject(
-        ((mostRecentlyInspectedElement: any): InspectedElement),
+        mostRecentlyInspectedElement as any as InspectedElement,
         path,
       );
 
@@ -6756,7 +6756,7 @@ export function attach(
             path,
             value: cleanForBridge(
               getInObject(
-                ((mostRecentlyInspectedElement: any): InspectedElement),
+                mostRecentlyInspectedElement as any as InspectedElement,
                 path,
               ),
               createIsPathAllowed(null, secondaryCategory),
@@ -7071,7 +7071,7 @@ export function attach(
           break;
         case 'hooks':
           if (typeof overrideHookStateDeletePath === 'function') {
-            overrideHookStateDeletePath(fiber, ((hookID: any): number), path);
+            overrideHookStateDeletePath(fiber, hookID as any as number, path);
           }
           break;
         case 'props':
@@ -7145,7 +7145,7 @@ export function attach(
           if (typeof overrideHookStateRenamePath === 'function') {
             overrideHookStateRenamePath(
               fiber,
-              ((hookID: any): number),
+              hookID as any as number,
               oldPath,
               newPath,
             );
@@ -7227,7 +7227,7 @@ export function attach(
           break;
         case 'hooks':
           if (typeof overrideHookState === 'function') {
-            overrideHookState(fiber, ((hookID: any): number), path, value);
+            overrideHookState(fiber, hookID as any as number, path, value);
           }
           break;
         case 'props':
@@ -7445,13 +7445,16 @@ export function attach(
         );
       }
       const rootID = rootInstance.id;
-      ((displayNamesByRootID: any): DisplayNamesByRootID).set(
+      (displayNamesByRootID as any as DisplayNamesByRootID).set(
         rootID,
         getDisplayNameForRoot(root.current),
       );
       const initialTreeBaseDurations: Array<[number, number]> = [];
       snapshotTreeBaseDurations(rootInstance, initialTreeBaseDurations);
-      (initialTreeBaseDurationsMap: any).set(rootID, initialTreeBaseDurations);
+      (initialTreeBaseDurationsMap as any).set(
+        rootID,
+        initialTreeBaseDurations,
+      );
     });
 
     isProfiling = true;
@@ -8113,7 +8116,7 @@ export function attach(
     // but it's at least somewhere within it.
     if (isError(unresolvedSource)) {
       return (instance.source = extractLocationFromOwnerStack(
-        (unresolvedSource: any),
+        unresolvedSource as any,
       ));
     }
     if (typeof unresolvedSource === 'string') {

packages/react-devtools-shared/src/backend/fiber/shared/DevToolsFiberInspection.js

@@ -21,7 +21,7 @@ export function isError(object: mixed): boolean {
 
 export function getFiberFlags(fiber: Fiber): number {
   // The name of this field changed from "effectTag" to "flags"
-  return fiber.flags !== undefined ? fiber.flags : (fiber: any).effectTag;
+  return fiber.flags !== undefined ? fiber.flags : (fiber as any).effectTag;
 }
 
 export function rootSupportsProfiling(root: any): boolean {
@@ -61,7 +61,7 @@ export function getSecondaryEnvironmentName(
   index: number,
 ): null | string {
   if (debugInfo != null) {
-    const componentInfo: ReactComponentInfo = (debugInfo[index]: any);
+    const componentInfo: ReactComponentInfo = debugInfo[index] as any;
     for (let i = index + 1; i < debugInfo.length; i++) {
       const debugEntry = debugInfo[i];
       if (typeof debugEntry.env === 'string') {

packages/react-devtools-shared/src/backend/fiber/shared/DevToolsFiberInternalReactConstants.js

@@ -99,7 +99,7 @@ export function getInternalReactConstants(version: string): {
 
   const SuspenseyImagesMode = 0b0100000;
 
-  let ReactTypeOfWork: WorkTagMap = ((null: any): WorkTagMap);
+  let ReactTypeOfWork: WorkTagMap = null as any as WorkTagMap;
 
   // **********************************************************
   // The section below is copied from files in React repo.

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -146,7 +146,7 @@ export function attach(
     new WeakMap();
 
   let getElementIDForHostInstance: GetElementIDForHostInstance =
-    ((null: any): GetElementIDForHostInstance);
+    null as any as GetElementIDForHostInstance;
   let findHostInstanceForInternalID: (id: number) => ?HostInstance;
   let getNearestMountedDOMNode = (node: Element): null | Element => {
     // Not implemented.
@@ -198,7 +198,7 @@ export function attach(
       internalInstanceToIDMap.set(internalInstance, id);
       idToInternalInstanceMap.set(id, internalInstance);
     }
-    return ((internalInstanceToIDMap.get(internalInstance): any): number);
+    return internalInstanceToIDMap.get(internalInstance) as any as number;
   }
 
   function areEqualArrays(a: Array<any>, b: Array<any>) {
@@ -832,7 +832,7 @@ export function attach(
 
       let owner = element._owner;
       if (owner) {
-        owners = ([]: Array<SerializedElement>);
+        owners = [] as Array<SerializedElement>;
         while (owner != null) {
           owners.push({
             displayName: getData(owner).displayName || 'Unknown',

packages/react-devtools-shared/src/backend/profilingHooks.js

@@ -213,8 +213,8 @@ export function createProfilingHooks({
 
   function markAndClear(markName: string) {
     // This method won't be called unless these functions are defined, so we can skip the extra typeof check.
-    ((performanceTarget: any): Performance).mark(markName);
-    ((performanceTarget: any): Performance).clearMarks(markName);
+    (performanceTarget as any as Performance).mark(markName);
+    (performanceTarget as any as Performance).clearMarks(markName);
   }
 
   function recordReactMeasureStarted(
@@ -605,7 +605,7 @@ export function createProfilingHooks({
     if (!wakeableIDs.has(wakeable)) {
       wakeableIDs.set(wakeable, wakeableID++);
     }
-    return ((wakeableIDs.get(wakeable): any): number);
+    return wakeableIDs.get(wakeable) as any as number;
   }
 
   function markComponentSuspended(
@@ -626,7 +626,7 @@ export function createProfilingHooks({
     // frameworks like Relay may also annotate Promises with a displayName,
     // describing what operation/data the thrown Promise is related to.
     // When this is available we should pass it along to the Timeline.
-    const displayName = (wakeable: any).displayName || '';
+    const displayName = (wakeable as any).displayName || '';
 
     let suspenseEvent: SuspenseEvent | null = null;
     // TODO (timeline) Record and cache component stack

packages/react-devtools-shared/src/backend/shared/ReactSymbols.js

@@ -75,6 +75,6 @@ export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
 
 import type {ReactOptimisticKey} from 'shared/ReactTypes';
 
-export const REACT_OPTIMISTIC_KEY: ReactOptimisticKey = (Symbol.for(
+export const REACT_OPTIMISTIC_KEY: ReactOptimisticKey = Symbol.for(
   'react.optimistic_key',
-): any);
+) as any;

packages/react-devtools-shared/src/backend/utils/index.js

@@ -61,7 +61,7 @@ export function copyWithDelete(
   const updated = isArray(obj) ? obj.slice() : {...obj};
   if (index + 1 === path.length) {
     if (isArray(updated)) {
-      updated.splice(((key: any): number), 1);
+      updated.splice(key as any as number, 1);
     } else {
       delete updated[key];
     }
@@ -87,7 +87,7 @@ export function copyWithRename(
     // $FlowFixMe[incompatible-use] number or string is fine here
     updated[newKey] = updated[oldKey];
     if (isArray(updated)) {
-      updated.splice(((oldKey: any): number), 1);
+      updated.splice(oldKey as any as number, 1);
     } else {
       delete updated[oldKey];
     }

packages/react-devtools-shared/src/backend/utils/parseStackTrace.js

@@ -224,12 +224,12 @@ function collectStackTrace(
       const enclosingLine: number =
         // $FlowFixMe[prop-missing]
         typeof callSite.getEnclosingLineNumber === 'function'
-          ? (callSite: any).getEnclosingLineNumber() || 0
+          ? (callSite as any).getEnclosingLineNumber() || 0
           : 0;
       const enclosingCol: number =
         // $FlowFixMe[prop-missing]
         typeof callSite.getEnclosingColumnNumber === 'function'
-          ? (callSite: any).getEnclosingColumnNumber() || 0
+          ? (callSite as any).getEnclosingColumnNumber() || 0
           : 0;
       const isAsync =
         // $FlowFixMe[prop-missing]

packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js

@@ -75,7 +75,7 @@ export function showOverlay(
   return isReactNativeEnvironment()
     ? showOverlayNative(elements, agent)
     : showOverlayWeb(
-        (elements: $ReadOnlyArray<any>),
+        elements as $ReadOnlyArray<any>,
         componentName,
         agent,
         hideAfterTimeout,

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js

@@ -191,9 +191,9 @@ export default class Overlay {
     // We can't get the size of text nodes or comment nodes. React as of v15
     // heavily uses comment nodes to delimit text.
     // TODO: We actually can measure text nodes. We should.
-    const elements: $ReadOnlyArray<HTMLElement> = (nodes.filter(
+    const elements: $ReadOnlyArray<HTMLElement> = nodes.filter(
       node => node.nodeType === Node.ELEMENT_NODE,
-    ): any);
+    ) as any;
 
     while (this.rects.length > elements.length) {
       const rect = this.rects.pop();

packages/react-devtools-shared/src/backend/views/Highlighter/index.js

@@ -434,7 +434,7 @@ export default function setupHighlighter(
     lastHoveredNode = target;
 
     if (target.tagName === 'IFRAME') {
-      const iframe: HTMLIFrameElement = (target: any);
+      const iframe: HTMLIFrameElement = target as any;
       try {
         if (!iframesListeningTo.has(iframe)) {
           const window = iframe.contentWindow;
@@ -493,9 +493,9 @@ export default function setupHighlighter(
 
   function getEventTarget(event: MouseEvent): HTMLElement {
     if (event.composed) {
-      return (event.composedPath()[0]: any);
+      return event.composedPath()[0] as any;
     }
 
-    return (event.target: any);
+    return event.target as any;
   }
 }

packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js

@@ -48,7 +48,7 @@ function drawWeb(nodeToData: Map<HostInstance, Data>) {
   }
 
   const dpr = window.devicePixelRatio || 1;
-  const canvasFlow: HTMLCanvasElement = ((canvas: any): HTMLCanvasElement);
+  const canvasFlow: HTMLCanvasElement = canvas as any as HTMLCanvasElement;
   canvasFlow.width = window.innerWidth * dpr;
   canvasFlow.height = window.innerHeight * dpr;
   canvasFlow.style.width = `${window.innerWidth}px`;

packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js

@@ -47,7 +47,7 @@ export type Data = {
 
 const nodeToData: Map<HostInstance, Data> = new Map();
 
-let agent: Agent = ((null: any): Agent);
+let agent: Agent = null as any as Agent;
 let drawAnimationFrameID: AnimationFrameID | null = null;
 let isEnabled: boolean = false;
 let redrawTimeoutID: TimeoutID | null = null;

packages/react-devtools-shared/src/backendAPI.js

@@ -204,7 +204,7 @@ function getPromiseForRequestID<T>(
     const onInspectedElement = (data: any) => {
       if (data.responseID === requestID) {
         cleanup();
-        resolve((data: T));
+        resolve(data as T);
       }
     };
 

packages/react-devtools-shared/src/bridge.js

@@ -323,7 +323,7 @@ class Bridge<
     this._wallUnlisten =
       wall.listen((message: Message) => {
         if (message && message.event) {
-          (this: any).emit(message.event, message.payload);
+          (this as any).emit(message.event, message.payload);
         }
       }) || null;
 

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js

@@ -27,4 +27,4 @@ import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
 import typeof * as ExportsType from './DevToolsFeatureFlags.core-fb';
 
 // Flow magic to verify the exports of this file match the original version.
-((((null: any): ExportsType): FeatureFlagsType): ExportsType);
+null as any as ExportsType as FeatureFlagsType as ExportsType;

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js

@@ -27,4 +27,4 @@ import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
 import typeof * as ExportsType from './DevToolsFeatureFlags.core-oss';
 
 // Flow magic to verify the exports of this file match the original version.
-((((null: any): ExportsType): FeatureFlagsType): ExportsType);
+null as any as ExportsType as FeatureFlagsType as ExportsType;

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js

@@ -27,4 +27,4 @@ import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
 import typeof * as ExportsType from './DevToolsFeatureFlags.extension-fb';
 
 // Flow magic to verify the exports of this file match the original version.
-((((null: any): ExportsType): FeatureFlagsType): ExportsType);
+null as any as ExportsType as FeatureFlagsType as ExportsType;

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js

@@ -27,4 +27,4 @@ import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
 import typeof * as ExportsType from './DevToolsFeatureFlags.extension-oss';
 
 // Flow magic to verify the exports of this file match the original version.
-((((null: any): ExportsType): FeatureFlagsType): ExportsType);
+null as any as ExportsType as FeatureFlagsType as ExportsType;

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js

@@ -84,10 +84,10 @@ export default function ContextMenu({
         "Can't access context menu element. This is a bug in React DevTools.",
       );
     }
-    const menu = (maybeMenu: HTMLDivElement);
+    const menu = maybeMenu as HTMLDivElement;
 
     function hideUnlessContains(event: Event) {
-      if (!menu.contains(((event.target: any): Node))) {
+      if (!menu.contains(event.target as any as Node)) {
         hide();
       }
     }

packages/react-devtools-shared/src/devtools/cache.js

@@ -46,10 +46,10 @@ if (typeof React.use === 'function') {
     return React.use(Context);
   };
 } else if (
-  typeof (React: any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ===
+  typeof (React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ===
   'object'
 ) {
-  const ReactCurrentDispatcher = (React: any)
+  const ReactCurrentDispatcher = (React as any)
     .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
   readContext = function (Context: ReactContext<null>) {
     const dispatcher = ReactCurrentDispatcher.current;
@@ -79,9 +79,9 @@ const resourceConfigs: Map<Resource<any, any, any>, Config> = new Map();
 function getEntriesForResource(
   resource: any,
 ): Map<any, any> | WeakMap<any, any> {
-  let entriesForResource: Map<any, any> | WeakMap<any, any> = ((entries.get(
+  let entriesForResource: Map<any, any> | WeakMap<any, any> = entries.get(
     resource,
-  ): any): Map<any, any>);
+  ) as any as Map<any, any>;
   if (entriesForResource === undefined) {
     const config = resourceConfigs.get(resource);
     entriesForResource =
@@ -103,12 +103,12 @@ function accessResult<Input, Key, Value>(
     const thenable = fetch(input);
     thenable.then(
       value => {
-        const fulfilledThenable: FulfilledThenable<Value> = (thenable: any);
+        const fulfilledThenable: FulfilledThenable<Value> = thenable as any;
         fulfilledThenable.status = 'fulfilled';
         fulfilledThenable.value = value;
       },
       error => {
-        const rejectedThenable: RejectedThenable<Value> = (thenable: any);
+        const rejectedThenable: RejectedThenable<Value> = thenable as any;
         rejectedThenable.status = 'rejected';
         rejectedThenable.reason = error;
       },
@@ -171,9 +171,9 @@ export function createResource<Input, Key, Value>(
     write(key: Key, value: Value): void {
       const entriesForResource = getEntriesForResource(resource);
 
-      const fulfilledThenable: FulfilledThenable<Value> = (Promise.resolve(
+      const fulfilledThenable: FulfilledThenable<Value> = Promise.resolve(
         value,
-      ): any);
+      ) as any;
       fulfilledThenable.status = 'fulfilled';
       fulfilledThenable.value = value;
 

packages/react-devtools-shared/src/devtools/store.js

@@ -1313,7 +1313,7 @@ export default class Store extends EventEmitter<{
       if (didMutate) {
         let weightAcrossRoots = 0;
         this._roots.forEach(rootID => {
-          const {weight} = ((this.getElementByID(rootID): any): Element);
+          const {weight} = this.getElementByID(rootID) as any as Element;
           weightAcrossRoots += weight;
         });
         this._weightAcrossRoots = weightAcrossRoots;
@@ -1426,7 +1426,7 @@ export default class Store extends EventEmitter<{
       switch (operation) {
         case TREE_OPERATION_ADD: {
           const id = operations[i + 1];
-          const type = ((operations[i + 2]: any): ElementType);
+          const type = operations[i + 2] as any as ElementType;
 
           i += 3;
 
@@ -1820,7 +1820,7 @@ export default class Store extends EventEmitter<{
           const parentID = operations[i + 2];
           const nameStringID = operations[i + 3];
           const isSuspended = operations[i + 4] === 1;
-          const numRects = ((operations[i + 5]: any): number);
+          const numRects = operations[i + 5] as any as number;
           let name = stringTable[nameStringID];
 
           if (this._idToSuspense.has(id)) {
@@ -2030,8 +2030,8 @@ export default class Store extends EventEmitter<{
           break;
         }
         case SUSPENSE_TREE_OPERATION_RESIZE: {
-          const id = ((operations[i + 1]: any): number);
-          const numRects = ((operations[i + 2]: any): number);
+          const id = operations[i + 1] as any as number;
+          const numRects = operations[i + 2] as any as number;
           i += 3;
 
           const suspense = this._idToSuspense.get(id);
@@ -2276,7 +2276,7 @@ export default class Store extends EventEmitter<{
       if (didCollapse) {
         let weightAcrossRoots = 0;
         this._roots.forEach(rootID => {
-          const {weight} = ((this.getElementByID(rootID): any): Element);
+          const {weight} = this.getElementByID(rootID) as any as Element;
           weightAcrossRoots += weight;
         });
         this._weightAcrossRoots = weightAcrossRoots;

packages/react-devtools-shared/src/devtools/utils.js

@@ -156,7 +156,7 @@ export function printStore(
     }
 
     store.roots.forEach(rootID => {
-      const {weight} = ((store.getElementByID(rootID): any): Element);
+      const {weight} = store.getElementByID(rootID) as any as Element;
       const maybeWeightLabel = includeWeight ? ` (${weight})` : '';
 
       // Store does not (yet) expose a way to get errors/warnings per root.

packages/react-devtools-shared/src/devtools/views/Components/Components.js

@@ -239,4 +239,4 @@ function setResizeCSSVariable(
   }
 }
 
-export default (portaledContent(Components): component());
+export default portaledContent(Components) as component();

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -57,7 +57,7 @@ type Context = {
 };
 
 export const InspectedElementContext: ReactContext<Context> =
-  createContext<Context>(((null: any): Context));
+  createContext<Context>(null as any as Context);
 
 export type Props = {
   children: ReactNodeList,

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js

@@ -81,7 +81,7 @@ export default function InspectedElementContextTree({
         {isEmpty && <div className={styles.Empty}>None</div>}
         {/* $FlowFixMe[constant-condition] */}
         {!isEmpty &&
-          (entries: any).map(([name, value]) => (
+          (entries as any).map(([name, value]) => (
             <KeyValue
               key={name}
               alphaSort={true}

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js

@@ -234,7 +234,7 @@ function HookView({
 
   // Format data for display to mimic the props/state/context for now.
   if (type === 'string') {
-    displayValue = `"${((value: any): string)}"`;
+    displayValue = `"${value as any as string}"`;
   } else if (type === 'boolean') {
     displayValue = value ? 'true' : 'false';
   } else if (type === 'number') {
@@ -389,6 +389,6 @@ function HookView({
   }
 }
 
-export default (React.memo(InspectedElementHooksTree): component(
+export default React.memo(InspectedElementHooksTree) as component(
   ...props: HookViewProps
-));
+);

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js

@@ -69,7 +69,7 @@ export default function InspectedElementStateTree({
       {isEmpty && <div className={styles.Empty}>None</div>}
       {/* $FlowFixMe[constant-condition] */}
       {!isEmpty &&
-        (entries: any).map(([name, value]) => (
+        (entries as any).map(([name, value]) => (
           <KeyValue
             key={name}
             alphaSort={true}

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js

@@ -26,7 +26,7 @@ import type {StyleAndLayout as StyleAndLayoutFrontend} from './types';
 type Context = StyleAndLayoutFrontend | null;
 
 const NativeStyleContext: ReactContext<Context> = createContext<Context>(
-  ((null: any): Context),
+  null as any as Context,
 );
 NativeStyleContext.displayName = 'NativeStyleContext';
 

packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js

@@ -26,7 +26,7 @@ import type {Resource, Thenable} from '../../cache';
 type Context = (id: number) => Array<SerializedElement> | null;
 
 const OwnersListContext: ReactContext<Context> = createContext<Context>(
-  ((null: any): Context),
+  null as any as Context,
 );
 OwnersListContext.displayName = 'OwnersListContext';
 
@@ -52,7 +52,7 @@ const resource: Resource<
       | ResolveFn
       | ((
           result: Promise<Array<SerializedElement>> | Array<SerializedElement>,
-        ) => void) = ((null: any): ResolveFn);
+        ) => void) = null as any as ResolveFn;
     const promise = new Promise(resolve => {
       resolveFn = resolve;
     });
@@ -60,7 +60,7 @@ const resource: Resource<
     // $FlowFixMe[incompatible-type] found when upgrading Flow
     inProgressRequests.set(element, {promise, resolveFn});
 
-    return (promise: $FlowFixMe);
+    return promise as $FlowFixMe;
   },
   (element: Element) => element,
   {useWeakMap: true},
@@ -88,7 +88,7 @@ function useChangeOwnerAction(): (nextOwnerID: number) => void {
                 result:
                   | Promise<Array<SerializedElement>>
                   | Array<SerializedElement>,
-              ) => void) = ((null: any): ResolveFn);
+              ) => void) = null as any as ResolveFn;
           const promise = new Promise(resolve => {
             resolveFn = resolve;
           });

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -215,7 +215,7 @@ export default function Tree(): React.Node {
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {
+      if ((event as any).target.tagName === 'INPUT' || event.defaultPrevented) {
         return;
       }
 

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -149,12 +149,12 @@ type Action =
 export type DispatcherContext = (action: Action) => void;
 
 const TreeStateContext: ReactContext<StateContext> =
-  createContext<StateContext>(((null: any): StateContext));
+  createContext<StateContext>(null as any as StateContext);
 TreeStateContext.displayName = 'TreeStateContext';
 
 // TODO: `dispatch` is an Action and should be named accordingly.
 const TreeDispatcherContext: ReactContext<DispatcherContext> =
-  createContext<DispatcherContext>(((null: any): DispatcherContext));
+  createContext<DispatcherContext>(null as any as DispatcherContext);
 TreeDispatcherContext.displayName = 'TreeDispatcherContext';
 
 type State = {
@@ -237,7 +237,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
       case 'SELECT_ELEMENT_AT_INDEX':
         ownerSubtreeLeafElementID = null;
 
-        inspectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX)
+        inspectedElementIndex = (action as ACTION_SELECT_ELEMENT_AT_INDEX)
           .payload;
         break;
       case 'SELECT_ELEMENT_BY_ID':
@@ -247,7 +247,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         // It might also cause problems if the specified element was inside of a (not yet expanded) subtree.
         lookupIDForIndex = false;
 
-        inspectedElementID = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
+        inspectedElementID = (action as ACTION_SELECT_ELEMENT_BY_ID).payload;
         inspectedElementIndex =
           inspectedElementID === null
             ? null
@@ -270,7 +270,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 
         if (inspectedElementIndex !== null) {
           const selectedElement = store.getElementAtIndex(
-            ((inspectedElementIndex: any): number),
+            inspectedElementIndex as any as number,
           );
           if (selectedElement !== null && selectedElement.parentID !== 0) {
             const parent = store.getElementByID(selectedElement.parentID);
@@ -319,7 +319,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
           }
 
           const selectedElement = store.getElementAtIndex(
-            ((inspectedElementIndex: any): number),
+            inspectedElementIndex as any as number,
           );
           if (selectedElement !== null && selectedElement.ownerID !== 0) {
             const ownerIndex = store.getIndexOfElementID(
@@ -336,7 +336,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 
         if (inspectedElementIndex !== null) {
           const selectedElement = store.getElementAtIndex(
-            ((inspectedElementIndex: any): number),
+            inspectedElementIndex as any as number,
           );
           if (selectedElement !== null && selectedElement.parentID !== 0) {
             const parentIndex = store.getIndexOfElementID(
@@ -362,7 +362,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
 
         if (inspectedElementIndex !== null) {
           const selectedElement = store.getElementAtIndex(
-            ((inspectedElementIndex: any): number),
+            inspectedElementIndex as any as number,
           );
           if (selectedElement !== null && selectedElement.parentID !== 0) {
             const parent = store.getElementByID(selectedElement.parentID);
@@ -470,7 +470,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
       inspectedElementID = null;
     } else {
       inspectedElementID = store.getElementIDAtIndex(
-        ((inspectedElementIndex: any): number),
+        inspectedElementIndex as any as number,
       );
     }
   }
@@ -520,15 +520,16 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
         if (numPrevSearchResults > 0) {
           didRequestSearch = true;
           searchIndex =
-            ((searchIndex: any): number) > 0
-              ? ((searchIndex: any): number) - 1
+            (searchIndex as any as number) > 0
+              ? (searchIndex as any as number) - 1
               : numPrevSearchResults - 1;
         }
         break;
       case 'HANDLE_STORE_MUTATION':
         if (searchText !== '') {
-          const [addedElementIDs, removedElementIDs] =
-            (action: ACTION_HANDLE_STORE_MUTATION).payload;
+          const [addedElementIDs, removedElementIDs] = (
+            action as ACTION_HANDLE_STORE_MUTATION
+          ).payload;
 
           removedElementIDs.forEach((parentID, id) => {
             // Prune this item from the search results.
@@ -541,14 +542,16 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
               // If the results are now empty, also deselect things.
               if (searchResults.length === 0) {
                 searchIndex = null;
-              } else if (((searchIndex: any): number) >= searchResults.length) {
+              } else if (
+                (searchIndex as any as number) >= searchResults.length
+              ) {
                 searchIndex = searchResults.length - 1;
               }
             }
           });
 
           addedElementIDs.forEach(id => {
-            const element = ((store.getElementByID(id): any): Element);
+            const element = store.getElementByID(id) as any as Element;
 
             // It's possible that multiple tree operations will fire before this action has run.
             // So it's important to check for elements that may have been added and then removed.
@@ -559,16 +562,16 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
               // Add this item to the search results if it matches.
               const regExp = createRegExp(searchText);
               if (displayName !== null && regExp.test(displayName)) {
-                const newElementIndex = ((store.getIndexOfElementID(
+                const newElementIndex = store.getIndexOfElementID(
                   id,
-                ): any): number);
+                ) as any as number;
 
                 let foundMatch = false;
                 for (let index = 0; index < searchResults.length; index++) {
                   const resultID = searchResults[index];
                   if (
                     newElementIndex <
-                    ((store.getIndexOfElementID(resultID): any): number)
+                    (store.getIndexOfElementID(resultID) as any as number)
                   ) {
                     foundMatch = true;
                     searchResults = searchResults
@@ -591,7 +594,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
       case 'SET_SEARCH_TEXT':
         searchIndex = null;
         searchResults = [];
-        searchText = (action: ACTION_SET_SEARCH_TEXT).payload;
+        searchText = (action as ACTION_SET_SEARCH_TEXT).payload;
 
         if (searchText !== '') {
           const regExp = createRegExp(searchText);
@@ -611,7 +614,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
               }
             } else {
               searchIndex = Math.min(
-                ((prevSearchIndex: any): number),
+                prevSearchIndex as any as number,
                 searchResults.length - 1,
               );
             }
@@ -638,9 +641,9 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     }
   }
   if (didRequestSearch && searchIndex !== null) {
-    inspectedElementID = ((searchResults[searchIndex]: any): number);
+    inspectedElementID = searchResults[searchIndex] as any as number;
     inspectedElementIndex = store.getIndexOfElementID(
-      ((inspectedElementID: any): number),
+      inspectedElementID as any as number,
     );
   }
 
@@ -706,13 +709,13 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
       break;
     case 'SELECT_ELEMENT_AT_INDEX':
       if (ownerFlatTree !== null) {
-        inspectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX)
+        inspectedElementIndex = (action as ACTION_SELECT_ELEMENT_AT_INDEX)
           .payload;
       }
       break;
     case 'SELECT_ELEMENT_BY_ID':
       if (ownerFlatTree !== null) {
-        const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;
+        const payload = (action as ACTION_SELECT_ELEMENT_BY_ID).payload;
         if (payload === null) {
           inspectedElementIndex = null;
         } else {
@@ -752,7 +755,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
       // If the Store doesn't have any owners metadata, don't drill into an empty stack.
       // This is a confusing user experience.
       if (store.hasOwnerMetadata) {
-        ownerID = (action: ACTION_SELECT_OWNER).payload;
+        ownerID = (action as ACTION_SELECT_OWNER).payload;
         ownerFlatTree = store.getOwnersListForElement(ownerID);
 
         // Always force reset selection to be the top of the new owner tree.

packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js

@@ -22,7 +22,7 @@ export type Context = {
 };
 
 const ViewElementSourceContext: ReactContext<Context> = createContext<Context>(
-  ((null: any): Context),
+  null as any as Context,
 );
 ViewElementSourceContext.displayName = 'ViewElementSourceContext';
 

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -117,19 +117,19 @@ export type Props = {
 };
 
 const componentsTab = {
-  id: ('components': TabID),
+  id: 'components' as TabID,
   icon: 'components',
   label: 'Components',
   title: 'React Components',
 };
 const profilerTab = {
-  id: ('profiler': TabID),
+  id: 'profiler' as TabID,
   icon: 'profiler',
   label: 'Profiler',
   title: 'React Profiler',
 };
 const suspenseTab = {
-  id: ('suspense': TabID),
+  id: 'suspense' as TabID,
   icon: 'suspense',
   label: 'Suspense',
   title: 'React Suspense',

packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js

@@ -115,4 +115,4 @@ function EditorPane({selectedSource}: Props) {
     </div>
   );
 }
-export default (portaledContent(EditorPane): component());
+export default portaledContent(EditorPane) as component();

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js

@@ -74,13 +74,13 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
     };
     const wake = () => {
       // This assumes they won't throw.
-      callbacks.forEach(callback => callback((thenable: any).value));
+      callbacks.forEach(callback => callback((thenable as any).value));
       callbacks.clear();
       rejectCallbacks.clear();
     };
     const wakeRejections = () => {
       // This assumes they won't throw.
-      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.forEach(callback => callback((thenable as any).reason));
       rejectCallbacks.clear();
       callbacks.clear();
     };
@@ -96,20 +96,20 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
 
         if (maybeItem) {
           const fulfilledThenable: FulfilledThenable<GitHubIssue> =
-            (thenable: any);
+            thenable as any;
           fulfilledThenable.status = 'fulfilled';
           fulfilledThenable.value = maybeItem;
           wake();
         } else {
           const notFoundThenable: RejectedThenable<GitHubIssue> =
-            (thenable: any);
+            thenable as any;
           notFoundThenable.status = 'rejected';
           notFoundThenable.reason = null;
           wakeRejections();
         }
       })
       .catch(error => {
-        const rejectedThenable: RejectedThenable<GitHubIssue> = (thenable: any);
+        const rejectedThenable: RejectedThenable<GitHubIssue> = thenable as any;
         rejectedThenable.status = 'rejected';
         rejectedThenable.reason = null;
         wakeRejections();
@@ -119,7 +119,7 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
     setTimeout(() => {
       didTimeout = true;
 
-      const timedoutThenable: RejectedThenable<GitHubIssue> = (thenable: any);
+      const timedoutThenable: RejectedThenable<GitHubIssue> = thenable as any;
       timedoutThenable.status = 'rejected';
       timedoutThenable.reason = null;
       wakeRejections();

packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js

@@ -32,4 +32,4 @@ function InspectedElementPane() {
     </SettingsModalContextController>
   );
 }
-export default (portaledContent(InspectedElementPane): component());
+export default portaledContent(InspectedElementPane) as component();

packages/react-devtools-shared/src/devtools/views/ModalDialog.js

@@ -57,7 +57,7 @@ type ModalDialogContextType = {
 };
 
 const ModalDialogContext: ReactContext<ModalDialogContextType> =
-  createContext<ModalDialogContextType>(((null: any): ModalDialogContextType));
+  createContext<ModalDialogContextType>(null as any as ModalDialogContextType);
 ModalDialogContext.displayName = 'ModalDialogContext';
 
 function dialogReducer(state: State, action: Action) {

packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js

@@ -57,13 +57,13 @@ export default function CommitFlamegraphAutoSizer(_: {}): React.Node {
   if (selectedCommitIndex !== null) {
     commitTree = profilingCache.getCommitTree({
       commitIndex: selectedCommitIndex,
-      rootID: ((rootID: any): number),
+      rootID: rootID as any as number,
     });
 
     chartData = profilingCache.getFlamegraphChartData({
       commitIndex: selectedCommitIndex,
       commitTree,
-      rootID: ((rootID: any): number),
+      rootID: rootID as any as number,
     });
   }
 
@@ -75,8 +75,8 @@ export default function CommitFlamegraphAutoSizer(_: {}): React.Node {
             // Force Flow types to avoid checking for `null` here because there's no static proof that
             // by the time this render prop function is called, the values of the `let` variables have not changed.
             <CommitFlamegraph
-              chartData={((chartData: any): ChartData)}
-              commitTree={((commitTree: any): CommitTree)}
+              chartData={chartData as any as ChartData}
+              commitTree={commitTree as any as CommitTree}
               height={height}
               width={width}
             />

packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js

@@ -132,6 +132,6 @@ function CommitFlamegraphListItem({data, index, style}: Props): React.Node {
   );
 }
 
-export default (memo(CommitFlamegraphListItem, areEqual): component(
+export default memo(CommitFlamegraphListItem, areEqual) as component(
   ...props: Props
-));
+);

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js

@@ -57,13 +57,13 @@ export default function CommitRankedAutoSizer(_: {}): React.Node {
   if (selectedCommitIndex !== null) {
     commitTree = profilingCache.getCommitTree({
       commitIndex: selectedCommitIndex,
-      rootID: ((rootID: any): number),
+      rootID: rootID as any as number,
     });
 
     chartData = profilingCache.getRankedChartData({
       commitIndex: selectedCommitIndex,
       commitTree,
-      rootID: ((rootID: any): number),
+      rootID: rootID as any as number,
     });
   }
 
@@ -73,8 +73,8 @@ export default function CommitRankedAutoSizer(_: {}): React.Node {
         <AutoSizer>
           {({height, width}) => (
             <CommitRanked
-              chartData={((chartData: any): ChartData)}
-              commitTree={((commitTree: any): CommitTree)}
+              chartData={chartData as any as ChartData}
+              commitTree={commitTree as any as CommitTree}
               height={height}
               width={width}
             />

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js

@@ -79,6 +79,6 @@ function CommitRankedListItem({data, index, style}: Props) {
   );
 }
 
-export default (memo(CommitRankedListItem, areEqual): component(
+export default memo(CommitRankedListItem, areEqual) as component(
   ...props: Props
-));
+);

packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

@@ -63,9 +63,9 @@ export function getCommitTree({
     rootToCommitTreeMap.set(rootID, []);
   }
 
-  const commitTrees = ((rootToCommitTreeMap.get(
+  const commitTrees = rootToCommitTreeMap.get(
     rootID,
-  ): any): Array<CommitTree>);
+  ) as any as Array<CommitTree>;
   if (commitIndex < commitTrees.length) {
     return commitTrees[commitIndex];
   }
@@ -87,7 +87,7 @@ export function getCommitTree({
     );
   }
 
-  let commitTree: CommitTree = ((null: any): CommitTree);
+  let commitTree: CommitTree = null as any as CommitTree;
   for (let index = commitTrees.length; index <= commitIndex; index++) {
     // Commits are generated sequentially and cached.
     // If this is the very first commit, start with the cached snapshot and apply the first mutation.
@@ -140,9 +140,9 @@ function recursivelyInitializeTree(
       hocDisplayNames: node.hocDisplayNames,
       key: node.key,
       parentID,
-      treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(
+      treeBaseDuration: dataForRoot.initialTreeBaseDurations.get(
         id,
-      ): any): number),
+      ) as any as number,
       type: node.type,
       compiledWithForget: node.compiledWithForget,
     });
@@ -175,7 +175,7 @@ function updateTree(
   };
 
   let i = 2;
-  let id: number = ((null: any): number);
+  let id: number = null as any as number;
 
   // Reassemble the string table.
   const stringTable: Array<null | string> = [
@@ -199,8 +199,8 @@ function updateTree(
 
     switch (operation) {
       case TREE_OPERATION_ADD: {
-        id = ((operations[i + 1]: any): number);
-        const type = ((operations[i + 2]: any): ElementType);
+        id = operations[i + 1] as any as number;
+        const type = operations[i + 2] as any as ElementType;
 
         i += 3;
 
@@ -235,7 +235,7 @@ function updateTree(
 
           nodes.set(id, node);
         } else {
-          const parentID = ((operations[i]: any): number);
+          const parentID = operations[i] as any as number;
           i++;
 
           i++; // ownerID
@@ -283,11 +283,11 @@ function updateTree(
         break;
       }
       case TREE_OPERATION_REMOVE: {
-        const removeLength = ((operations[i + 1]: any): number);
+        const removeLength = operations[i + 1] as any as number;
         i += 2;
 
         for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
-          id = ((operations[i]: any): number);
+          id = operations[i] as any as number;
           i++;
 
           if (!nodes.has(id)) {
@@ -319,12 +319,12 @@ function updateTree(
         break;
       }
       case TREE_OPERATION_REORDER_CHILDREN: {
-        id = ((operations[i + 1]: any): number);
-        const numChildren = ((operations[i + 2]: any): number);
-        const children = ((operations.slice(
+        id = operations[i + 1] as any as number;
+        const numChildren = operations[i + 2] as any as number;
+        const children = operations.slice(
           i + 3,
           i + 3 + numChildren,
-        ): any): Array<number>);
+        ) as any as Array<number>;
 
         i = i + 3 + numChildren;
 
@@ -414,19 +414,19 @@ function updateTree(
       }
 
       case SUSPENSE_TREE_OPERATION_REMOVE: {
-        const removeLength = ((operations[i + 1]: any): number);
+        const removeLength = operations[i + 1] as any as number;
         i += 2 + removeLength;
 
         break;
       }
 
       case SUSPENSE_TREE_OPERATION_REORDER_CHILDREN: {
-        const suspenseID = ((operations[i + 1]: any): number);
-        const numChildren = ((operations[i + 2]: any): number);
-        const children = ((operations.slice(
+        const suspenseID = operations[i + 1] as any as number;
+        const numChildren = operations[i + 2] as any as number;
+        const children = operations.slice(
           i + 3,
           i + 3 + numChildren,
-        ): any): Array<number>);
+        ) as any as Array<number>;
 
         i = i + 3 + numChildren;
 
@@ -442,18 +442,18 @@ function updateTree(
       }
 
       case SUSPENSE_TREE_OPERATION_RESIZE: {
-        const suspenseID = ((operations[i + 1]: any): number);
-        const numRects = ((operations[i + 2]: any): number);
+        const suspenseID = operations[i + 1] as any as number;
+        const numRects = operations[i + 2] as any as number;
 
         // $FlowFixMe[constant-condition]
         if (__DEBUG__) {
           if (numRects === -1) {
             debug('Suspense resize', `suspense ${suspenseID} rects null`);
           } else {
-            const rects = ((operations.slice(
+            const rects = operations.slice(
               i + 3,
               i + 3 + numRects * 4,
-            ): any): Array<number>);
+            ) as any as Array<number>;
             debug(
               'Suspense resize',
               `suspense ${suspenseID} rects [${rects.join(',')}]`,
@@ -468,7 +468,7 @@ function updateTree(
 
       case SUSPENSE_TREE_OPERATION_SUSPENDERS: {
         i++;
-        const changeLength = ((operations[i++]: any): number);
+        const changeLength = operations[i++] as any as number;
 
         for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
           const suspenseNodeId = operations[i++];

packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js

@@ -52,7 +52,7 @@ export function getChartData({
 
   const chartDataKey = `${rootID}-${commitIndex}`;
   if (cachedChartData.has(chartDataKey)) {
-    return ((cachedChartData.get(chartDataKey): any): ChartData);
+    return cachedChartData.get(chartDataKey) as any as ChartData;
   }
 
   const idToDepthMap: Map<number, number> = new Map();

packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js

@@ -57,7 +57,7 @@ export default function HoveredFiberInfo({fiberData}: Props): React.Node {
     const commitIndex = commitIndices[i];
     if (selectedCommitIndex === commitIndex) {
       const {fiberActualDurations, fiberSelfDurations} =
-        profilerStore.getCommitData(((rootID: any): number), commitIndex);
+        profilerStore.getCommitData(rootID as any as number, commitIndex);
       const actualDuration = fiberActualDurations.get(id) || 0;
       const selfDuration = fiberSelfDurations.get(id) || 0;
 

packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js

@@ -243,4 +243,4 @@ const tabsWithTimeline = [
   },
 ];
 
-export default (portaledContent(Profiler): component());
+export default portaledContent(Profiler) as component();

packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js

@@ -83,7 +83,7 @@ export type Context = {
 };
 
 const ProfilerContext: ReactContext<Context> = createContext<Context>(
-  ((null: any): Context),
+  null as any as Context,
 );
 ProfilerContext.displayName = 'ProfilerContext';
 
@@ -228,12 +228,12 @@ function ProfilerContextController({children}: Props): React.Node {
   // Always check didRecordCommits before using commitData or filteredCommitIndices.
   const commitData = useMemo(() => {
     if (!didRecordCommits || rootID === null || profilingData === null) {
-      return ([]: Array<CommitDataFrontend>);
+      return [] as Array<CommitDataFrontend>;
     }
     const dataForRoot = profilingData.dataForRoots.get(rootID);
     return dataForRoot
       ? dataForRoot.commitData
-      : ([]: Array<CommitDataFrontend>);
+      : ([] as Array<CommitDataFrontend>);
   }, [didRecordCommits, rootID, profilingData]);
 
   // Commit filtering and navigation

packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js

@@ -86,7 +86,7 @@ export default function ProfilingImportExportButtons(): React.Node {
       // TODO (profiling) Handle fileReader errors.
       const fileReader = new FileReader();
       fileReader.addEventListener('load', () => {
-        const raw = ((fileReader.result: any): string);
+        const raw = fileReader.result as any as string;
         const json = JSON.parse(raw);
 
         if (!isArray(json) && hasOwnProperty.call(json, 'version')) {
@@ -95,7 +95,7 @@ export default function ProfilingImportExportButtons(): React.Node {
           setFile(null);
 
           try {
-            const profilingDataExport = ((json: any): ProfilingDataExport);
+            const profilingDataExport = json as any as ProfilingDataExport;
             profilerStore.profilingData =
               prepareProfilingDataFrontendFromExport(profilingDataExport);
           } catch (error) {

packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js

@@ -48,7 +48,7 @@ export function getChartData({
 
   const chartDataKey = `${rootID}-${commitIndex}`;
   if (cachedChartData.has(chartDataKey)) {
-    return ((cachedChartData.get(chartDataKey): any): ChartData);
+    return cachedChartData.get(chartDataKey) as any as ChartData;
   }
 
   let maxSelfDuration = 0;

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js

@@ -97,7 +97,7 @@ export default function SidebarSelectedFiberInfo(): React.Node {
     const commitIndex = commitIndices[i];
 
     const {duration, timestamp} = profilerStore.getCommitData(
-      ((rootID: any): number),
+      rootID as any as number,
       commitIndex,
     );
 
@@ -136,7 +136,7 @@ export default function SidebarSelectedFiberInfo(): React.Node {
             compiledWithForget={node.compiledWithForget}
           />
         )}
-        <WhatChanged fiberID={((selectedFiberID: any): number)} />
+        <WhatChanged fiberID={selectedFiberID as any as number} />
         {listItems.length > 0 && (
           <div>
             <label className={styles.Label}>Rendered at: </label>

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js

@@ -292,7 +292,11 @@ function List({
           itemCount={filteredCommitIndices.length}
           itemData={itemData}
           itemSize={itemSize}
-          ref={(listRef: any) /* Flow bug? */}
+          ref={
+            listRef as any
+
+            /* Flow bug? */
+          }
           width={width}>
           {SnapshotCommitListItem}
         </FixedSizeList>

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js

@@ -96,6 +96,6 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   );
 }
 
-export default (memo(SnapshotCommitListItem, areEqual): component(
+export default memo(SnapshotCommitListItem, areEqual) as component(
   ...props: Props
-));
+);

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js

@@ -32,7 +32,7 @@ export default function SnapshotSelector(_: Props): React.Node {
   } = useContext(ProfilerContext);
 
   const {profilerStore} = useContext(StoreContext);
-  const {commitData} = profilerStore.getDataForRoot(((rootID: any): number));
+  const {commitData} = profilerStore.getDataForRoot(rootID as any as number);
 
   const totalDurations: Array<number> = [];
   const commitTimes: Array<number> = [];

packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js

@@ -37,7 +37,7 @@ export default function WhatChanged({
   }
 
   const {changeDescriptions} = profilerStore.getCommitData(
-    ((rootID: any): number),
+    rootID as any as number,
     selectedCommitIndex,
   );
 

packages/react-devtools-shared/src/devtools/views/Profiler/useCommitFilteringAndNavigation.js

@@ -60,7 +60,7 @@ export function useCommitFilteringAndNavigation(
           reduced.push(index);
         }
         return reduced;
-      }, ([]: Array<number>));
+      }, [] as Array<number>);
     },
     [commitData],
   );

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

@@ -281,7 +281,7 @@ export default function ComponentsSettings({
         if (index >= 0) {
           if (componentFilter.type === ComponentFilterElementType) {
             cloned[index] = {
-              ...((cloned[index]: any): ElementTypeComponentFilter),
+              ...(cloned[index] as any as ElementTypeComponentFilter),
               isEnabled,
             };
           } else if (
@@ -289,17 +289,17 @@ export default function ComponentsSettings({
             componentFilter.type === ComponentFilterLocation
           ) {
             cloned[index] = {
-              ...((cloned[index]: any): RegExpComponentFilter),
+              ...(cloned[index] as any as RegExpComponentFilter),
               isEnabled,
             };
           } else if (componentFilter.type === ComponentFilterHOC) {
             cloned[index] = {
-              ...((cloned[index]: any): BooleanComponentFilter),
+              ...(cloned[index] as any as BooleanComponentFilter),
               isEnabled,
             };
           } else if (componentFilter.type === ComponentFilterEnvironmentName) {
             cloned[index] = {
-              ...((cloned[index]: any): EnvironmentNameComponentFilter),
+              ...(cloned[index] as any as EnvironmentNameComponentFilter),
               isEnabled,
             };
           }
@@ -404,10 +404,10 @@ export default function ComponentsSettings({
                   onChange={({currentTarget}) =>
                     changeFilterType(
                       componentFilter,
-                      ((parseInt(
+                      parseInt(
                         currentTarget.value,
                         10,
-                      ): any): ComponentFilterType),
+                      ) as any as ComponentFilterType,
                     )
                   }>
                   {/* TODO: currently disabled, need find a new way of doing this
@@ -445,7 +445,7 @@ export default function ComponentsSettings({
                     onChange={({currentTarget}) =>
                       updateFilterValueElementType(
                         componentFilter,
-                        ((parseInt(currentTarget.value, 10): any): ElementType),
+                        parseInt(currentTarget.value, 10) as any as ElementType,
                       )
                     }>
                     {isInternalFacebookBuild && (

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -56,7 +56,7 @@ type Context = {
 };
 
 const SettingsContext: ReactContext<Context> = createContext<Context>(
-  ((null: any): Context),
+  null as any as Context,
 );
 SettingsContext.displayName = 'SettingsContext';
 
@@ -116,24 +116,24 @@ function SettingsContextController({
 
   const documentElements = useMemo<DocumentElements>(() => {
     const array: Array<HTMLElement> = [
-      ((document.documentElement: any): HTMLElement),
+      document.documentElement as any as HTMLElement,
     ];
     if (componentsPortalContainer != null) {
       array.push(
-        ((componentsPortalContainer.ownerDocument
-          .documentElement: any): HTMLElement),
+        componentsPortalContainer.ownerDocument
+          .documentElement as any as HTMLElement,
       );
     }
     if (profilerPortalContainer != null) {
       array.push(
-        ((profilerPortalContainer.ownerDocument
-          .documentElement: any): HTMLElement),
+        profilerPortalContainer.ownerDocument
+          .documentElement as any as HTMLElement,
       );
     }
     if (suspensePortalContainer != null) {
       array.push(
-        ((suspensePortalContainer.ownerDocument
-          .documentElement: any): HTMLElement),
+        suspensePortalContainer.ownerDocument
+          .documentElement as any as HTMLElement,
       );
     }
     return array;
@@ -218,11 +218,11 @@ export function updateDisplayDensity(
 ): void {
   // Sizes and paddings/margins are all rem-based,
   // so update the root font-size as well when the display preference changes.
-  const computedStyle = getComputedStyle((document.body: any));
+  const computedStyle = getComputedStyle(document.body as any);
   const fontSize = computedStyle.getPropertyValue(
     `--${displayDensity}-root-font-size`,
   );
-  const root = ((document.querySelector(':root'): any): HTMLElement);
+  const root = document.querySelector(':root') as any as HTMLElement;
   root.style.fontSize = fontSize;
 }
 

packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js

@@ -34,7 +34,7 @@ type Context = {
 };
 
 const SettingsModalContext: ReactContext<Context> = createContext<Context>(
-  ((null: any): Context),
+  null as any as Context,
 );
 SettingsModalContext.displayName = 'SettingsModalContext';
 

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js

@@ -451,7 +451,7 @@ function SuspenseRectsTransition({id}: {id: Element['id']}): React$Node {
   });
 }
 
-const ViewBox = createContext<Rect>((null: any));
+const ViewBox = createContext<Rect>(null as any);
 
 function SuspenseRectsContainer({
   scaleRef,

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js

@@ -645,4 +645,4 @@ function setResizeCSSVariable(
   }
 }
 
-export default (portaledContent(SuspenseTab): component());
+export default portaledContent(SuspenseTab) as component();

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js

@@ -97,11 +97,11 @@ export type SuspenseTreeAction =
 export type SuspenseTreeDispatch = (action: SuspenseTreeAction) => void;
 
 const SuspenseTreeStateContext: ReactContext<SuspenseTreeState> =
-  createContext<SuspenseTreeState>(((null: any): SuspenseTreeState));
+  createContext<SuspenseTreeState>(null as any as SuspenseTreeState);
 SuspenseTreeStateContext.displayName = 'SuspenseTreeStateContext';
 
 const SuspenseTreeDispatcherContext: ReactContext<SuspenseTreeDispatch> =
-  createContext<SuspenseTreeDispatch>(((null: any): SuspenseTreeDispatch));
+  createContext<SuspenseTreeDispatch>(null as any as SuspenseTreeDispatch);
 SuspenseTreeDispatcherContext.displayName = 'SuspenseTreeDispatcherContext';
 
 type Props = {

packages/react-devtools-shared/src/devtools/views/TabBar.js

@@ -41,7 +41,7 @@ export default function TabBar({
   type,
 }: Props): React.Node {
   if (!tabs.some(tab => tab !== null && tab.id === currentTab)) {
-    const firstTab = ((tabs.find(tab => tab !== null): any): TabInfo);
+    const firstTab = tabs.find(tab => tab !== null) as any as TabInfo;
     selectTab(firstTab.id);
   }
 

packages/react-devtools-shared/src/devtools/views/context.js

@@ -15,11 +15,11 @@ import type {ViewAttributeSource} from 'react-devtools-shared/src/devtools/views
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 export const BridgeContext: ReactContext<FrontendBridge> =
-  createContext<FrontendBridge>(((null: any): FrontendBridge));
+  createContext<FrontendBridge>(null as any as FrontendBridge);
 BridgeContext.displayName = 'BridgeContext';
 
 export const StoreContext: ReactContext<Store> = createContext<Store>(
-  ((null: any): Store),
+  null as any as Store,
 );
 StoreContext.displayName = 'StoreContext';
 

packages/react-devtools-shared/src/devtools/views/hooks.js

@@ -165,7 +165,7 @@ export function useLocalStorage<T>(
       console.log(error);
     }
     if (typeof initialValue === 'function') {
-      return ((initialValue: any): () => T)();
+      return (initialValue as any as () => T)();
     } else {
       return initialValue;
     }
@@ -188,7 +188,7 @@ export function useLocalStorage<T>(
     (value: $FlowFixMe) => {
       try {
         const valueToStore =
-          value instanceof Function ? (value: any)(storedValue) : value;
+          value instanceof Function ? (value as any)(storedValue) : value;
         localStorageSetItem(key, JSON.stringify(valueToStore));
 
         // Notify listeners that this setting has changed.

packages/react-devtools-shared/src/devtools/views/utils.js

@@ -134,7 +134,7 @@ export function serializeDataForCopy(props: Object): string {
 
 export function serializeHooksForCopy(hooks: HooksTree | null): string {
   // $FlowFixMe[not-an-object] "HooksTree is not an object"
-  const cloned = Object.assign(([]: Array<any>), hooks);
+  const cloned = Object.assign([] as Array<any>, hooks);
 
   const queue = [...cloned];
 

packages/react-devtools-shared/src/dynamicImportCache.js

@@ -93,7 +93,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
       }
 
       // This assumes they won't throw.
-      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.forEach(callback => callback((thenable as any).reason));
       rejectCallbacks.clear();
       callbacks.clear();
     };
@@ -115,7 +115,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
           return;
         }
 
-        const fulfilledThenable: FulfilledThenable<Module> = (thenable: any);
+        const fulfilledThenable: FulfilledThenable<Module> = thenable as any;
         fulfilledThenable.status = 'fulfilled';
         fulfilledThenable.value = module;
 
@@ -135,7 +135,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
 
         console.log(error);
 
-        const rejectedThenable: RejectedThenable<Module> = (thenable: any);
+        const rejectedThenable: RejectedThenable<Module> = thenable as any;
         rejectedThenable.status = 'rejected';
         rejectedThenable.reason = error;
 
@@ -156,7 +156,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
 
       didTimeout = true;
 
-      const rejectedThenable: RejectedThenable<Module> = (thenable: any);
+      const rejectedThenable: RejectedThenable<Module> = thenable as any;
       rejectedThenable.status = 'rejected';
       rejectedThenable.reason = null;
 

packages/react-devtools-shared/src/hook.js

@@ -493,7 +493,7 @@ export function installHook(
               // The backend is what implements a message queue, so it's the only one that injects onErrorOrWarning.
               if (onErrorOrWarning != null) {
                 onErrorOrWarning(
-                  ((method: any): 'error' | 'warn'),
+                  method as any as 'error' | 'warn',
                   args.slice(),
                 );
               }
@@ -699,19 +699,15 @@ export function installHook(
       });
   }
 
-  Object.defineProperty(
-    target,
-    '__REACT_DEVTOOLS_GLOBAL_HOOK__',
-    ({
-      // This property needs to be configurable for the test environment,
-      // else we won't be able to delete and recreate it between tests.
-      configurable: __DEV__,
-      enumerable: false,
-      get() {
-        return hook;
-      },
-    }: Object),
-  );
+  Object.defineProperty(target, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {
+    // This property needs to be configurable for the test environment,
+    // else we won't be able to delete and recreate it between tests.
+    configurable: __DEV__,
+    enumerable: false,
+    get() {
+      return hook;
+    },
+  } as Object);
 
   return hook;
 }

packages/react-devtools-shared/src/hookNamesCache.js

@@ -115,7 +115,7 @@ export function loadHookNames(
       }
 
       // This assumes they won't throw.
-      callbacks.forEach(callback => callback((thenable: any).value));
+      callbacks.forEach(callback => callback((thenable as any).value));
       callbacks.clear();
       rejectCallbacks.clear();
     };
@@ -125,7 +125,7 @@ export function loadHookNames(
         timeoutID = null;
       }
       // This assumes they won't throw.
-      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.forEach(callback => callback((thenable as any).reason));
       rejectCallbacks.clear();
       callbacks.clear();
     };
@@ -159,7 +159,7 @@ export function loadHookNames(
 
             if (hookNames) {
               const fulfilledThenable: FulfilledThenable<HookNames> =
-                (thenable: any);
+                thenable as any;
               fulfilledThenable.status = 'fulfilled';
               fulfilledThenable.value = hookNames;
               status = 'success';
@@ -168,7 +168,7 @@ export function loadHookNames(
               wake();
             } else {
               const notFoundThenable: RejectedThenable<HookNames> =
-                (thenable: any);
+                thenable as any;
               notFoundThenable.status = 'rejected';
               notFoundThenable.reason = null;
               status = 'error';
@@ -190,7 +190,7 @@ export function loadHookNames(
             console.error(error);
 
             const rejectedThenable: RejectedThenable<HookNames> =
-              (thenable: any);
+              thenable as any;
             rejectedThenable.status = 'rejected';
             rejectedThenable.reason = null;
 
@@ -211,7 +211,7 @@ export function loadHookNames(
 
           didTimeout = true;
 
-          const timedoutThenable: RejectedThenable<HookNames> = (thenable: any);
+          const timedoutThenable: RejectedThenable<HookNames> = thenable as any;
           timedoutThenable.status = 'rejected';
           timedoutThenable.reason = null;
 

packages/react-devtools-shared/src/hooks/SourceMapConsumer.js

@@ -39,9 +39,9 @@ export default function SourceMapConsumer(
   sourceMapJSON: MixedSourceMap | IndexSourceMapSection,
 ): SourceMapConsumerType {
   if (sourceMapJSON.sections != null) {
-    return IndexedSourceMapConsumer(((sourceMapJSON: any): IndexSourceMap));
+    return IndexedSourceMapConsumer(sourceMapJSON as any as IndexSourceMap);
   } else {
-    return BasicSourceMapConsumer(((sourceMapJSON: any): BasicSourceMap));
+    return BasicSourceMapConsumer(sourceMapJSON as any as BasicSourceMap);
   }
 }
 
@@ -124,15 +124,15 @@ function BasicSourceMapConsumer(sourceMapJSON: BasicSourceMap) {
     return {
       column,
       line,
-      sourceContent: ((sourceContent: any): string | null),
-      sourceURL: ((sourceURL: any): string | null),
+      sourceContent: sourceContent as any as string | null,
+      sourceURL: sourceURL as any as string | null,
       ignored,
     };
   }
 
-  return (({
+  return {
     originalPositionFor,
-  }: any): SourceMapConsumerType);
+  } as any as SourceMapConsumerType;
 }
 
 type Section = {
@@ -231,7 +231,7 @@ function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
     });
   }
 
-  return (({
+  return {
     originalPositionFor,
-  }: any): SourceMapConsumerType);
+  } as any as SourceMapConsumerType;
 }

packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js

@@ -141,7 +141,7 @@ function extractAndLoadSourceMapJSON(
   locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
     const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
     const runtimeSourceCode =
-      ((hookSourceAndMetadata.runtimeSourceCode: any): string);
+      hookSourceAndMetadata.runtimeSourceCode as any as string;
 
     // TODO (named hooks) Search for our custom metadata first.
     // If it's found, we should use it rather than source maps.
@@ -175,9 +175,11 @@ function extractAndLoadSourceMapJSON(
             // Web apps like Code Sandbox embed multiple inline source maps.
             // In this case, we need to loop through and find the right one.
             // We may also need to trim any part of this string that isn't based64 encoded data.
-            const trimmed = ((sourceMappingURL.match(
-              /base64,([a-zA-Z0-9+\/=]+)/,
-            ): any): Array<string>)[1];
+            const trimmed = (
+              sourceMappingURL.match(
+                /base64,([a-zA-Z0-9+\/=]+)/,
+              ) as any as Array<string>
+            )[1];
             const decoded = withSyncPerfMeasurements(
               'decodeBase64String()',
               () => decodeBase64String(trimmed),
@@ -431,7 +433,7 @@ function initializeHookSourceAndMetadata(
     const locationKey = getHookSourceLocationKey(hookSource);
     if (!locationKeyToHookSourceAndMetadata.has(locationKey)) {
       // Can't be null because getHookSourceLocationKey() would have thrown
-      const runtimeSourceURL = ((hookSource.fileName: any): string);
+      const runtimeSourceURL = hookSource.fileName as any as string;
 
       const hookSourceAndMetadata: HookSourceAndMetadata = {
         hookSource,
@@ -477,7 +479,7 @@ function loadSourceFiles(
         return withAsyncPerfMeasurements(
           `fetchFileWithCaching("${url}")`,
           () => {
-            return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
+            return (fetchFileWithCaching as any as FetchFileWithCaching)(url);
           },
         );
       };

packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js

@@ -129,7 +129,7 @@ function findHookNames(
 
   hooksList.map(hook => {
     // We already guard against a null HookSource in parseHookNames()
-    const hookSource = ((hook.hookSource: any): HookSource);
+    const hookSource = hook.hookSource as any as HookSource;
     const fileName = hookSource.fileName;
     if (!fileName) {
       return null; // Should not be reachable.
@@ -177,8 +177,8 @@ function findHookNames(
         getHookName(
           hook,
           hookParsedMetadata.originalSourceAST,
-          ((hookParsedMetadata.originalSourceCode: any): string),
-          ((originalSourceLineNumber: any): number),
+          hookParsedMetadata.originalSourceCode as any as string,
+          originalSourceLineNumber as any as number,
           originalSourceColumnNumber,
         ),
       );
@@ -255,7 +255,7 @@ function parseSourceAST(
 
       const {metadataConsumer, sourceMapConsumer} = hookParsedMetadata;
       const runtimeSourceCode =
-        ((hookSourceAndMetadata.runtimeSourceCode: any): string);
+        hookSourceAndMetadata.runtimeSourceCode as any as string;
       let hasHookMap = false;
       let originalSourceURL;
       let originalSourceCode;

packages/react-devtools-shared/src/hydration.js

@@ -26,15 +26,15 @@ import type {
 import noop from 'shared/noop';
 
 export const meta = {
-  inspectable: (Symbol('inspectable'): symbol),
-  inspected: (Symbol('inspected'): symbol),
-  name: (Symbol('name'): symbol),
-  preview_long: (Symbol('preview_long'): symbol),
-  preview_short: (Symbol('preview_short'): symbol),
-  readonly: (Symbol('readonly'): symbol),
-  size: (Symbol('size'): symbol),
-  type: (Symbol('type'): symbol),
-  unserializable: (Symbol('unserializable'): symbol),
+  inspectable: Symbol('inspectable') as symbol,
+  inspected: Symbol('inspected') as symbol,
+  name: Symbol('name') as symbol,
+  preview_long: Symbol('preview_long') as symbol,
+  preview_short: Symbol('preview_short') as symbol,
+  readonly: Symbol('readonly') as symbol,
+  size: Symbol('size') as symbol,
+  type: Symbol('type') as symbol,
+  unserializable: Symbol('unserializable') as symbol,
 };
 
 export type Dehydrated = {

packages/react-devtools-shared/src/inspectedElementCache.js

@@ -101,13 +101,13 @@ export function inspectElement(
 
     const wake = () => {
       // This assumes they won't throw.
-      callbacks.forEach(callback => callback((thenable: any).value));
+      callbacks.forEach(callback => callback((thenable as any).value));
       callbacks.clear();
       rejectCallbacks.clear();
     };
     const wakeRejections = () => {
       // This assumes they won't throw.
-      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
+      rejectCallbacks.forEach(callback => callback((thenable as any).reason));
       rejectCallbacks.clear();
       callbacks.clear();
     };
@@ -116,7 +116,7 @@ export function inspectElement(
     const rendererID = store.getRendererIDForElement(element.id);
     if (rendererID == null) {
       const rejectedThenable: RejectedThenable<InspectedElementFrontend> =
-        (thenable: any);
+        thenable as any;
       rejectedThenable.status = 'rejected';
       rejectedThenable.reason = new Error(
         `Could not inspect element with id "${element.id}". No renderer found.`,
@@ -133,7 +133,7 @@ export function inspectElement(
         InspectedElementResponseType,
       ]) => {
         const fulfilledThenable: FulfilledThenable<InspectedElementFrontend> =
-          (thenable: any);
+          thenable as any;
         fulfilledThenable.status = 'fulfilled';
         fulfilledThenable.value = inspectedElement;
         wake();
@@ -143,7 +143,7 @@ export function inspectElement(
         console.error(error);
 
         const rejectedThenable: RejectedThenable<InspectedElementFrontend> =
-          (thenable: any);
+          thenable as any;
         rejectedThenable.status = 'rejected';
         rejectedThenable.reason = error;
 

packages/react-devtools-shared/src/inspectedElementMutableSource.js

@@ -88,7 +88,7 @@ export function inspectElement(
     let inspectedElement;
     switch (type) {
       case 'error': {
-        const {message, stack, errorType} = ((data: any): InspectElementError);
+        const {message, stack, errorType} = data as any as InspectElementError;
 
         // create a different error class for each error type
         // and keep useful information from backend.
@@ -124,7 +124,7 @@ export function inspectElement(
         throw Error(`Element "${id}" not found`);
 
       case 'full-data':
-        const fullData = ((data: any): InspectElementFullData);
+        const fullData = data as any as InspectElementFullData;
 
         // New data has come in.
         // We should replace the data in our local mutable copy.
@@ -137,7 +137,7 @@ export function inspectElement(
         return [inspectedElement, type];
 
       case 'hydrated-path':
-        const hydratedPathData = ((data: any): InspectElementHydratedPath);
+        const hydratedPathData = data as any as InspectElementHydratedPath;
         const {value} = hydratedPathData;
 
         // A path has been hydrated.

packages/react-devtools-shared/src/utils.js

@@ -138,7 +138,7 @@ export function getWrappedDisplayName(
   wrapperName: string,
   fallbackName?: string,
 ): string {
-  const displayName = (outerType: any)?.displayName;
+  const displayName = (outerType as any)?.displayName;
   return (
     displayName || `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
   );
@@ -251,8 +251,8 @@ export function printOperationsArray(operations: Array<number>) {
 
     switch (operation) {
       case TREE_OPERATION_ADD: {
-        const id = ((operations[i + 1]: any): number);
-        const type = ((operations[i + 2]: any): ElementType);
+        const id = operations[i + 1] as any as number;
+        const type = operations[i + 2] as any as ElementType;
 
         i += 3;
 
@@ -264,7 +264,7 @@ export function printOperationsArray(operations: Array<number>) {
           i++; // supportsStrictMode
           i++; // hasOwnerMetadata
         } else {
-          const parentID = ((operations[i]: any): number);
+          const parentID = operations[i] as any as number;
           i++;
 
           i++; // ownerID
@@ -283,11 +283,11 @@ export function printOperationsArray(operations: Array<number>) {
         break;
       }
       case TREE_OPERATION_REMOVE: {
-        const removeLength = ((operations[i + 1]: any): number);
+        const removeLength = operations[i + 1] as any as number;
         i += 2;
 
         for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
-          const id = ((operations[i]: any): number);
+          const id = operations[i] as any as number;
           i += 1;
 
           logs.push(`Remove node ${id}`);
@@ -304,8 +304,8 @@ export function printOperationsArray(operations: Array<number>) {
         break;
       }
       case TREE_OPERATION_REORDER_CHILDREN: {
-        const id = ((operations[i + 1]: any): number);
-        const numChildren = ((operations[i + 2]: any): number);
+        const id = operations[i + 1] as any as number;
+        const numChildren = operations[i + 2] as any as number;
         i += 3;
         const children = operations.slice(i, i + numChildren);
         i += numChildren;
@@ -369,11 +369,11 @@ export function printOperationsArray(operations: Array<number>) {
         break;
       }
       case SUSPENSE_TREE_OPERATION_REMOVE: {
-        const removeLength = ((operations[i + 1]: any): number);
+        const removeLength = operations[i + 1] as any as number;
         i += 2;
 
         for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {
-          const id = ((operations[i]: any): number);
+          const id = operations[i] as any as number;
           i += 1;
 
           logs.push(`Remove suspense node ${id}`);
@@ -382,8 +382,8 @@ export function printOperationsArray(operations: Array<number>) {
         break;
       }
       case SUSPENSE_TREE_OPERATION_REORDER_CHILDREN: {
-        const id = ((operations[i + 1]: any): number);
-        const numChildren = ((operations[i + 2]: any): number);
+        const id = operations[i + 1] as any as number;
+        const numChildren = operations[i + 2] as any as number;
         i += 3;
         const children = operations.slice(i, i + numChildren);
         i += numChildren;
@@ -394,8 +394,8 @@ export function printOperationsArray(operations: Array<number>) {
         break;
       }
       case SUSPENSE_TREE_OPERATION_RESIZE: {
-        const id = ((operations[i + 1]: any): number);
-        const numRects = ((operations[i + 2]: any): number);
+        const id = operations[i + 1] as any as number;
+        const numRects = operations[i + 2] as any as number;
         i += 3;
 
         if (numRects === -1) {
@@ -422,7 +422,7 @@ export function printOperationsArray(operations: Array<number>) {
       }
       case SUSPENSE_TREE_OPERATION_SUSPENDERS: {
         i++;
-        const changeLength = ((operations[i++]: any): number);
+        const changeLength = operations[i++] as any as number;
 
         for (let changeIndex = 0; changeIndex < changeLength; changeIndex++) {
           const id = operations[i++];
@@ -651,7 +651,7 @@ export function deletePathInObject(
     const parent = getInObject(object, path.slice(0, length - 1));
     if (parent) {
       if (isArray(parent)) {
-        parent.splice(((last: any): number), 1);
+        parent.splice(last as any as number, 1);
       } else {
         delete parent[last];
       }
@@ -672,7 +672,7 @@ export function renamePathInObject(
       const lastNew = newPath[length - 1];
       parent[lastNew] = parent[lastOld];
       if (isArray(parent)) {
-        parent.splice(((lastOld: any): number), 1);
+        parent.splice(lastOld as any as number, 1);
       } else {
         delete parent[lastOld];
       }

packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js

@@ -15,7 +15,7 @@ function wrapWithHoc(Component: () => any, index: number) {
     return <Component />;
   }
 
-  const displayName = (Component: any).displayName || Component.name;
+  const displayName = (Component as any).displayName || Component.name;
 
   HOC.displayName = `withHoc${index}(${displayName})`;
   return HOC;

packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js

@@ -122,8 +122,8 @@ function wrapWithHoc(
 }
 const HocWithHooks = wrapWithHoc(FunctionWithHooks);
 
-const Suspendender = React.lazy(() => {
-  return new Promise<any>(resolve => {
+const Suspendender = React.lazy<() => React.Node>(() => {
+  return new Promise<{default: () => React.Node, ...}>(resolve => {
     setTimeout(() => {
       resolve({
         default: () => 'Finished!',

packages/react-devtools-shell/src/app/ToDoList/ListItem.js

@@ -46,4 +46,4 @@ function ListItem({item, removeItem, toggleItem}: Props) {
   );
 }
 
-export default (memo(ListItem): component(...props: Props));
+export default memo(ListItem) as component(...props: Props);

packages/react-devtools-shell/src/app/devtools.js

@@ -14,7 +14,7 @@ import {initDevTools} from 'react-devtools-shared/src/devtools';
 // $FlowFixMe[cannot-resolve-name]
 __webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
 
-const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
+const iframe = document.getElementById('target') as any as HTMLIFrameElement;
 
 const {contentDocument, contentWindow} = iframe;
 
@@ -31,13 +31,13 @@ const DevTools = initializeFrontend(contentWindow);
 // Otherwise the Store may miss important initial tree op codes.
 activateBackend(contentWindow);
 
-const container = ((document.getElementById('devtools'): any): HTMLElement);
+const container = document.getElementById('devtools') as any as HTMLElement;
 
 let isTestAppMounted = true;
 
-const mountButton = ((document.getElementById(
+const mountButton = document.getElementById(
   'mountButton',
-): any): HTMLButtonElement);
+) as any as HTMLButtonElement;
 mountButton.addEventListener('click', function () {
   if (isTestAppMounted) {
     if (typeof window.unmountTestApp === 'function') {
@@ -86,5 +86,5 @@ function inject(sourcePath: string, callback: () => void) {
   script.onload = callback;
   script.src = sourcePath;
 
-  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
+  (contentDocument.body as any as HTMLBodyElement).appendChild(script);
 }

packages/react-devtools-shell/src/app/index.js

@@ -54,7 +54,7 @@ const unmountFunctions: Array<() => void | boolean> = [];
 function createContainer() {
   const container = document.createElement('div');
 
-  ((document.body: any): HTMLBodyElement).appendChild(container);
+  (document.body as any as HTMLBodyElement).appendChild(container);
 
   return container;
 }

packages/react-devtools-shell/src/e2e-apps/ListApp.js

@@ -19,7 +19,7 @@ function List() {
   const inputRef = useRef(null);
 
   const addItem = () => {
-    const input = ((inputRef.current: any): HTMLInputElement);
+    const input = inputRef.current as any as HTMLInputElement;
     const text = input.value;
     input.value = '';
 

packages/react-devtools-shell/src/e2e-regression/app-legacy.js

@@ -13,7 +13,7 @@ const version = process.env.E2E_APP_REACT_VERSION;
 function mountApp(App: () => React$Node) {
   const container = document.createElement('div');
 
-  ((document.body: any): HTMLBodyElement).appendChild(container);
+  (document.body as any as HTMLBodyElement).appendChild(container);
 
   // $FlowFixMe[prop-missing]: These are removed in 19.
   ReactDOM.render(<App />, container);

packages/react-devtools-shell/src/e2e-regression/app.js

@@ -9,7 +9,7 @@ import ListApp from '../e2e-apps/ListApp';
 function mountApp(App: () => React$Node) {
   const container = document.createElement('div');
 
-  ((document.body: any): HTMLBodyElement).appendChild(container);
+  (document.body as any as HTMLBodyElement).appendChild(container);
 
   const root = ReactDOMClient.createRoot(container);
   root.render(<App />);

packages/react-devtools-shell/src/e2e/app.js

@@ -7,7 +7,7 @@ import * as ReactDOMClient from 'react-dom/client';
 
 const container = document.createElement('div');
 
-((document.body: any): HTMLBodyElement).appendChild(container);
+(document.body as any as HTMLBodyElement).appendChild(container);
 
 // TODO We may want to parameterize this app
 // so that it can load things other than just ToDoList.