Flow All In One

Flow All In One FlowType PureComponent

Flow All In One

Flow is a static type checker for JavaScript

​​https://github.com/facebook/flow​​

​​https://flow.org/en/docs/install/​​

$ yarn add --dev @babel/core @babel/cli @babel/preset-flow

//.babelrc 
{
"presets": ["@babel/preset-flow"]
}

$ yarn run babel src/ -d lib/

// package.json
{
"name": "my-project",
"main": "lib/index.js",
"scripts": {
"build": "babel src/ -d lib/",
"prepublish": "yarn run build"
  }
}

# local project
$ yarn add --dev flow-bin

# init
$ yarn run flow init 

$ yarn run flow

​​https://flow.org/en/docs/usage/​​

// @flow


/* @flow */

React Components

​​https://flow.org/en/docs/react/components/​​

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
static propTypes = {
foo: PropTypes.number.isRequired,
bar: PropTypes.string,
  };

render() {
return <div>{this.props.bar}</div>;
  }
}

import * as React from 'react';

type Props = {
foo: number,
bar?: string,
};

class MyComponent extends React.Component<Props> {
render() {
this.props.doesNotExist; // Error! You did not define a `doesNotExist` prop.

return <div>{this.props.bar}</div>;
  }
}

<MyComponent foo={42} />;

FlowType

​​https://flow.org/en/docs/react/types/​​

​​https://www.saltycrane.com/cheat-sheets/flow-type/v0.55.0/​​

​​https://www.saltycrane.com/cheat-sheets/flow-type/latest/​​

PureComponent

// import React, {
//   // useState,
//   // useEffect,
//   // Component,
//   PureComponent,
// } from "react";

// import { FlowFlags } from "typescript";
// FlowFlags

// import "./style.css";

import * as React from 'react';

// pcsf, PureComponent Class FlowType

type P = {
str: string,
};

type S = {
int: number,
};

class PCSFApp extends PureComponent<P, S> {
state = {  }
render() {
return (
<>
<p>pcsf, PureComponent Class FlowType</p>
</>
    );
  }
}

export default PCSFApp;