国产欧美日韩18,中国国产A一级毛片,国产亚洲视频在线观看,大陆精大陆国产国语精品1024,国产国产人在线成免费视频狼人色

用Flow提升前端代碼健壯性

2018-4-26 seo達(dá)人

//例1 function foo(x) { return x + 10 } foo('Hello!') //例2 function main(params){ //fn1函數(shù)獲取了一個(gè)數(shù)據(jù) var object = fn1(params) //fn2根據(jù)獲數(shù)據(jù)，產(chǎn)生一個(gè)結(jié)果 var result = fn2(object) return result }

function foo(x) { return x + 10 } foo('Hello!')

// @flow function foo(x: number): number { return x + 10 } foo('hi')

// @flow function foo(x: number | boolean): number | string { if (typeof x === 'number') { return x + 10 } return 'x is boolean' } foo(1) foo(true) foo(null) // 這一行有類(lèi)型錯(cuò)誤消息

{ "plugins": [ "transform-flow-strip-types" ] }

// @flow export type Test = { titleOne?: string, titleTwo: ?string } var a: Test = {titleOne:"3",titleTwo:4} var b:string = "" //any export type NavigationGestureDirection = 'horizontal' | 'vertical'; type T = Array<string> var x: T = [] x["Hi"] = 2 //有Flow警告 type TT = Array<Test> var xx:TT = [] xx = [{titleOne: '1', titleTwo: false}] type MyObject = { foo: number, bar: boolean, baz: string, }; let val:MyObject = {foo:2,bar:false,baz:'444'}; var val1: MyObject = {foo:2,bar:false,baz:null}; var val2: MyObject = {foo:2,bar:false}; function method(val: MyObject):MyObject { return {foo:2,bar:false,baz:'2'}} class Foo { constructor(val: MyObject) { /* ... */ } }

var Hello = React.createClass ({ propTypes: { name: React.PropTypes.string.isRequired } ... }); //<Hello/> //Flow就會(huì)發(fā)現(xiàn) 缺少屬性的錯(cuò)誤 //<Hello name={42}/>//屬性類(lèi)型的錯(cuò)誤

import * as React from 'react'; type Props = { foo: number, bar?: string, }; function MyComponent(props: Props) { props.doesNotExist; // Error! You did not define a `doesNotExist` prop. return <div>{props.bar}</div>; } <MyComponent foo={42} />

用Flow提升前端代碼健壯性

看一段常見(jiàn)代碼：

引入類(lèi)型系統(tǒng)

Flow & TypeScript

TypeScript存在的問(wèn)題

Flow你的新選擇

Flow的優(yōu)點(diǎn)

so

從一個(gè)小例子演示

真實(shí)案例

Flow使用

Flow支持的數(shù)據(jù)類(lèi)型

類(lèi)型別名&常見(jiàn)語(yǔ)法

React中的應(yīng)用

分類(lèi)

日歷

鏈接

個(gè)人資料

存檔