Difference between React$ComponentType and React.ComponentType?

I’m currently experiencing an issue where replacing React$ComponentType with React.ComponentType in react-intl’s injectIntl() libdef fixes a type checking error.

iff --git a/flow-typed/npm/react-intl_v2.x.x.js b/flow-typed/npm/react-intl_v2.x.x.js
index 07744d6..2a78d3e 100644
--- a/flow-typed/npm/react-intl_v2.x.x.js
+++ b/flow-typed/npm/react-intl_v2.x.x.js
@@ -126,14 +126,14 @@ declare module "react-intl" {
     messageDescriptors: T
   ): T;
   declare function injectIntl<Props: {}>(
-    WrappedComponent: React$ComponentType<
+    WrappedComponent: React.ComponentType<
       { intl: $npm$ReactIntl$IntlShape } & Props
     >,
     options?: {
       intlPropName?: string,
       withRef?: boolean
     }
-  ): React$ComponentType<Props>;
+  ): React.ComponentType<Props>;
   declare function formatMessage(
     messageDescriptor: $npm$ReactIntl$MessageDescriptor,
     values?: Object

Although the above modification obviously does the job, and something I was about to open a PR for, I’d really appreciate understanding why that works rather than something I found out of luck by reading the React utility types 🤔

flow check error for reference

Error: src/components/more/MorePage.js:84
                 v----------------
 84:             <EnterDepositCode
 85:               onSubmit={submitDepositCode}
 86:               loading={submitDepositCodeLoading}
...:
 89:             />
                 -^ React element `EnterDepositCode`
 43: export class EnterDepositCode extends React.Component<Props, State> {
                                                           ^^^^^ property `intl`. Property not found in. See: src/components/more/EnterDepositCode.js:43
                 v----------------
 84:             <EnterDepositCode
 85:               onSubmit={submitDepositCode}
 86:               loading={submitDepositCodeLoading}
...:
 89:             />
                 -^ props of React element `EnterDepositCode`

Any hints?

[kalley]

To use React.ComponentType you have to use the star import (import * as React from 'react'). If you haven't imported react that way, those types are not available off of React. With the $` separator, you have access to the globally defined types.

[phillipj]

Aha, thanks a lot for explaining the differences!

With your comments, I assume that flow-typed libdefs are required to use React$ComponentType, but application code could use React.ComponentType as long as the entire React namespace has been required first.