Flow All In One

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;

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---