Flow和TypeScript的功能
都是用来做JavaScript类型检查的。JavaScript是一种弱类型的，动态类型检查的语言。
弱类型 和 强类型
弱类型：
在定义变量的时候，可以为变量赋任何值，变量的数据类型是可变的。
强类型：
在声明变量的时候，一旦给变量赋值，变量的数据类型就确定。如果之后要赋值为其他类型的数据，必须强制进行数据类型的转换。
动态类型 和 静态类型
动态类型的类型检查在代码运行时进行，静态类型的类型检查在编译时进行。
动态类型可能带来的问题：
- 运行功能有偏差
function sum(a, b) {
return a + b;
}
console.log(sum("kkk", 1))
如上，本想两数求和，却因为传参问题，变成了字符串的拼接
- 代码中的错误只有在运行中发现
静态类型的优势和问题：
优势：
- 编译时发现代码中的bug
- 提高代码的可读性
- 减少了复杂的错误处理逻辑
- 方便代码重构
- 增强IDE（集成开发环境）的功能
问题：
- 代码量增加
- 可能会降低开发效率
Flow
Flow的基本使用
- 安装
npm i flow-bin -D - 在pacakge.json，scripts中添加
"flow": "flow" -
npm run flow init生成.flowconfig文件 - 书写代码，为代码添加类型
var 变量: 数据类型 = 数据;
- 通过注释方式添加（不会改写js代码，代码再添加完类型之后仍然可以正常运行） -- 不推荐
- 通过直接给数据添加类型，改写js代码，如果要正常运行，需使用babel进行转码
// 需要给文件添加@flow标记，否则flow不会对文件进行类型检测
// @flow
var a /*: number*/ = 10;
var a: number = 10;
a = "abc";
console.log(a);
function sum(a: number, b: number) {
return a + b;
}
sum(1, 2);
sum("123", "456")
npm run flow
使用babel对flow代码转码
- 安装babel以及presets
npm i babel-cli babel-preset-flow -D - 配置
-
package.json中
"scripts": {
"build": "babel ./src -d ./dist"
},
将src中的文件，转码到dist文件夹中
- 新建
.babelrc文件
{
"presets": [
"flow"
]
}
TypeScript
什么是TypeScript？
- TypeScript是微软公司开发的一款开源的JavaScript超集语言（JavaScript超集：当前的任何JavaScript都是合法的TypeScript代码）
- TypeScript主要为JavaScript提供了类型系统和ES6语法的支持
- Flow是一个类型检查工具，TypeScript是一种开发语言。TypeScript有自己的编译工具，我们写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行
如何使用TypeScript
- 安装
Ts编译器的安装（TypeScript命令行工具的安装）
npm i typescript -g
安装完毕，全局提供tsc命令供使用 - 编写TypeScript代码
- 通过tsc进行编译，最终运行
网友评论