Flow语法入门

## Flow语法入门

> qyfeng03

在文件中开启flow检查

```js
// @flow
```

什么都不做，就可以有一些自动推断功能

```js
// @flow
function square(n) {
  return n * n; 
}

square("2");// Error!
```

手动配置类型

```js
// @flow
function square(n: number): number {
  return n * n;
}

square("2"); // Error!
```

非必选

```js
// @flow

function foo(x: ?number): string {
  if (x) {
    return x;
  }
  return "default string";
}
```

多选类型

```js
function testFlow(param: string | number){
  return param
}

testFlow('1') // 11
testFlow(1) // 2
testFlow([]) // Error!
```

枚举类型

```js
function testFlow(param: 1 | 2 | 3){
  return param
}

testFlow(1)
testFlow(2)
testFlow(4) // Error!
```

任意类型

```js
function testFlow(param: any){
  ...
}
```

变量类型

```js
const bar: number = 2;
```

对象类型

```js
var obj1: { foo: boolean } = { foo: true };
```

数组类型

```js
let arr2: (?number)[] = [1, 2]; // Works!
```

返回值

```js
function testFlow(param: number):string{
  return param + param // Error!
}
```

箭头函数

```js
let method = (str: string, bool?: boolean, ...nums: Array<number>): void => {
  // ...
};
```

类型别名

```js
// @flow
type MyObject = {
  foo: number,
  bar: boolean,
  baz: string,
};
function method(val: MyObject) { /* ... */ }
```

范型

```js
function testFlow<T>(value: T): T {
  return value;
}

const stringVar:string = testFlow('123')
const numberVar:number = testFlow(123)
const numberVar2:number = testFlow('123') // Error
```

类对象(Flow不推荐函数构造对象)

```js
function testFlow(value: People) {
  console.log(value.name)
}

class People{
  name: string // 必须声明

  constructor(name){
    this.name = name
  }
}

testFlow(new People('qe'))
```

接口（感觉完全就是在写Java）

```js
interface Dog {
  name: string;
  bark(value: string):any;
}

class MyDog implements Dog{
  name:string;

  constructor(name){
    this.name = name
  }
  bark(value:string):any{
    console.log('bark:'+value)
  }
}

const dog:Dog = new MyDog('flappy')
```

导入导出Flow类型(必须导入导出文件都开启flow)

```js
// @flow
export default class Foo {};
export type MyObject = { /* ... */ };
export interface MyInterface { /* ... */ };

// @flow
import type Foo, {MyObject, MyInterface} from './exports';
```