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 发布文章使用:只允许注册用户才可以访问!


Flow All In One的更多相关文章

  1. Git 在团队中的最佳实践--如何正确使用Git Flow

    我们已经从SVN 切换到Git很多年了,现在几乎所有的项目都在使用Github管理, 本篇文章讲一下为什么使用Git, 以及如何在团队中正确使用. Git的优点 Git的优点很多,但是这里只列出我认为 ...

  2. [LeetCode] Pacific Atlantic Water Flow 太平洋大西洋水流

    Given an m x n matrix of non-negative integers representing the height of each unit cell in a contin ...

  3. BZOJ 4390: [Usaco2015 dec]Max Flow

    4390: [Usaco2015 dec]Max Flow Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 177  Solved: 113[Submi ...

  4. ArcGIS制作放射状流向地图(Radial Flow Map)

    流向地图火了,因为Facebook的那张著名的友邻图,抑或因为<数据可视化之美>中介绍飞行模式的航线图,总之,流向地图以它特殊的可视化形式,直观地展示事物之间的联系,尤其在展示网络流向.贸 ...

  5. SSIS Data Flow优化

    一,数据流设计优化 数据流有两个特性:流和在内存缓冲区中处理数据,根据数据流的这两个特性,对数据流进行优化. 1,流,同时对数据进行提取,转换和加载操作 流,就是在source提取数据时,转换组件处理 ...

  6. Data Flow的Error Output

    一,在Data Flow Task中,对于Error Row的处理通过Error Output Tab配置的. 1,操作失败的类型:Error(Conversion) 和 Truncation. 2, ...

  7. SSIS Data Flow 的 Execution Tree 和 Data Pipeline

    一,Execution Tree 执行树是数据流组件(转换和适配器)基于同步关系所建立的逻辑分组,每一个分组都是一个执行树的开始和结束,也可以将执行树理解为一个缓冲区的开始和结束,即缓冲区的整个生命周 ...

  8. SSIS的 Data Flow 和 Control Flow

    Control Flow 和 Data Flow,是SSIS Design中主要用到的两个Tab,理解这两个Tab的作用,对设计更高效的package十分重要. 一,Control Flow 在Con ...

  9. 前端必须了解的布局常识:普通流(normal flow)

    目录 一.概述 二.块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四.总结 五.参考资料 一.概述 ...

  10. 财务报表 > 现金流表的直接法,间接法,Cash Flow from Operating Activites

    经营活动现金流量 Cash Flow from Operating Activites 是指企业投资活动和筹资活动以外的所有的交易和事项产生的现金流量.它是企业现金的主要来源. 1. 直接法经营活动现 ...

随机推荐

  1. JavaScript常用API

    JavaScript常用API 节点属性 文档节点 事件监听.一出事件 获取元素方法

  2. 计算机网络安全 —— C# 使用谷歌身份验证器(Google Authenticator)(五)

    一.Google Authenticator 基本概念  Google Authenticator是谷歌推出的一款动态口令工具,旨在解决大家Google账户遭到恶意攻击的问题,在手机端生成动态口令后, ...

  3. 初识JavaScript和jQuery

    JavaScript 1.特性 ①脚本语言.JavaScript是一种解释型的脚本语言,C.C++.Java等语言先编译后执行, 而JavaScript是在程序的运行过程中逐行进行解释. ②基于对象. ...

  4. python3 安装 #zlib zlibmodule.c -I$(prefix)/include -L$(exec_prefix)/lib -lz RHEL 8 install Python 3 or Python 2 using yum 编译安装 python3.7.4 . OpenSSL 1.0.2 or 1.1. Consequently, OpenSSL 0.9.8 and 1.0

    #zlib zlibmodule.c -I$(prefix)/include -L$(exec_prefix)/lib -lz Modules/Setup.dist https://askubuntu ...

  5. 一次SQL盲注记录

    背景:遇到一个sql注入,数字型布尔盲注+waf(直接超时那种),只要能出用户名,数据库名即可. 解决办法: 因为可以只要能出user(),database()即可,所以用不着SELECT,那么问题就 ...

  6. java使用Test测试接口类

    package com.jy.demo.web; import java.util.Map; import org.junit.BeforeClass; import org.junit.Test; ...

  7. 网络地址转换(NAT)和默认路由

    我们要连接外网时,外网的网段很多很多,我们该如何愉快地连接外网?下面我们通过Cisco packet模拟环境,并了解NAT和默认路由的使用: NAT(Network Address Translati ...

  8. Java|ArrayList源码分析|add()增加方法和grow()扩容方法

    本文结构: 1.介绍特点 2.基本方法 3.重点源码分析 1.介绍特点 ArrayList: 是List的一个具体实现子类,是List接口的一个数组实现 (里面必定维护了一个数组). 默认初始容量10 ...

  9. hdu5893 List wants to travel(树链剖分+线段树)

    Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Submissi ...

  10. Codeforces Global Round 9 B. Neighbor Grid

    题目链接:https://codeforces.com/contest/1375/problem/B 题意 给出一个 $n \times m$ 的方阵,每个方格中有一个非负整数,一个好方格定义如下: ...