利用flow进行类型检查

未分类

2019-02-27

138

0

类型介绍

JS语言的特征(类型方面):弱类型,动态类型检查的语言。

弱类型:在声明变量的时候,可以为变量赋值任何数据,不需要指定变量的数据类型。

var a = 10;

a = ”abc“;

强类型:一旦声明变量,该变量的数据类型就已经确定,如果要改变变量的类型,需要进行强制类型转换。

int a = 10;

a = “10”;    //报错

动态类型:类型检查是在代码运行的时候进行。

静态类型:类型检查是在编译时进行。

var obj = {};

obj.forEach(function(v,i){

  // 当代码运行到这里的时候会报错,forEach用来遍历数组。

});

 

int num = 100;

num=”abc”;   //当代码编译的时候就会报错

静态类型的优势:提早发现代码中的bug;提高代码的可读性;减少复杂的错误处理逻辑;便于代码重构;增强IDE的功能(IDE是集成开发环境如Visual Studio)。

静态类型存在的问题:增加代码量;需要花时间掌握类型;可能会降低开发效率。

在JS中如何使用静态类型:

       FlowFaceBook的开源技术,是一种类型检查工具

       TypeScript微软开发的一款开源的JS超集语言,为js提供类型系统和ES6语法支持,有自己的编译工具,TS代码最红会通过编译器编译成js代码进行运行。

 

 

Flow介绍

Flow官网:https://flow.org

基本使用

npm init -y

npm i flow-bin -D   // flow是开发时的依赖项

在package.json中添加一条命令

“script“:{

  “flow”: “flow”

},

运行npm run flow init(如果是全局安装flow,则直接运行flow就可以),会出现一个.flowconfig文件。运行npm run flow就会对所有标记了 // @flow的文件进行类型检测。

新建 index.js.

flow中想要给一个数据添加类型:首先都要先在js文件的上面添加 //@flow标记

1.通过注释方式添加,不会修改js代码结构,代码添加类型后仍然可以正常运行

// @flow

var a /*: number*/ = 10;

a = “abc”  //报错

2.直接改写js代码结构,会修改代码结构,如果取消了flow则代码无法正常运行.

// @flow

var a: number= 10;

a = “abc”  //报错

想要运行上面的代码,需要通过babel进行转码操作。

npm i babel-cli babel-preset-flow -D

在package.json中添加一条命令,新建一个.babelrc文件添加presets配置。

“script“:{

  “build”: “babel ./src -d ./dist”

},

 

{

  “presets”:[

    “flow”

]

}

码后的文件中没有类型检测的代码,js文件可以正常运行。

数据类型介绍

let a: number = 100;  //或者NaN  Infinity

 

let b: string = “abc”;

 

let c: null = null;

 

let d: void = undefined;

 

let e: Boolean = true;   //或者false

 

let f: Array = [1,2,3];  //声明为数组类型的时,需要指定元素的类型

 

function g(obj: {hello: () => void}){

  obj.hello()

}

var o = {

  hello(){}

}

g(o)

 

let h: any = 123;  //无法确定数据类型

 

function i(a: number,b: number): number{

  return a + b;

}

let j: string = i(1,2)  //报错,flow也会自动计算返回值的类型

let k: (a: number,b: number) => number = i;

function ajax(callback: (data: Object) => Void){ }

ajax(function (obj: Object){ })  //返回值不写,默认是void

 

function test(a: ?number){   //类型前面加?,表示可以是number null void

  a = a || 0;

}

 

let m: number | string = 123;   //表示m可以是number和string两种类型

 

下一章:利用TypeScript进行类型检查

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01