I’m working on porting the Flow type generator that comes with a library (Relay) to one that emits TypeScript types, but have some questions about some Flow syntax that’s not obvious to me in this snippet:
import type { FragmentReference } from 'relay-runtime';
export opaque type TypenameInside$ref: FragmentReference = FragmentReference;
export type TypenameInside = ({|
+__typename: 'User',
+firstName: ?string,
+$refType: TypenameInside$ref,
|} | {|
+__typename: 'Page',
+username: ?string,
+$refType: TypenameInside$ref,
|} | {|
// This will never be '%other', but we need some
// value in case none of the concrete values match.
+__typename: '%other',
+$refType: TypenameInside$ref,
|});
Namely, what are $ref
, $refType
, and %other
? Or are they not Flow specific, but rather Relay specific?
I tried searching the flowtype docs and repo, but had a very hard time coming up with answers. Links to the docs and/or relevant portions of the implementation would be greatly appreciated as well.
To bring static typing to JavaScript, Flow specifies a number of syntax extensions, which are used to describe types, annotate programs, and share types between modules. Flow's syntax extensions are only additions which can be easily stripped away and don't change the runtime behavior of JavaScript in any way.
Flow is a static type checker that allows a developer to check for type errors while developing code. This means a developer receives faster feedback about the code, which they can use to improve its quality. Flow works by using annotations and type definitions for adding type checking support to your code.
Flow is a static type checker that brings type annotations to JavaScript. WebStorm recognizes Flow structures and provides syntax highlighting for them on all operating systems.
The type definition syntax of Flow and TypeScript is very similar. They both support JavaScript primitive types and derived types for type checking variables. The type annotations syntax is also very similar in both cases. And they both have generics, which we can use to write code that works with different types.
$ref
, $refType
etc. are normal type names.
The $
prefix for types are a convention to denote utility types such as $Keys
, though doesn't look like the convention is followed here.
%other
is just a normal string. Relay probably uses the string for some special purpose internally.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With