结构赋值写法
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
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）
兼容性选择方案
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
