Flow
2021-05-14 本文已影响0人
丽__
TypeScript 解决javascript 类型系统的问题,TypeScript大大提高代码的可靠程度
// javascript 自有类型系统的问题
- 内容概要
- 强类型与弱类型（类型安全）
- 静态类型与动态类型（类型检查）
- JavaScript 自有类型系统的问题
- Flow静态类型检查方案
- TypeScript 语言规范与基本
一、 类型安全 ------- 强类型与弱类型
概念定义：强类型在语言层面限制函数的实参类型必须与形参类型相同，弱类型语言层面不会限制实参的类型
强类型有更强的类型约束，而弱类型中几乎没有什么约束。
强类型语言中不允许有任意的隐式类型转换，而弱类型语言则允许任意的隐式类型转换
区别：是否允许随意的隐式类型转换器
二、类型检查 ------- 静态类型与动态类型
静态类型语言：一个变量声明时它的类型就是明确的，声明过后，它的类型就不允许在修改
动态类型语言：在运行阶段才能够明确变量类型，而且变量的类型也可以随时改变
在动态类型语言中的变量没有类型，而变量中存放的值是有类型的，javascript 就是一门弱类型，而且是标准的动态类型语言
区别：是否允许随时修改变量类型
image.png
-
JavaScript 类型系统特征------ 弱类型 且 动态类型
-
弱类型的问题 君子约定有隐患，强制要求有保障
1、需要等到运行时才发现错误
2、有可能功能更会发生改变
3、对对象索引器的一种用法
// JavaScript 弱类型产生的问题
// const obj = {}
// obj.foo();
function sum(a, b) {
return a + b
}
console.log(sum(100, 100));
console.log(sum('100', 100));
const obj = {}
obj[true] = 100
console.log(obj['true']);
- 强类型的优势
1、错误可以更早暴露
2、代码更智能，编码更准确
3、重构更可靠
4、减少不必要的类型判断
- Flow ----JavaScript 的类型检查器
function square(n:number){
return n*n
}
square('100')
三、 Flow --- 快速上手
1、安装flow-bin
npm install -D flow-bin
2、创建package.json
npm init -y
3、初始化项目，执行命令创建一个名为.flowconfig的空文件
flow init
4、关闭vsCode中的js语法校验
image.png
5、在JavaScript文件中的任何代码之前添加 // @flow
//@flow
function square(n: number) {
return (n * n)
}
console.log(square('5'));
6、运行 flow
flow
image.png
7、要停止后台进程，请运行flow stop
flow stop
image.png
- 编译 -- 通过编译移出[类型注解]
方案一、flow-remove-types
1、安装flow-remove-types
npm i flow-remove-types --dev
2、package.json中修改配置
# 把src目录下的编译之后转到dist目录下
"scripts": {
"flow": "flow",
"flowRemove": "flow-remove-types src/ -d dist/"
}
3、运行
npm run flowRemove
可以看到在dist目录下有了编译之后的js文件
方案2 Babel
1、安装Babel
//npm i @babel/core @babel/cli @babel/perset-flow --dev
//报了个错误，perset-flow找不到，后重新分两步运行
npm i @babel/core @babel/cli --dev
npm install --save-dev @babel/preset-flow
成功
2、新建.babelrc文件
{
"presets": ["@babel/preset-flow"]
}
3、运行
npx babel src -d dist
- flow开发工具插件
image.png
- Flow 类型推断
function square(n:number) {
return n * n
}
square('100')
- Flow 类型注解
//@flow
function square(n: number) {
return n * n
}
square('100')
let num: number = 100
function foo():number{
return '100'
}
function foo():void{
// 没有返回值是返回undefined,这里标记为void
}
- Flow 原始类型
// 6中原始数据类型 string number boolean undefined null symbol
const a:string = 'foobar'
const b:number = 100 //NaN Infinity
const c:boolean = false;
const d:null = null
const e:void = undefined
const f:symbol = Symbol()
- Flow 数组类型
// @flow
// 数组类型
const arr1: Array < number > = [1, 2, 3]; //全是数字的数组
const arr2: number[] = [1, 2.3]; //全是有数字组成的数组
// 元组
const arr3: [string, number] = ['foo', 100];//固定长度和类型的数组
- 对象类型
//@flow
const obj1: {
foo: string,
bar: number
} = {
foo: 'string',
bar: 100
}
const obj2: {
foo ? : string,
bar: number
} = {
bar: 100
}
const obj3: {
[string]: number
} = {}
obj3.key1 = 'value'
obj3.key2 = 100
- 函数类型
//@flow
// 函数的类型限制
function foo(cllback: (string, number) => void) {
cllback('string', 100);
}
foo(function (str, n) {});
- 特殊类型
// @flow
const a: "foo" = "foo";
const type: "success" | "warning" | "danger" = "success";
type StringOrNumber = string | number;
const b: string | number = 1; //'string';
const c: StringOrNumber = "string"; //100;
const gender: ?number = null; //maybe 类型
const gender1: number | null | void = null; //等同于
- Mixed 与Any
// @flow
// Mixed Any
// 强类型
// string \ number \ boolean ...任何类型
function passMixed(value: mixed) {
if (typeof value === "string") {
value.substr(1);
} else {
value * value;
}
}
passMixed("string");
passMixed(100);
// -------------------------
// 弱类型
function passAny(value: any) {
value.substr(1);
value * value;
}
passAny("string");
passAny(100);
- 运行环境API
image.png
