### Serve Website without Inline Flow Errors Source: https://github.com/facebook/flow/blob/main/website/README.md Installs dependencies and starts the development server, disabling inline Flow errors for faster builds if not needed. ```bash $ yarn install $ NO_INLINE_FLOW_ERRORS=1 yarn start ``` -------------------------------- ### Install Dependencies Source: https://github.com/facebook/flow/blob/main/packages/flow-for-vscode/CONTRIBUTING.md Run this command in the root of the cloned repository to install project dependencies. ```bash yarn install --pure-lockfile ``` -------------------------------- ### Install with yarn Source: https://github.com/facebook/flow/blob/main/packages/babel-plugin-syntax-flow-parser/README.md Install the plugin as a development dependency using yarn. ```sh yarn add babel-plugin-syntax-flow-parser --dev ``` -------------------------------- ### Display Autocomplete Command Help Source: https://github.com/facebook/flow/blob/main/website/docs/cli/index.md To get specific help on a particular command, append `--help` to the command. This example shows how to get help for the `autocomplete` command. ```sh flow autocomplete --help ``` -------------------------------- ### Install with npm Source: https://github.com/facebook/flow/blob/main/packages/babel-plugin-syntax-flow-parser/README.md Install the plugin as a development dependency using npm. ```sh npm install --save-dev babel-plugin-syntax-flow-parser ``` -------------------------------- ### Profiling Flow Start Logs Source: https://github.com/facebook/flow/blob/main/Changelog.md Demonstrates how to print profiling information to the logs when starting the Flow server using the `--profile` flag. ```bash flow start --profile ``` -------------------------------- ### Install flow-bin globally Source: https://github.com/facebook/flow/blob/main/website/blog/2016-08-01-Windows-Support.md Install the flow-bin npm package globally for system-wide access. ```bash > npm install --global flow-bin ``` -------------------------------- ### Install Project Libdefs with Flow-Typed Source: https://github.com/facebook/flow/blob/main/website/blog/2016-10-13-Flow-Typed.md After installing project dependencies, run this command to automatically find, download, and install version-correct libdefs for your project's dependencies. ```bash yarn install # Or `npm install` if you're old-school :) flow-typed install ``` -------------------------------- ### Install flow-upgrade Source: https://github.com/facebook/flow/blob/main/packages/flow-upgrade/README.md Install the flow-upgrade utility using yarn. Prettier is expected as a peer dependency. ```bash yarn add flow-upgrade ``` -------------------------------- ### Install Babel Presets and Plugins Source: https://github.com/facebook/flow/blob/main/website/docs/tools/babel.md Install the necessary Babel preset and plugin for Flow type stripping using Yarn or npm. ```sh yarn add --dev @babel/preset-flow babel-plugin-syntax-hermes-parser # or npm install --save-dev @babel/preset-flow babel-plugin-syntax-hermes-parser ``` -------------------------------- ### Install flow-bin with npm Source: https://github.com/facebook/flow/blob/main/website/blog/2016-08-01-Windows-Support.md Install the flow-bin npm package as a development dependency. Recommended to use npm v3 on Windows to avoid long node_modules paths. ```bash > npm install --save-dev flow-bin ``` -------------------------------- ### Example .flowconfig Directives Source: https://github.com/facebook/flow/blob/main/website/docs/config/index.md This example demonstrates how to use include, ignore, and libs directives in a .flowconfig file to manage which files are checked and which declarations are used. Paths are relative to the project root. ```plaintext [include] ../otherdir/src [ignore] .*/build/.* [libs] ./lib ``` -------------------------------- ### Install Babel Dependencies Source: https://github.com/facebook/flow/blob/main/website/docs/getting-started.md Install necessary Babel packages for Flow type stripping. Use npm or Yarn. ```bash npm install --save-dev @babel/core @babel/cli @babel/preset-flow babel-plugin-syntax-hermes-parser ``` -------------------------------- ### Install Time Comparison: flow-remove-types vs Babel Source: https://github.com/facebook/flow/blob/main/packages/flow-remove-types/README.md Compares the installation time of flow-remove-types and Babel via npm. ```bash time npm install flow-remove-types real 0m3.193s user 0m1.643s sys 0m0.775s ``` ```bash time npm install babel-cli babel-plugin-transform-flow-strip-types real 0m23.200s user 0m10.395s sys 0m4.238s ``` -------------------------------- ### Installing react-tools for Typecast Transformation Source: https://github.com/facebook/flow/blob/main/website/blog/2015-02-18-Typecasts.md Provides the npm command to install a specific beta version of `react-tools` which includes transformations for Flow features like typecasts. ```bash npm install react-tools@0.13.0-beta.2 ``` -------------------------------- ### Install Flow-Typed CLI Source: https://github.com/facebook/flow/blob/main/website/blog/2016-10-13-Flow-Typed.md Install the flow-typed CLI tool globally using yarn or npm. ```bash yarn global add flow-typed ``` ```bash npm install -g flow-typed ``` -------------------------------- ### Install ESLint and Hermes ESLint Source: https://github.com/facebook/flow/blob/main/website/docs/tools/eslint.md Install the necessary ESLint packages, including hermes-eslint and the Flow plugin, using Yarn or npm. ```sh yarn add --dev eslint hermes-eslint eslint-plugin-ft-flow ``` ```sh npm install --save-dev eslint hermes-eslint eslint-plugin-ft-flow ``` -------------------------------- ### Install flow-remove-types Globally Source: https://github.com/facebook/flow/blob/main/packages/flow-remove-types/README.md Install the package globally to use the command-line interface. ```bash npm install --global flow-remove-types ``` -------------------------------- ### Install js_of_ocaml Source: https://github.com/facebook/flow/blob/main/src/parser/README.md Installs the js_of_ocaml compiler, which is required for compiling the Flow Parser to JavaScript. ```bash opam install js_of_ocaml.3.9.0 ``` -------------------------------- ### Flow Try Example for == or === Comparison Errors Source: https://github.com/facebook/flow/blob/main/Changelog.md This example illustrates that errors for bad == or === comparisons will now consistently appear, addressing a previous issue where some errors might be hidden due to optimizations. ```flow https://flow.org/try/#0N4AgUCICYKYMYBsCGAnGIBuqQA8CMAXCAHYCuAtgEYwogA+IAzgC4oCWxA5gNwTTzI0mbAE9CJCtVoMW7Lr0hwA9sRYg4IALy48IAITax3EAHoTJJQHcQNFEpSMwAXzBhQfZaua4ATFpAAFOIA-GRUNACU9AwARDEK6ipqIn7aQUShkpHRIHEJnmoa2jh+BiApxmYgAA5oGGxKpIwIIjYodg7OYEA ``` -------------------------------- ### Flow Try Example for Utility Type Errors Source: https://github.com/facebook/flow/blob/main/Changelog.md This example relates to a bug fix in LTI mode where some errors in utility types were not properly shown. ```flow https://flow.org/try/#0CYUwxgNghgTiAEAzArgOzAFwJYHtVIEYAeAeQD4AKHALnhIEpaASABRhwAcQYMBPAFV5ciAbwC+AGngByDtLIBueAHpl8AKIx2MeAGcAFjmQRg8DjiyoM8fdxAA6AFCPQkWAgBuseDXjiFjhSIBFSM8CAAthx89AFAA ``` -------------------------------- ### Flow Try Example: Implicit Instantiation Errors Source: https://github.com/facebook/flow/blob/main/Changelog.md This example may reveal new errors due to a correctness fix in implicit instantiation, potentially surfacing more underconstrained errors in LTI. ```javascript function foo(x: T): T { return x; } foo(1); foo('a'); ``` -------------------------------- ### Install Prettier Plugin for Hermes Source: https://github.com/facebook/flow/blob/main/website/docs/tools/prettier.md Install the @prettier/plugin-hermes package as a development dependency to enable support for the latest Flow features. ```bash yarn add --dev @prettier/plugin-hermes ``` -------------------------------- ### Start Babel in Watch Mode Source: https://github.com/facebook/flow/blob/main/packages/flow-for-vscode/CONTRIBUTING.md Use this command to start the Babel build process in watch mode, which automatically recompiles code changes. ```bash Cmd+Shift+B ``` -------------------------------- ### Type Parameter Instantiation Example Source: https://github.com/facebook/flow/blob/main/Changelog.md Demonstrates the updated type parameter instantiation in generic calls with upper bounds. This example highlights the inference of the smallest type based on subtyping. ```javascript function foo(x: T): T { return x; } // With upper bounds, T is inferred as the smallest type // that satisfies all upper bounds. foo(123); foo("hello"); // If T is constrained to a specific type, it will be inferred as that type. function bar(x: T): T { return x; } bar("hello"); // T is inferred as string ``` -------------------------------- ### Flow Try Example: Missing Local Annotations Fix Source: https://github.com/facebook/flow/blob/main/Changelog.md This example shows a fix for a bug where an unannotated parameter did not previously trigger a `missing-local-annot` error under LTI. ```javascript function foo(x) { return x; } ``` -------------------------------- ### Flow Try Example: `undefined` Type Source: https://github.com/facebook/flow/blob/main/Changelog.md This example shows Flow parsing and error reporting for the `undefined` type, recommending `void` as the Flow equivalent. This assists users transitioning from TypeScript. ```javascript /* @flow */ // Previously allowed, now an error: // type MyType = undefined; // Recommended Flow equivalent: type MyType = void; ``` -------------------------------- ### Flow Type Example for Cyclic Types Source: https://github.com/facebook/flow/blob/main/Changelog.md This example demonstrates how Flow can detect bad cyclic types, including those across module boundaries. It is provided as a link to the Flow try playground. ```flow https://flow.org/try/#1N4Igxg9gdgZglgcxALlAIwIZoKYBsD6uEEAztvhgE6UYCe+JADpdhgCYowa5kA0I2KAFcAtiRQAXSkOz9sADwxgJ+NPTbYuQ3BMnTZA+Y2yU4IwRO4A6SFBIrGVDGM7c+h46fNRLuKxJIGWh8MeT0ZfhYlCStpHzNsFBAMIQkIEQwJODAQfiEyfBE4eWw2fDgofDBMsAALfAA3KjgsXGxxZC4eAw0G-GhcWn9aY3wWZldu-g1mbGqJUoBaCRHEzrcDEgBrbAk62kXhXFxJ923d-cPRHEpTgyEoMDaqZdW7vKgoOfaSKgOKpqmDA+d4gB5fMA-P6LCCMLLQbiLOoYCqgh6-GDYRYIXYLSgkRZkCR4jpddwPfJLZjpOBkO4AX34kA0SRWxgABABhWhPbIAdTgElqABIAGrcGQkdkAXnZwAAOlB2ezICJvBJkOz7KYoAheIrlQBtHa0TXaioIAC6mrFEvaAB5ubywAKhbbcJKAHy8dkAel97MwbBVPNw2XZbNk7KgEAA7irgYHsOyNAtlKVFfSANyKxUaJ5UZO2ezspq4G3ij0Op1hl2CkWVr05qD53CFlXQEskM1SC3NgAUwHZhpI1tL3HZ9IAlOyMFKa-z6+7JVm-QGTJQILd+A0TCQ4NAkhl7CYQPSgA ``` -------------------------------- ### Flow Example: Indexed Access on Interfaces Source: https://github.com/facebook/flow/blob/main/Changelog.md This example shows how indexed access on interfaces/instances is handled. Access with string literals will now access named properties, potentially causing new errors if the access pattern has changed. ```javascript interface I { a: string, b: number } const x: I = { a: 'hello', b: 1 }; const y: string = x.a; ``` -------------------------------- ### Initialize Flow project with flow binary Source: https://github.com/facebook/flow/blob/main/website/blog/2016-08-01-Windows-Support.md Initialize a Flow project by running the 'flow init' command using the locally installed flow binary. ```bash > ./node_modules/.bin/flow init ``` -------------------------------- ### Build OCaml Flow Parser Library Source: https://github.com/facebook/flow/blob/main/src/parser/README.md Builds the Flow Parser library using OCaml. This command is used after initial setup and dependency installation. ```bash make ``` -------------------------------- ### Serve Website with Flow Binary Source: https://github.com/facebook/flow/blob/main/website/README.md Builds the Flow binary and starts a local development server. Changes are reflected live without a server restart. ```bash $ ../scripts/serve-website.sh ``` -------------------------------- ### Flow Try Example: Inexact Incompatible with Exact Errors Source: https://github.com/facebook/flow/blob/main/Changelog.md This example demonstrates how Flow might catch more inexact incompatible with exact errors. Use the Flow Try link to experiment with the code. ```javascript /* @flow */ type ExactFoo = { a: number, b: string }; type InexactFoo = { a: number, b?: string }; function takesExact(x: ExactFoo) {} function takesInexact(x: InexactFoo) {} takesExact({ a: 1, b: 'hello' }); // OK takesInexact({ a: 1, b: 'hello' }); // OK takesInexact({ a: 1 }); // OK // This would have previously passed, but now errors: takesExact({ a: 1 }); // Error: Property `b` is missing in object literal. Property `b` is missing in object literal. (exact) ``` -------------------------------- ### Check opam version Source: https://github.com/facebook/flow/blob/main/README.md Validate that the installed opam version is 2.x.x. If a 1.x.x version is installed, refer to opam documentation for manual installation of a newer version. ```sh opam --version ``` -------------------------------- ### Initialize Flow project and check code with flow.exe Source: https://github.com/facebook/flow/blob/main/website/blog/2016-08-01-Windows-Support.md Demonstrates initializing a Flow project and checking a JavaScript file for type errors using the downloaded flow.exe binary. The example shows a type incompatibility error. ```bash > mkdir demo > cd demo > flow.exe init > "/* @flow */ var x: number = true;" | Out-File -Encoding ascii test.js > flow.exe check test.js:1 1: /* @flow */ var x: number = true; ^^^^ boolean. This type is incompatible with 1: /* @flow */ var x: number = true; ^^^^^^ number ``` -------------------------------- ### Serve Website with Rust-port Flow.js Source: https://github.com/facebook/flow/blob/main/website/README.md Starts the local development server using the Rust-port `flow.js`. ```bash $ ../scripts/serve-website.sh --flow-js=rust-wasm ``` -------------------------------- ### Flow Try Example: Sentinel Refinement with Numeric Unions Source: https://github.com/facebook/flow/blob/main/Changelog.md Demonstrates a fix for unsound behavior in LTI mode concerning sentinel refinement with unions of numeric types as tags. This example can be tested in the Flow Try environment. ```javascript /* @flow */ type T = number | string; function foo(x: T) { if (x === 1) { (x: 1); } } foo(1); foo('1'); ``` -------------------------------- ### Import React as Namespace Source: https://github.com/facebook/flow/blob/main/website/docs/react/types.md Demonstrates importing React as a namespace for using utility types like React.MixedElement. ```flow-check import * as React from 'react';
as React.MixedElement; // OK 1 as React.MixedElement; // Error ``` -------------------------------- ### Compiling a project with LZ4 DLL using GCC/MinGW Source: https://github.com/facebook/flow/blob/main/src/third-party/lz4/README.md Example command for linking a C project with the LZ4 dynamic library using GCC/MinGW. Ensure the header files and DLL are accessible. ```bash gcc $(CFLAGS) -Iinclude/ test-dll.c -o test-dll dll\liblz4.dll ``` -------------------------------- ### Install flow-remove-types Locally Source: https://github.com/facebook/flow/blob/main/packages/flow-remove-types/README.md Install the package as a project dependency for use in scripts or the JavaScript API. ```bash npm install flow-remove-types ``` -------------------------------- ### Install flow-remove-types Dependency Source: https://github.com/facebook/flow/blob/main/website/docs/getting-started.md Install the flow-remove-types CLI tool as a dev dependency using npm or Yarn. ```bash npm install --save-dev flow-remove-types ``` -------------------------------- ### OCaml Base64 Encoding and Decoding Example Source: https://github.com/facebook/flow/blob/main/src/third-party/ocaml-base64/README.md Demonstrates simple Base64 encoding and decoding using the `base64` library in OCaml. Ensure the `base64` library is required before use. ```shell utop # #require "base64";; utop # let enc = Base64.encode_exn "OCaml rocks!";; val enc : string = "T0NhbWwgcm9ja3Mh" utop # let plain = Base64.decode_exn enc;; val plain : string = "OCaml rocks!" ``` -------------------------------- ### Install flow-bin Dev Dependency Source: https://github.com/facebook/flow/blob/main/website/docs/getting-started.md Install the flow-bin npm package as a development dependency for per-project Flow integration. ```bash npm install --save-dev flow-bin ``` -------------------------------- ### Initialize Flow Project Source: https://github.com/facebook/flow/blob/main/website/docs/getting-started.md Run this command at the top level of your project to create an empty .flowconfig file, enabling Flow for your project. ```sh flow init ``` -------------------------------- ### Basic .flowconfig Options Structure Source: https://github.com/facebook/flow/blob/main/website/docs/config/options.md Illustrates the basic key-value pair structure for options within the [options] section of a .flowconfig file. Any options not explicitly set will use their default values. ```ini [options] keyA=valueA keyB=valueB ``` -------------------------------- ### Flow Error Output Example Source: https://github.com/facebook/flow/blob/main/website/docs/getting-started.md Example of the error output provided by Flow when a type inconsistency is detected in the code. ```text Error ------------------------------------------------------------------- Cannot return `x` because number [1] is incompatible with string [2]. [incompatible-type] example.js:4:12 4| return x; // Error ^ References: example.js:2:18 2| function foo(x: ?number): string { ^^^^^^ [1] example.js:2:27 2| function foo(x: ?number): string { ^^^^^^ [2] Found 1 error ``` -------------------------------- ### Run flow-upgrade with --all option Source: https://github.com/facebook/flow/blob/main/packages/flow-upgrade/README.md Use the --all flag to upgrade all JavaScript files, not just those with an `// @flow` header. ```bash yarn create flow-upgrade --all ``` -------------------------------- ### Flow Try Example for Overload Resolution Errors Source: https://github.com/facebook/flow/blob/main/Changelog.md This example relates to an increase in `missing-local-annot` errors when Flow cannot resolve an overload. ```flow https://flow.org/try/#0CYUwxgNghgTiAEAzArgOzAFwJYHtVJxwAoAPALnlWQFsAjEGAGiQqKroYEp4BeAPngA3HFmCcKw0QG4AUKEiwEKdNjwFi5eAGcMMLKgDmzRKx17D3fkJFiJN2XPDQ4Q2PE3t6MeAB9tu-QNZREJSZgBPXgEAbwBfTil4AHok+AYYHG9qLC0tQPgoVFQcDChVfBDvcKA ``` -------------------------------- ### Configure Flow for Tests Source: https://github.com/facebook/flow/blob/main/tests/README.md Example .flowconfig content to enable 'all=true' option, which makes '// @flow' pragmas unnecessary in test files. ```ini [options] all=true ``` -------------------------------- ### Type Alias Syntax Examples Source: https://github.com/facebook/flow/blob/main/website/docs/types/aliases.md Demonstrates defining type aliases for various types including primitives, objects, unions, and other aliases. ```flow type NumberAlias = number; type ObjectAlias = { property: string, method(): number, }; type UnionAlias = 1 | 2 | 3; type AliasAlias = ObjectAlias; ``` -------------------------------- ### Display Flow CLI Help Source: https://github.com/facebook/flow/blob/main/website/docs/cli/index.md Use the `--help` flag to view all available commands and options for the Flow CLI. This is useful for understanding the full capabilities of the tool. ```sh flow --help ``` -------------------------------- ### Apply `experimental.quickfix` to a file Source: https://github.com/facebook/flow/blob/main/website/docs/cli/apply-code-action.md Applies all safe quickfixes to a file. Use `--in-place` to modify the file directly, otherwise output is to stdout. Include `--include-best-effort-fix` to apply one additional best-effort fix. ```sh flow apply-code-action 'experimental.quickfix' src/app.js ``` ```sh flow apply-code-action 'experimental.quickfix' --in-place src/app.js ``` ```sh flow apply-code-action 'experimental.quickfix' --include-best-effort-fix src/app.js ``` -------------------------------- ### Enum Member Name Starting Character Rule Source: https://github.com/facebook/flow/blob/main/website/docs/enums/defining-enums.md Enum member names must be valid identifiers and cannot start with lowercase 'a' through 'z', as these are reserved for methods. ```js enum Status { active, // Error: names can't start with lowercase 'a' through 'z' } ``` -------------------------------- ### Example JSON output for `suggestImports` Source: https://github.com/facebook/flow/blob/main/website/docs/cli/apply-code-action.md The output for `suggestImports` is a JSON object keyed by unbound name, where each value is an array of possible import actions. ```json { "OtherModule": [ { "title": "Import default from ./OtherModule", "kind": "quickfix", "edit": { "changes": { "file:///path/to/app.js": [ { "newText": "import OtherModule from \"./OtherModule\";\n\n", "range": { "start": { "character": 0, "line": 2 }, "end": { "character": 0, "line": 2 } } } ] } } } ] } ``` -------------------------------- ### Flow Try Example for Type Inference Source: https://github.com/facebook/flow/blob/main/Changelog.md This example demonstrates improved error explanations when type arguments are inferred from bounds or defaults, leading to downstream errors. ```flow https://flow.org/try/#0MYewdgzgLgBADjAvDMBTA7jACgJxAWwEsJUAKUnVCEAGwDdUBKJAPhkuvrICJvHGA3AChScAFzY8REgB5oOQmADmLQTAD06mKhx4cQoQBNUwGgENKMAGYBXMMCiFwMfGaWFgAYTM0aARhkAFRZSQNYXQgAPVENGCToQQkNhY1MLVGs7BycwFzcPb18AJiCkFBt8ACMdELDENiJo2IlA4SFXdy8ff1IIcN6JeUUlfgENLR09dvyu4t7+iEGoBWVR8e1dEH0Ogu6-efqYCAA6M0rgWLHNDamd2Zoig7YTs4u1a8mtoA ``` -------------------------------- ### typeof Type Syntax Examples Source: https://github.com/facebook/flow/blob/main/website/docs/types/typeof.md Illustrates the syntax and basic usage of `typeof` with different primitive types. ```js let num1 = 42; let num2: typeof num1 = 3.14; // Works! let num3: typeof num1 = 'world'; // Error! ``` ```js let bool1 = true; let bool2: typeof bool1 = false; // Works! let bool3: typeof bool1 = 42; // Error! ``` ```js let str1 = 'hello'; let str2: typeof str1 = 'world'; // Works! let str3: typeof str1 = false; // Error! ``` -------------------------------- ### Flow Try Example: Unannotated Parameters in Destructuring Source: https://github.com/facebook/flow/blob/main/Changelog.md This example demonstrates how unannotated parameters in destructuring assignments are now properly contextually typed under LTI, instead of defaulting to `any`. ```javascript const { x, y } = obj; function foo({ x, y }: { x: number, y: number }) { return x + y; } ``` -------------------------------- ### Recursive Namespace Hover Example Source: https://github.com/facebook/flow/blob/main/Changelog.md Illustrates the fix for a bug causing hover to hang indefinitely for recursive namespaces. This example shows the expected behavior after the fix. ```javascript declare namespace A { namespace B { type T = number; } } declare namespace A.B { type T = string; } // Hovering over A.B.T should not hang. ``` -------------------------------- ### Initialize opam Source: https://github.com/facebook/flow/blob/main/README.md Initialize the opam package manager. Use the appropriate command based on your operating system (Mac/Linux or Windows). ```sh # on Mac and Linux: opam init # on Windows: scripts/windows/init_opam.sh ``` -------------------------------- ### Define Base Classes for Variance Examples Source: https://github.com/facebook/flow/blob/main/website/docs/lang/variance.md Sets up a simple class hierarchy (Noun, City, SanFrancisco) to demonstrate subtyping relationships used in variance examples. ```flow class Noun {} class City extends Noun {} class SanFrancisco extends City {} ``` -------------------------------- ### Install Node Module Dependencies for Tests Source: https://github.com/facebook/flow/blob/main/src/parser/README.md Installs necessary Node.js module dependencies for running the Flow Parser's test suite. This is done after setting up the build environment. ```bash npm install ``` -------------------------------- ### Flow Try Example: Error Location in Library Definitions Source: https://github.com/facebook/flow/blob/main/Changelog.md Provides an example where an error points to a library definition, and the improved error message will show the file that caused the error. ```javascript declare module 'fs' { declare function readFile(path: string, callback: (err: Error | null, data?: string) => void): void; } fs.readFile('/path/to/nonexistent', (err, data) => { if (err) { throw err; } console.log(data); }); ``` -------------------------------- ### Basic ESLint Configuration Source: https://github.com/facebook/flow/blob/main/website/docs/tools/eslint.md Create a root .eslintrc.js file to configure ESLint with hermes-eslint, enabling recommended rules for Flow and ESLint. ```js module.exports = { root: true, parser: 'hermes-eslint', plugins: [ 'ft-flow', ], extends: [ 'eslint:recommended', 'plugin:ft-flow/recommended', ], }; ``` -------------------------------- ### Flow Example: Variable Annotation Referencing Itself Source: https://github.com/facebook/flow/blob/main/Changelog.md This example shows a variable annotated with its own type. This is generally disallowed, except when the variable name appears within an object type constructor. ```javascript const x: typeof x = 1; const o: { f: typeof o } = { f: null }; ``` -------------------------------- ### Flow Try Example: Heap Refinements Source: https://github.com/facebook/flow/blob/main/Changelog.md Demonstrates how heap refinements might be invalidated more aggressively when method calls appear in conditionals. ```javascript function foo(x: { a: number } | null): number { if (x && x.a > 0) { return x.a; } return 0; } function bar(x: { a: number } | null): number { if (x?.a > 0) { return x.a; } return 0; } foo(null); bar(null); ``` -------------------------------- ### Flow Bug Fix Example: Internal Error Source: https://github.com/facebook/flow/blob/main/Changelog.md This example illustrates a scenario that previously caused an internal error in Flow. The fix ensures more stable and reliable type checking. ```javascript function potentiallyBuggyFunction(x: number | string): void { if (typeof x === 'number') { // Some operation that might have caused an internal error console.log(x.toFixed(2)); } else { console.log(x.toUpperCase()); } } ``` -------------------------------- ### Flow Try Example: Mapped Types Source: https://github.com/facebook/flow/blob/main/Changelog.md Illustrates the experimental support for Mapped Types in Flow. Enable with `experimental.mapped_type=true` in flowconfig. ```javascript type T = { a: number, b: string }; type P = { [P in keyof K]: ?K[P] }; const x: P = { a: 1, b: 'hello' }; const y: P = { a: undefined, b: undefined }; ``` -------------------------------- ### Flow Error Example: Bad Comparison with Enums Source: https://github.com/facebook/flow/blob/main/Changelog.md This example demonstrates a scenario where Flow now consistently errors on bad comparisons with enums. It highlights a specific type of error that has been addressed. ```javascript function badEnumComparison(): void { enum Color { Red, Green, Blue } // This comparison will now cause a Flow error let c: Color = 0; if (c === "Red") { // ... } } ``` -------------------------------- ### Defining and Using Interfaces Source: https://github.com/facebook/flow/blob/main/website/docs/types/interfaces.md Define an interface with a method signature and then create classes that implement this interface. Demonstrates how interfaces enforce structural compatibility, allowing objects to be assigned if they satisfy the interface's shape. ```flow interface Serializable { serialize(): string; } class Foo { serialize(): string { return '[Foo]'; } } class Bar { serialize(): string { return '[Bar]'; } } const foo: Foo = new Bar(); // Error! const foo2: Serializable = new Foo(); // Works! const bar2: Serializable = new Bar(); // Works! ``` -------------------------------- ### flow-typed Configuration Source: https://github.com/facebook/flow/blob/main/website/docs/getting-started.md Example flow-typed.config.json file specifying environment definitions for flow-typed. ```json { "env": ["node", "dom", "bom", "cssom", "serviceworkers", "jsx"] } ``` -------------------------------- ### Flow Example: 'any' Propagation to Inferred Render Type Source: https://github.com/facebook/flow/blob/main/Changelog.md This example demonstrates how 'any' will now correctly propagate to the inferred render type. Previously, this could lead to unexpected behavior. ```flow /* @flow */ function foo(x: T): T { return x; } function bar(x: any): React.Node { return foo(x); } const Baz = (props: {foo: any}) =>
{props.foo}
; const App = () => ; ``` -------------------------------- ### Node Package Entrypoint Resolution Source: https://github.com/facebook/flow/blob/main/Changelog.md This example shows how Flow can now resolve node package entrypoints and exports, enhancing module resolution capabilities. ```javascript import 'some-package'; ``` -------------------------------- ### Flow Try Example: Reserved Types Source: https://github.com/facebook/flow/blob/main/Changelog.md This example highlights that `keyof`, `undefined`, `never`, `unknown`, and `readonly` are now reserved types. User-defined types with these names must be renamed to avoid conflicts. ```javascript /* @flow */ // Previously allowed, now an error: // type keyof = number; // type undefined = string; // type never = boolean; // type unknown = null; // type readonly = 123; // Renaming to avoid conflict: type MyKeyOf = number; type MyUndefined = string; type MyNever = boolean; type MyUnknown = null; type MyReadonly = 123; ``` -------------------------------- ### Importing Types and Values with Shorthand Source: https://github.com/facebook/flow/blob/main/Changelog.md Illustrates the new shorthand syntax for importing types and values from a module in the same declaration. ```javascript import {someValue, type someType, typeof someOtherValue} from 'foo' ``` -------------------------------- ### Equivalent Object and Method Syntax Source: https://github.com/facebook/flow/blob/main/website/docs/types/objects.md Demonstrates that object properties assigned functions and object methods have the same runtime behavior. ```js const a = { foo: function () { return 3; } }; const b = { foo() { return 3; } } ``` -------------------------------- ### Write Flow Code with Type Annotations Source: https://github.com/facebook/flow/blob/main/website/docs/getting-started.md Example of a Flow file demonstrating type annotations for function parameters and return types. Flow will catch type inconsistencies. ```flow-check function foo(x: ?number): string { if (x) { return x; // Error } return "default string"; } ``` -------------------------------- ### Configure Multiple @flowtyped Directories Source: https://github.com/facebook/flow/blob/main/Changelog.md This example shows how to configure multiple directories for @flowtyped definitions using the `module.declaration_dirnames` setting. Note that the default `@flowtyped` directory is no longer special and must be explicitly listed if needed. ```INI module.declaration_dirnames=/decl1 module.declaration_dirnames=/decl2 ``` ```INI module.declaration_dirnames=/@flowtyped ``` -------------------------------- ### Flow Truthy Refinement Example Source: https://github.com/facebook/flow/blob/main/Changelog.md This example demonstrates a fix for incorrect truthy refinement on optional chaining in Flow. The provided link leads to a Flow try-it-page showcasing the behavior change. ```Flow https://flow.org/try/#1N4Igxg9gdgZglgcxALlAIwIZoKYBsD6uEEAztvhgE6UYCe+JADpdhgCYowa5kA0I2KAFcAtiRQAXSkOz9sADwxgJ+NPTbYuQ3BMnTZA+Y2yU4IwRO4A6SFBIrGVDGM7c+h46fNRLuKxJIGWh8MeT0ZfhYlCStpHzNsFBAMIQkIEQwJODAQfiEyfBE4eWw2fDgofDBMsAALfAA3KjgsXGxxZC4eAw0G-GhcWn9aY3wWZldu-g1mbGqJUoBaCRHEzrcDEgBrbAk62kXhXFxJ923d-cPRHEpTgyEoMDaqZdW7vKgoOfaSKgOKpqmDA+d4gB5fMA-P6LCCMLLQbiLOoYCqgh6-GDYRYIXYLSgkRZkCR4jpddwPfJLZjpOBkO4AX34kA0SRgD2UcGgAAIAO5wCS1ABK7W0EgAjAAKFgkUXILnACBbOVSGT0rkAH3lirlZOw9IAlPKADpQLlmrlwGBcqUinQAfisiq5AF5XVzdYbgCbzT6udLRVyMCQudgRHDaABuLkAemjXNmDU5+UGfttElT8C+bC5aRDYZWvC5UAgPIzFVKOYgWqV7o29O95vrUCbbMe8NNfIFwplOgATDaexI5Qqayq9Rrq3KjrgDcbTebLdb-fbHVsXW7p56G77U4PA8HQ+Go7H4yxExBk7RdwGWJmK7nDwWiyWy1nK5Oi9oZ9uuU2m2bWw5blOyFNMAGYB1lD8GggOA2DVTURynL9Zy9eczUXSCVydV1nS5B4NDvNgt3Q31l3TIM8yPGM4wTJMSBTapPggdNb3LQti1LNi31zJCuRguD-0bE16VyEAGhMEhOSgJIMnsEwQHpIA) ``` -------------------------------- ### Flow Try Example: Variance Annotations Source: https://github.com/facebook/flow/blob/main/Changelog.md This example demonstrates Flow's parsing and error reporting for `in`/`out`/`in out` variance annotations, which are not supported in Flow. This change helps users familiar with TypeScript syntax. ```javascript /* @flow */ // Previously allowed, now an error: // class MyClass {} // class MyOtherClass {} // class MyThirdClass {} // Flow uses different mechanisms for variance, often inferred or specified differently. ``` -------------------------------- ### Build the flow binary Source: https://github.com/facebook/flow/blob/main/README.md Build the 'flow' binary after installing dependencies. Ensure the opam environment is evaluated before running the make command. ```sh eval $(opam env) make ```