Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Need help understanding some Flow type syntax

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.

like image 212
alloy Avatar asked Dec 28 '17 12:12

alloy


People also ask

What is flow syntax?

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.

What are flow types?

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.

What is JavaScript version Flow?

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.

Is flow the same as TypeScript?

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.


1 Answers

$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.

like image 153
satya164 Avatar answered Sep 19 '22 09:09

satya164