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 发布文章使用:只允许注册用户才可以访问!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13899734.html
未经授权禁止转载,违者必究!