功能
Flow 和TypeScript 都是用来做JavaScript类型检查的
*/
/*
JavaScript 语言特征介绍(类型)
JavaScript 是一种弱类型的,动态类型的语言
###弱类型和强类型
什么是弱类型?
js
在定义变量的时候, 我们可以 为变量赋值任何数据, 变量的数据类型不是固定死的,
这样的类型叫做弱类型
var a = 10
a = "abc"
a = []
什么是强类型??
## 强类型
在声明变量的时候, 一旦 给变量赋值,那么变量的数据类型就已经确定,
之后如果要给变量赋值其他数据类型转换, 需要强制类型装换.
java
int a = 10; (int java 里面的整数数据类型)
##动态类型和静态类型
动态类型和静态类型 的核心区别: 动态类型的类型检查会在代码运行的时候进行,
而静态类型的类型检查则是在编译的时候进行
运行时检查
```js
var obj = {}
obj.forEach(function(v,i){
})
由于forEach 是针对数组进行的, 所以会报错, 而且是在运行的时候报错的
编译时检查
```java
int num =100;
num = "abc"
由于在java里面 声明的时候, 就确定了 num的数据类型是整数, 所以在静态检查报错的
##动态类型和弱类型带来的问题
动态类型, 类型检查的操作是在运行时进行的
代码中的错误, 只能在代码运行的时候被发现
##静态类型的优势
## 提早发现代码中的Bug
减少代码逻辑
便于代码重构
增强IDE 的功能
IDE:集成开发环境
##静态类型存在的问题
1. 会增加代码量
2. 需要花时间掌握类型
3. 可能会降低开发效率
## 如何在JavaScript开发中使用静态类型
1. Flow FaceBook的开源技术
2. TypeScript: 微软公司开发的语言
// 在flow 中如果想要为一个数据添加类型
1.通过注释的方式进行添加
2.通过直接改写js 代码结构(推荐)
// 需要给文件添加@flow 标记, 否则flow 不会对文件进行类型检测
//@ flow
var a /*: number * / = 10
# Flow 的基本使用步骤
##安装
```shell
npm init -y
npm i flow-bin -D
````
## 书写代码 , 为代码添加类型
``````js
var 变量: 数据类型 = 数据
````````
1. 通过注释的方式添加(不会改写js 代码, 代码添加完类型后任然可以正常运行)
2. 通过直接给数据添加类型. 改写js 代码, 如果要正常运行.需要使用babel进行转码
## 使用flow 进行类型检查
0. 在package.json 文件中, script 属性汇总添加flow 命令
1. 需要为flow 创建一个配置文件 .flowconfig
`````````shell
npm run flow init
2. 执行类型检查
`````````shell
npm run flow
`````````````
## 使用 babel 对flow 代码进行转码
如果给数据添加类型声明 是通过第二种方式, 直接修改js 代码, 那么 代码是不能正常运行的
我们需要通过babel 对代码进行转码之后才能正常运行
1. 安装 babel 以及 presets
``````````shell
npm i babel-cli babel-preset-flow -D
````````````````
2. 配置 package.json添加 build 命令 调用 babel
`````````json
{
"script": {
"build":"babel ./src -d ./dist"
}
}
````````````````````
3.执行 build 命令对文件进行转换
`````````shell
npm run build
```````````
## TypeScript
## 是什么?
TypeScript 是微软公司开发的一款 开源的JavaScript超集语言!
JavaScript超集:当前任何JavaScript都是合法的TypeScript代码
TypeScript主要为JavaScript 提供了类型系统和ES6 语法支持!
Flow是一个类检查工具, TypeScript是一种语言
TypeScript有自己的编译工具, 我们写好的TypeScript 代码最终会通过编译器编译成JavaScript
代码进行运行!
###安装
TypeScript 命令工具的安装 (TS编译器)
`````````
npm i typescript -g
安装好之后,全局会提供一个 'tsc' 命令给我们使用!
编写TS 代码
利用tes 命令对文件进行编译 ts -js
### TS 的配置文件
1. 创建 配置文件 . tsconfig.json
'tsc --init'
2. 常见的配置属性
*target: 转换成的 js 代码的目标版本 E5 ES3 ES5 ES6
*module: 转换成的js 代码的模块化方式
*rootDir: ts代码存放的路径, 要被准吗的ts 文件存放的路径
*outDir: 最终转换好的js文件的存储路径
*strict: 是否要转换成严格模式的代码
08-24
08-24