Transform $Keys to keyof (#55111)

Summary:
Pull Request resolved: #55111

We are transforming the following utility types to be more consistent with typescript and better AI integration:

* `$NonMaybeType` -> `NonNullable`
* `$ReadOnly` -> `Readonly`
* `$ReadOnlyArray` -> `ReadonlyArray`
* `$ReadOnlyMap` -> `ReadonlyMap`
* `$ReadOnlySet` -> `ReadonlySet`
* `$Keys` -> `keyof`
* `$Values` -> `Values`
* `mixed` -> `unknown`

See details in https://fb.workplace.com/groups/flowlang/permalink/1837907750148213/.

drop-conflicts

Command:

`js1 flow-runner codemod flow/transformUtilityType --format-files=false --legacy-type='$ReadOnlySet'`

Reviewed By: SamChou19815

Differential Revision: D90426061

Author: marcoww6

flow-typed/npm/babel-traverse_v7.x.x.js

@@ -558,24 +558,24 @@ declare module '@babel/traverse' {
      * Check whether we have the input `key`. If the `key` references an array then we check
      * if the array has any items, otherwise we just check if it's falsy.
      */
-    has(key: $Keys<TNode>): boolean;
+    has(key: keyof TNode): boolean;
 
     isStatic(): boolean;
 
     /**
      * Alias of `has`.
      */
-    is(key: $Keys<TNode>): boolean;
+    is(key: keyof TNode): boolean;
 
     /**
      * Opposite of `has`.
      */
-    isnt(key: $Keys<TNode>): boolean;
+    isnt(key: keyof TNode): boolean;
 
     /**
      * Check whether the path node `key` strict equals `value`.
      */
-    equals(key: $Keys<TNode>, value: any): boolean;
+    equals(key: keyof TNode, value: any): boolean;
 
     /**
      * Check the type against our stored internal type of the node. This is handy when a node has
@@ -726,7 +726,7 @@ declare module '@babel/traverse' {
 
     getAllPrevSiblings(): Array<NodePath<>>;
 
-    get<TKey: $Keys<TNode>>(
+    get<TKey: keyof TNode>(
       key: TKey,
       context?: boolean | TraversalContext,
     ): TNode[TKey] extends BabelNode ? NodePath<> : Array<NodePath<>>;

flow-typed/npm/rxjs_v6.x.x.js

@@ -2193,10 +2193,10 @@ declare module 'rxjs/operators' {
   ): rxjs$MonoTypeOperatorFunction<T>;
 
   declare export function distinctUntilKeyChanged<T>(
-    key: $Keys<T>,
+    key: keyof T,
   ): rxjs$MonoTypeOperatorFunction<T>;
 
-  declare export function distinctUntilKeyChanged<T, K: $Keys<T>>(
+  declare export function distinctUntilKeyChanged<T, K: keyof T>(
     key: K,
     compare: (x: unknown, y: unknown) => boolean,
   ): rxjs$MonoTypeOperatorFunction<T>;

packages/dev-middleware/src/inspector-proxy/Device.js

@@ -480,7 +480,7 @@ export default class Device {
   /**
    * Returns `true` if a page supports the given target capability flag.
    */
-  #pageHasCapability(page: Page, flag: $Keys<TargetCapabilityFlags>): boolean {
+  #pageHasCapability(page: Page, flag: keyof TargetCapabilityFlags): boolean {
     return page.capabilities[flag] === true;
   }
 

packages/dev-middleware/src/inspector-proxy/cdp-types/messages.js

@@ -12,18 +12,18 @@ import type {JSONSerializable} from '../types';
 import type {Commands, Events} from './protocol';
 
 // Note: A CDP event is a JSON-RPC notification with no `id` member.
-export type CDPEvent<TEvent: $Keys<Events> = 'unknown'> = {
+export type CDPEvent<TEvent: keyof Events = 'unknown'> = {
   method: TEvent,
   params: Events[TEvent],
 };
 
-export type CDPRequest<TCommand: $Keys<Commands> = 'unknown'> = {
+export type CDPRequest<TCommand: keyof Commands = 'unknown'> = {
   method: TCommand,
   params: Commands[TCommand]['paramsType'],
   id: number,
 };
 
-export type CDPResponse<TCommand: $Keys<Commands> = 'unknown'> =
+export type CDPResponse<TCommand: keyof Commands = 'unknown'> =
   | {
       result: Commands[TCommand]['resultType'],
       id: number,

packages/react-native/Libraries/Animated/createAnimatedComponent.js

@@ -65,9 +65,9 @@ type PassThroughProps = Readonly<{
   passthroughAnimatedPropExplicitValues?: ViewProps | null,
 }>;
 
-type LooseOmit<O: interface {}, K: $Keys<$FlowFixMe>> = Pick<
+type LooseOmit<O: interface {}, K: keyof $FlowFixMe> = Pick<
   O,
-  Exclude<$Keys<O>, K>,
+  Exclude<keyof O, K>,
 >;
 
 export type AnimatedProps<Props: {...}> = LooseOmit<

packages/react-native/Libraries/AppState/AppState.js

@@ -42,7 +42,7 @@ type AppStateEventDefinitions = {
   focus: [],
 };
 
-export type AppStateEvent = $Keys<AppStateEventDefinitions>;
+export type AppStateEvent = keyof AppStateEventDefinitions;
 
 type NativeAppStateEventDefinitions = {
   appStateDidChange: [{app_state: AppStateStatus}],

packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -49,30 +49,28 @@ type AccessibilityEventTypes =
   | 'windowStateChange';
 
 // Mapping of public event names to platform-specific event names.
-const EventNames: Map<
-  $Keys<AccessibilityEventDefinitions>,
-  string,
-> = Platform.OS === 'android'
-  ? new Map([
-      ['change', 'touchExplorationDidChange'],
-      ['reduceMotionChanged', 'reduceMotionDidChange'],
-      ['highTextContrastChanged', 'highTextContrastDidChange'],
-      ['screenReaderChanged', 'touchExplorationDidChange'],
-      ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
-      ['invertColorsChanged', 'invertColorDidChange'],
-      ['grayscaleChanged', 'grayscaleModeDidChange'],
-    ])
-  : new Map([
-      ['announcementFinished', 'announcementFinished'],
-      ['boldTextChanged', 'boldTextChanged'],
-      ['change', 'screenReaderChanged'],
-      ['grayscaleChanged', 'grayscaleChanged'],
-      ['invertColorsChanged', 'invertColorsChanged'],
-      ['reduceMotionChanged', 'reduceMotionChanged'],
-      ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
-      ['screenReaderChanged', 'screenReaderChanged'],
-      ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
-    ]);
+const EventNames: Map<keyof AccessibilityEventDefinitions, string> =
+  Platform.OS === 'android'
+    ? new Map([
+        ['change', 'touchExplorationDidChange'],
+        ['reduceMotionChanged', 'reduceMotionDidChange'],
+        ['highTextContrastChanged', 'highTextContrastDidChange'],
+        ['screenReaderChanged', 'touchExplorationDidChange'],
+        ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
+        ['invertColorsChanged', 'invertColorDidChange'],
+        ['grayscaleChanged', 'grayscaleModeDidChange'],
+      ])
+    : new Map([
+        ['announcementFinished', 'announcementFinished'],
+        ['boldTextChanged', 'boldTextChanged'],
+        ['change', 'screenReaderChanged'],
+        ['grayscaleChanged', 'grayscaleChanged'],
+        ['invertColorsChanged', 'invertColorsChanged'],
+        ['reduceMotionChanged', 'reduceMotionChanged'],
+        ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
+        ['screenReaderChanged', 'screenReaderChanged'],
+        ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
+      ]);
 
 /**
  * Sometimes it's useful to know whether or not the device has a screen reader
@@ -426,7 +424,7 @@ const AccessibilityInfo = {
    *
    * See https://reactnative.dev/docs/accessibilityinfo#addeventlistener
    */
-  addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
+  addEventListener<K: keyof AccessibilityEventDefinitions>(
     eventName: K,
     // $FlowFixMe[incompatible-type] - Flow bug with unions and generics (T128099423)
     handler: (...AccessibilityEventDefinitions[K]) => void,

packages/react-native/Libraries/Components/Keyboard/Keyboard.js

@@ -16,7 +16,7 @@ import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
 import NativeKeyboardObserver from './NativeKeyboardObserver';
 
-export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
+export type KeyboardEventName = keyof KeyboardEventDefinitions;
 
 export type KeyboardEventEasing =
   | 'easeIn'
@@ -146,7 +146,7 @@ class KeyboardImpl {
    *
    * @param {function} callback function to be called when the event fires.
    */
-  addListener<K: $Keys<KeyboardEventDefinitions>>(
+  addListener<K: keyof KeyboardEventDefinitions>(
     eventType: K,
     listener: (...KeyboardEventDefinitions[K]) => unknown,
     context?: unknown,
@@ -159,7 +159,7 @@ class KeyboardImpl {
    *
    * @param {string} eventType The native event string listeners are watching which will be removed.
    */
-  removeAllListeners<K: $Keys<KeyboardEventDefinitions>>(eventType: ?K): void {
+  removeAllListeners<K: keyof KeyboardEventDefinitions>(eventType: ?K): void {
     this._emitter.removeAllListeners(eventType);
   }
 

packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js

@@ -21,7 +21,7 @@ export type {ProgressBarAndroidProps};
 // of ProgressBarAndroidProps. TS's Omit does not distribute over unions, so
 // we define our own version which does. This does not affect Flow.
 // $FlowExpectedError[unclear-type]
-type Omit<T, K> = T extends any ? Pick<T, Exclude<$Keys<T>, K>> : T;
+type Omit<T, K> = T extends any ? Pick<T, Exclude<keyof T, K>> : T;
 
 /**
  * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.

packages/react-native/Libraries/Components/StatusBar/StatusBar.js

@@ -20,7 +20,7 @@ import * as React from 'react';
 /**
  * Status bar style
  */
-export type StatusBarStyle = $Keys<{
+export type StatusBarStyle = keyof {
   /**
    * Default status bar style (dark for iOS, light for Android)
    */
@@ -34,12 +34,12 @@ export type StatusBarStyle = $Keys<{
    */
   'dark-content': string,
   ...
-}>;
+};
 
 /**
  * Status bar animation
  */
-export type StatusBarAnimation = $Keys<{
+export type StatusBarAnimation = keyof {
   /**
    * No animation
    */
@@ -53,7 +53,7 @@ export type StatusBarAnimation = $Keys<{
    */
   slide: string,
   ...
-}>;
+};
 
 export type StatusBarPropsAndroid = Readonly<{
   /**