一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情
Flow和TypeScript都是用来做JS类型检查的
语言类型分析
js是一种弱类型，动态类型检查的语言
弱类型：在定义变量的时候，我们可以为变量赋值任何数据，变量的数据类型不是固定死的，这样的类型叫做弱类型
强类型：在声明变量的时候，一旦给变量赋值，那么变量的数据类型就已经确定，之后如果要给该变量赋值其他类型的数据，需要进行强制数据类型转换。
动态类型和静态类型
动态类型和静态类型的核心区别： 动态类型的类型检查会在代码运行的时候进行，而静态类型的类型检查则是在编译时进行
静态类型的优势
提早发现代码中的Bug
提高代码的可读性
减少了复杂的错误处理逻辑
便于代码重构
增强IDE的功能
Flow的基本使用步骤
安装
npm init -y
npm i flow-bin -D
书写代码，为代码添加类型 以下两种方式均需先添加flow
//@flow
1.通过注释的方式添加 (不会改写js代码，代码在添加完类型之后仍然可以正常运行)
var a /*：number */=100
2.通过直接给数据添加类型，改写js代码，如果要正常运行，需要使用babel进行转码
var a ：number =100
使用flow进行类型检查 1.在pacakge.json文件中，scripts属性中添加flow命令 2.需要为flow创建一个配置文件.flowconfig
npm run flow init
3.执行类型检查
npm run flow
使用babel对flow代码进行转码 如果给数据添加类型声明是通过第二种方式，直接修改的js代码，那么代码是不能正常运行的
我们需要通过babel对代码进行转码之后才能正常运行
- 安装babel以及presets
npm i babel-cli babel-preset-flow -D
2.指定babel转码规则 新建.babelrc文件
{
"preset":[
"flow"
]
}
- 配置package.json添加build命令调用babel
{
"scripts": {
"build": "babel ./src -d ./dist"
}
}
- 执行build命令对文件进行转换
npm run build
flow的类型演示
| 类型 | 说明 |
|---|---|
| number | 数字、NaN、Infinity都是number类型的数据 |
| string | 字符串 |
| null | 只有null是null类型 |
| void | undefined在flow中的类型就是void |
| Array | 数组类型，定义的时候需要使用Array这种形式，T为指定的类型，说的是特定类型的数据组成的数组 |
| Object | 对象类型，由于对象比较自由，所以规定对象类型的时候有多种写法 |
| any | 表示任意类型，这个类型尽量少用，但有时又很有用 |
| Function | 函数类型 |
| Maybe | Maybe类型允许我们声明一个包含null和undefined两个潜在类型的值 |
| 或操作 | 或操作可以设置一个变量为多种可能的类型 |
| 类型推断 | flow会尝试自行推断某个数据的类型 |
// number类型
// number类型可以赋值的内容为： 数字、NaN、Infinity
let a: number = 100;
let b: number = NaN;
let c: number = Infinity;
// string类型
// string类型可以赋值的内容为: 字符串
let str: string = "abc";
// boolean 布尔值类型
// void javascript中的undefined
// null js中的null
// Array类型
// 在声明数据为数组类型的时候，我们需要为数组指定元素的类型
let arr: Array<number> = [1, 2, 3, 4];
let name: any = 123;
name = "123"
let arr1: Array<any> = [1, 'a', {}, []];
函数类型
// @flow
function test(a: number, b: number): number{
return a + b;
}
// var a: string = test(1, 2);
// 可以将变量声明为函数类型
// 也就意味着我们可以指定为变量赋值的函数的类型
let func: (a: number, b: number) => string = test;
function ajax(callback: (data: Object) => void) {
}
ajax(function (obj: Object) {
})
Maybe类型
// @flow
function test(a: ?number) {
a = a || 0;
console.log(a);
}
test(10);
test();
// Maybe类型相当于给数据添加了两个可能的类型null和void
或操作类型和类型推断
// let a: number|string = 10;
// a = "abc";
// a = {};
// 类型推断
function test(a: number, b: number) {
return a + b;
}
let c: string = test(1, 2);
对象类型
// @flow
// function greet(obj: { sayHello: () => void, name: string }) {
// obj.sayHello();
// }
// var o = {
// name: "张学友",
// sayHello() {
// console.log("Hello")
// }
// }
// greet(o);
function ajax(option: {url: string, type: string, success: (data: Object) => void}) {
}
// option需要有url参数，还需要有type参数 还需要有success参数
ajax({});
