已有工程使用 flow 采坑记

结构赋值写法

function MyComponent({ bar }: { bar: number }) {
  return <div>{bar}</div>;
}

flow DOM 内置对象

https://github.com/facebook/flow/blob/master/lib/dom.js

flow vscode 配置

https://github.com/flowtype/flow-for-vscode#setup

flow 写 React

react flow

flow 不支持 定义 context 的类型，因为这部分的类型判断是在运行时去做的。
support for React's Context

flow 使用指定注释标记忽略某一行 flow 报错代码

doc
设置一个注释规则 配置在 flowconfig 文件中

 [ignore]
node_modules/*
.history/*

[libs]
flow-typed/*

[options]
esproposal.decorators=ignore
suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore

class a {
    updateProps(props: Object){
        for(let i in props){
            // $FlowIgnore 我们把变量直接挂载在 this 上
            this[i] = props[i];
        }
    }
}

表示一个react组件

场景： 组件组合的时候需要this.props.children定义类型

type Props = {
  children: React.Element<any>
}
// or
type props: {
   children: ReactElement
};

[参考链接]（https://github.com/facebook/flow/issues/1964）

兼容性选择方案

clipboard

async componentDidMount

componentDidMount:void 因此使用 async 时报错如下

    async componentDidMount():Promise<void>{
        Qrcode.toCanvas(
            this.canvas,
            this.state.preViewHref,
            { errorCorrectionLevel: 'H', margin:1 },
            function(err){
            }
        );
        try{
            await this.props.getProjects();
            await this.props.document.preView();
        }catch(e){
            this.setState({
                isLoaded: true,
                loaderr: true
            });
            return;
        }
        this.setState({
            isLoaded: true,
            loaderr: false
        });
    }

62:     async componentDidMount():Promise<void>{
                                   ^^^^^^^^^^^^^ Promise. This type is incompatible with
 34:   componentDidMount(component?: any): void;
                                           ^^^^ undefined. See lib: /private/tmp/flow/flowlib_1f810d8

由于目前flow不支持 Promise<void> 使用以下方式规避

    componentDidMount(){
        this.componentDidMountPromise();
    }

    async componentDidMountPromise(): Promise<void>{
        Qrcode.toCanvas(
            this.canvas,
            this.state.preViewHref,
            { errorCorrectionLevel: 'H', margin:1 },
            function(err){}
        );
        try{
            await this.props.document.preView();
        }catch(e){
            this.setState({
                isLoaded: true,
                loaderr: true
            });
            return;
        }
        this.setState({
            isLoaded: true,
            loaderr: false
        })
    }

//or 

componentDidMount(){

    (async componentDidMountPromise(): Promise<void>{
       Qrcode.toCanvas(
           this.canvas,
           this.state.preViewHref,
           { errorCorrectionLevel: 'H', margin:1 },
           function(err){}
       );
       try{
           await this.props.document.preView();
       }catch(e){
           this.setState({
               isLoaded: true,
               loaderr: true
           });
           return;
       }
       this.setState({
           isLoaded: true,
           loaderr: false
       }))();
 }

flow 的 any 和 mixed

any 使用场景， 尽量避免使用。
any 类型基本上会屏蔽类型判断

• 当转入历史工程到 flow 时 暂时的屏蔽某一部分代码的类型检查
• 当你确保你的代码是正确的，由于某些原因 flow 不能够正常的类型判断，某种风格 flow 目前还不支持。

mixed

代码内部当调用方法的时候需要显示的做类型判断，也就是 mixed 还是有 flow 保驾护航的。

数组简写

Array<数组内元素的类型>
简写 类型[]

Array<number> = number[]

第三方库的 flowType 定义接口

实用工具 flow-typed

定义 module

未解之谜

HTMLInputElement 不是 HTMLElement 的子级

如果 父类定义了属性类型为 HTMLElement 子类不可以定义同名属性类型为 HTMLInputElement。 but why

lack of document.scrollElement

document.scrollElement