[flow][docs] Update some docs to use declare const instead of `decl…

…are var`, and use `as` casting syntax

Summary:
First noticed this issue with the new render types docs, then found some other cases to fix.

- Use `declare const` (or `declare let` if required) instead of `declare var` - let's use modern syntax
- Use `as` casting instead of the legacy casting syntax
- Other minor fixes

Changelog: [internal]

Reviewed By: SamChou19815

Differential Revision: D55107085

fbshipit-source-id: c3880d68c4f1b55b54ce25c222710207ba8624b9

website/docs/enums/using-enums.md

@@ -457,7 +457,7 @@ If your enum value is in a union (e.g. `?Status`), first refine to only the enum
 const status: ?Status = ...;
 
 if (status != null) {
-  (status: Status); // 'status' is refined to 'Status' at this point
+  status as Status; // 'status' is refined to 'Status' at this point
   switch (status) {
     case Status.Active: break;
     case Status.Paused: break;
@@ -472,7 +472,7 @@ const val: Status | number = ...;
 
 // 'Status' is a string enum
 if (typeof val === 'string') {
-  (val: Status); // 'val' is refined to 'Status' at this point
+  val as Status; // 'val' is refined to 'Status' at this point
   switch (val) {
     case Status.Active: break;
     case Status.Paused: break;

website/docs/lang/annotation-requirement.md

@@ -23,7 +23,7 @@ The same logic can be applied for all `const`-like initializations. Where things
 get a little more complicated is when variable initialization spans across multiple statements,
 for example in
 ```js flow-check
-declare var maybeString: ?string;
+declare const maybeString: ?string;
 
 let len;
 if (typeof maybeString === "string") {
@@ -51,7 +51,7 @@ an object with a `length` property, or a string, just to name a few. If later on
 the program we had the following calls to `getLength`
 ```js
 getLength("abc");
-getLength({ length: 1 });
+getLength({length: 1});
 ```
 one possible inference would be that `x` is a `string | { length: number }`. What this implies,
 however, is that the type of `getLength` is determined by any part of the current
@@ -116,7 +116,7 @@ Flow can infer the types for unannotated parameters even when they are nested wi
 other expressions like objects. For example in
 in
 ```js flow-check
-const fn3: { f: (number) => void } = { f: (x) => {(x: string)} };
+const fn3: {f: (number) => void} = {f: (x) => {x as string}};
 ```
 Flow will infer `number` as the type of `x`, and so the cast fails.
 
@@ -183,7 +183,7 @@ or calling `useState` from the React library:
 ```js flow-check
 const set = new Set([1, 2, 3]);
 
-import { useState } from 'react';
+import {useState} from 'react';
 const [num, setNum] = useState(42);
 ```
 Flow here infers that the type of `set` is `Set<number>`, and that `num` and `setNum`
@@ -291,10 +291,10 @@ Finally, a common source of errors is the case where the inferred type in a gene
 call is correct for the call itself, but not indicative of the expected use later in the code.
 For example, consider
 ```js flow-check
-import { useState } from 'react';
+import {useState} from 'react';
 const [str, setStr] = useState("");
 
-declare var maybeString: ?string;
+declare const maybeString: ?string;
 setStr(maybeString);
 ```
 Passing the string `""` to the call to `useState` makes Flow infer `string` as the type

website/docs/lang/variance.md

@@ -81,7 +81,7 @@ type NonCovariantOf<X> = {
 ```
 Let's also declare a variable `nonCovariantCity` of type `NonCovariantOf<City>`
 ```js
-declare var nonCovariantCity: NonCovariantOf<City>;
+declare const nonCovariantCity: NonCovariantOf<City>;
 ```
 Now, it is not safe to consider `nonCovariantCity` as an object of type `NonCovariantOf<Noun>`.
 Were we allowed to do this, we could have the following declaration:
@@ -109,7 +109,7 @@ type InvariantOf<X> = {
 ```
 Assuming a variable
 ```js
-declare var invariantCity: InvariantOf<City>;
+declare const invariantCity: InvariantOf<City>;
 ```
 it is *not* safe to use `invariantCity` in a context where:
 - an `InvariantOf<Noun>` is needed, because we should not be able to write a `Noun` to property

website/docs/linting/rule-reference.md

@@ -148,7 +148,7 @@ type Foo = {
   bar: number
 }
 
-declare var foo: Foo;
+declare const foo: Foo;
 foo?.bar; // Error
 ```
 
@@ -162,7 +162,7 @@ type Foo = {
   }
 }
 
-declare var foo: ?Foo;
+declare const foo: ?Foo;
 foo?.bar?.baz; // Error
 ```
 

website/docs/react/render-types.md

@@ -265,17 +265,17 @@ component Header() {
  return <h1>Hello Header!</h1>;
 }
 
-declare var rendersHeader: renders Header;
-declare var rendersMaybeHeader: renders? Header;
-declare var rendersHeaderList: renders* Header;
+declare const rendersHeader: renders Header;
+declare const rendersMaybeHeader: renders? Header;
+declare const rendersHeaderList: renders* Header;
 
-(rendersHeader: React.Node);
-(rendersMaybeHeader: React.Node);
-(rendersHeaderList: React.Node);
+rendersHeader as React.Node;
+rendersMaybeHeader as React.Node;
+rendersHeaderList as React.Node;
 
-(rendersHeader: React.MixedElement);
-(rendersMaybeHeader: React.MixedElement); // ERROR!
-(rendersHeaderList: React.MixedElement); // ERROR!
+rendersHeader as React.MixedElement;
+rendersMaybeHeader as React.MixedElement; // ERROR!
+rendersHeaderList as React.MixedElement; // ERROR!
 ```
 
 `renders Foo` is a subtype of `renders? Foo`, and `renders? Foo` is a subtype of `renders* Foo`.
@@ -287,15 +287,15 @@ component Header() {
  return <h1>Hello Header!</h1>;
 }
 
-declare var rendersHeader: renders Header;
-declare var rendersMaybeHeader: renders? Header;
-declare var rendersHeaderList: renders* Header;
+declare const rendersHeader: renders Header;
+declare const rendersMaybeHeader: renders? Header;
+declare const rendersHeaderList: renders* Header;
 
-(rendersHeader: renders? Header);
-(rendersHeader: renders* Header);
-(rendersMaybeHeader: renders* Header);
+rendersHeader as renders? Header;
+rendersHeader as renders* Header;
+rendersMaybeHeader as renders* Header;
 
-(rendersMaybeHeader: renders Header); // ERROR
-(rendersHeaderList: renders Header); // ERROR
-(rendersHeaderList: renders? Header); // ERROR
+rendersMaybeHeader as renders Header; // ERROR
+rendersHeaderList as renders Header; // ERROR
+rendersHeaderList as renders? Header; // ERROR
 ```

website/docs/react/types.md

@@ -139,10 +139,10 @@ class Bar extends React.Component<{}> {}
 ```
 
 Take note of the `typeof`, it is required! We want to get the
-type *of* the value `Foo`. `(Foo: Foo)` is an error because `Foo` cannot be used
-as a type, so the following is correct: `(Foo: typeof Foo)`.
+type *of* the value `Foo`. `Foo as Foo` is an error because `Foo` cannot be used
+as a type, so the following is correct: `Foo as typeof Foo`.
 
-`Bar` without `typeof` would be the type of an instance of `Bar`: `(new Bar(): Bar)`.
+`Bar` without `typeof` would be the type of an instance of `Bar`: `new Bar() as Bar`.
 We want the type *of* `Bar` not the type of an instance of `Bar`.
 `Class<Bar>` would also work here, but we prefer `typeof` for consistency
 with function components.

website/docs/types/functions.md

@@ -291,7 +291,7 @@ is passed in as an argument to the respective call.
 For example, consider the *inlined* refinement
 
 ```js flow-check
-declare var obj: { n?: number };
+declare const obj: {n?: number};
 
 if (obj.n != null) {
   const n: number = obj.n;
@@ -308,7 +308,7 @@ function bar(a: {n?: number, ...}): %checks {
   return a.n != null;
 }
 
-declare var obj: {n?: number};
+declare const obj: {n?: number};
 
 if (bar(obj)) {
   const n: number = obj.n; // Error
@@ -334,7 +334,7 @@ function add(x: number, y: number) {
 
 add.bar = "hello world";
 
-(add: CallableObj);
+add as CallableObj;
 ```
 
 In general, functions can have properties assigned to them if they are function declarations, or

website/docs/types/tuples.md

@@ -192,8 +192,8 @@ Optional elements must be at the end of the tuple type, after all required eleme
 
 ```js flow-check
 type T = [foo: number, bar?: string];
-([1, "s"]: T); // OK: has all elements
-([1]: T); // OK: skipping optional element
+[1, "s"] as T; // OK: has all elements
+[1] as T; // OK: skipping optional element
 ```
 
 You cannot write `undefined` to the optional element - add `| void` to the element type if you want to do so:
@@ -202,7 +202,7 @@ You cannot write `undefined` to the optional element - add `| void` to the eleme
 type T = [foo?: number, bar?: number | void];
 declare const x: T;
 x[0] = undefined; // ERROR
-([undefined]: T); // ERROR
+[undefined] as T; // ERROR
 
 x[1] = undefined; // OK: we've added `| void` to the element type
 ```
@@ -211,10 +211,10 @@ You can also use the [`Partial`](../utilities/#toc-partial) and [`Required`](../
 
 ```js flow-check
 type AllRequired = [number, string];
-([]: Partial<AllRequired>); // OK: like `[a?: number, b?: string]` now
+[] as Partial<AllRequired>; // OK: like `[a?: number, b?: string]` now
 
 type AllOptional = [a?: number, b?: string];
-([]: Required<AllOptional>); // ERROR: like `[a: number, b: string]` now
+[] as Required<AllOptional>; // ERROR: like `[a: number, b: string]` now
 ```
 
 Tuples with optional elements have an arity (length) that is a range rather than a single number. For example, `[number, b?: string]` has an length of 1-2.
@@ -226,7 +226,7 @@ You can spread a tuple type into another tuple type to make a longer tuple type:
 ```js flow-check
 type A = [number, string];
 type T = [...A, boolean]; // Same as `[number, string, boolean]`
-([1, "s", true]: T); // OK
+[1, "s", true] as T; // OK
 ```
 
 Tuple spreads preserve labels, variance, and optionality. You cannot spread arrays into tuples, only other tuples.
@@ -238,14 +238,14 @@ You can still type this value as the appropriate `Array<T>` type - only the tupl
 ```js flow-check
 const a: [foo?: 1] = [];
 const b = [0, ...a, 2]; // At runtime this is `[0, 2]`
-(b: [0, 1 | void, 2]); // ERROR
-(b: Array<number | void>); // OK
+b as [0, 1 | void, 2]; // ERROR
+b as Array<number | void>; // OK
 
 const c: [0, foo?: 1] = [0];
 const d: [bar?: 2] = [2];
 const e = [...c, ...d]; // At runtime this is `[0, 2]`
-(e: [0, foo?: 1, bar?: 2]); // ERROR
-(e: Array<number | void>); // OK
+e as [0, foo?: 1, bar?: 2]; // ERROR
+e as Array<number | void>; // OK
 ```
 
 ## Adoption