02 js语言进阶

Flow和TypeScript的功能

都是用来做JavaScript类型检查的。JavaScript是一种弱类型的，动态类型检查的语言。

弱类型 和 强类型

弱类型：
在定义变量的时候，可以为变量赋任何值，变量的数据类型是可变的。

强类型：
在声明变量的时候，一旦给变量赋值，变量的数据类型就确定。如果之后要赋值为其他类型的数据，必须强制进行数据类型的转换。

动态类型 和 静态类型

动态类型的类型检查在代码运行时进行，静态类型的类型检查在编译时进行。

动态类型可能带来的问题：

1. 运行功能有偏差

function sum(a, b) {
    return a + b;
}
console.log(sum("kkk", 1))

如上，本想两数求和，却因为传参问题，变成了字符串的拼接

2. 代码中的错误只有在运行中发现

静态类型的优势和问题：

优势：

1. 编译时发现代码中的bug
2. 提高代码的可读性
3. 减少了复杂的错误处理逻辑
4. 方便代码重构
5. 增强IDE（集成开发环境）的功能

问题：

1. 代码量增加
2. 可能会降低开发效率

Flow

Flow的基本使用

• 安装
  npm i flow-bin -D
• 在pacakge.json，scripts中添加"flow": "flow"
• npm run flow init生成.flowconfig文件
• 书写代码，为代码添加类型

var 变量: 数据类型 = 数据;

1. 通过注释方式添加（不会改写js代码，代码再添加完类型之后仍然可以正常运行） -- 不推荐
2. 通过直接给数据添加类型，改写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
• 配置

1. package.json中

"scripts": {
    "build": "babel ./src -d ./dist"
  },

将src中的文件，转码到dist文件夹中

2. 新建.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进行编译，最终运行