// 一:
// 在flow中如果想要为一个数据添加类型
// 1. 通过注释的方式进行添加
// 2. 通过直接改写js代码结构（推荐）
// 需要给文件添加@flow标记，否则flow不会对文件进行类型检测
// @flow
var a /*: number*/ = 10; //方式一 //正常使用
var a: number = 10; //方式2 //需要babel进行转码
a = "abc"; //检查会出错
console.log(a);
function sum(a: number, b: number) {
return a + b
}
console.log(sum("2", 2))
// 二.类型种类
//1, number类型
// number类型可以赋值的内容为： 数字、NaN、Infinity
let a: number = 100;
let b: number = NaN;
let c: number = Infinity;
//2, string类型
// string类型可以赋值的内容为: 字符串
let str: string = "abc";
//3, boolean 布尔值类型
//4, void javascript中的undefined //当函数不返回时是void
//5, null js中的null
//6, Array类型
// 在声明数据为数组类型的时候，我们需要为数组指定元素的类型
let arr: Array < number > = [1, 2, 3, 4]; //数组需要加<>
let name: any = 123; //any 是任何类型都可以
name = "123"
let arr1: Array < any > = [1, 'a', {},
[]
];
//7, Maybe类型相当于给数据添加了两个可能的类型null和void
function test(a: ? number) { //? maybe类型
a = a || 0;
console.log(a);
}
test(10);
test();
//8, 或类型 自动推断操作
let a: number | string = 10;
a = "abc";
a = {};
function test(a: number, b: number) { // 类型推断
return a + b;
}
let c: string = test(1, 2); //这里会报错,能推断返回值为number类型
//9, 函数类型
function test(a: number, b: number): number {
return a + b;
}
var a: string = test(1, 2);
// 可以将变量声明为函数类型
// 也就意味着我们可以指定为变量赋值的函数的类型
let func: (a: number, b: number) => string = test;
function ajax(callback: (data: Object) => void) {
}
ajax(function(obj: Object) {})
//10, 对象类型
function greet(obj: { sayHello: () => void, name: string }) {
obj.sayHello();
}
var o = {
name: "张学友",
sayHello() {
console.log("Hello")
}
}
greet(o);
function ajax(option: { url: string, type: string, success: (data: Object) => void }) {}
// option需要有url参数，还需要有type参数 还需要有success参数
ajax({});
// 三,使用步骤
Flow的基本使用步骤
# FLOW是 JAVASCRIPT的静态类型检查器
地址: https: //flow.org/
安装
npm init - y
npm i flow - bin - D //开发依赖
书写代码， 为代码添加类型
var 变量: 数据类型 = 数据;
1. 通过注释的方式添加(不会改写js代码， 代码在添加完类型之后仍然可以正常运行)
2. 通过直接给数据添加类型， 改写js代码， 如果要正常运行， 需要使用babel进行转码
## 使用flow进行类型检查
0, 在pacakge.json文件中， scripts属性中添加flow命令
//
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"flow": "flow",
"build": "babel ./src -d ./dist"
},
1. 需要为flow创建一个配置文件.flowconfig //项目根目录
npm run flow init
2, .flowconfig文件中意思
[ignore] // 要忽略的文件
[include] //包含的检查文件
[libs] //第三方库
[lints] //代码实时校验
[options]
[strict] //都不写默认对所有文件进行检测
3. 执行类型检查
npm run flow
使用babel对flow代码进行转码
如果给数据添加类型声明是通过第二种方式， 直接修改的js代码， 那么代码是不能正常运行的
我们需要通过babel对代码进行转码之后才能正常运行
1. 安装babel以及presets
npm i babel - cli babel - preset - flow - D
{
"presets": [ //.babelrc文件
"flow"
]
}
2. 配置package.json添加build命令调用babel··· json {
"scripts": {
"build": "babel ./src -d ./dist"
}
}
3. 执行build命令对文件进行转换
npm run build
// 四,作用
// 使用flow可以简化代码
/**
*
* @param {*} arr 传递一个数组进来，数组中包含数字
* 函数计算出数组中所有数字的和，进行返回
*/
// function sum(arr) {
// // 检查函数调用时是否有参数传入
// if (!arr) {
// throw new Error("此函数需要传递一个数组作为参数");
// }
// // 检查函数调用时传出的参数是否为数组
// if (!Array.isArray(arr)) {
// throw new Error("此函数需要传递一个数组作为参数");
// }
// // 检查用户传递进来的参数数组，是否为数字数组
// if (!arr.every(v => typeof v == "number")) {
// throw new Error("此函数需要传递一个数组作为参数, 数组中的元素需要全部为数字");
// }
// let result = 0;
// arr.forEach(v => {
// result += v;
// })
// return result;
// }
function sum(arr: Array < number > ) {
let result = 0;
arr.forEach(v => {
result += v;
})
return result;
}
// sum([1, 2, 3]);
// sum();
// sum('abc');
sum(['a', 1, 2]);
// 五:介绍
#
JavaScript语言特征介绍（ 类型）
JavaScript是一种弱类型的， 动态类型检查的语言。
## 弱类型和强类型
### 弱类型？
在定义变量的时候， 我们可以为变量赋值任何数据， 变量的数据类型不是固定死的， 这样的类型叫做弱类型
``
`js
var a = 10;
a = "abc";
a = [];
a = function(){};
`
``###
强类型？
在声明变量的时候， 一旦给变量赋值， 那么变量的数据类型就已经确定， 之后如果要给该变量赋值其他类型的数据， 需要进行强制数据类型转换。
``
`java
int a = 10;
a = "10";
`
``##
动态类型和静态类型
动态类型和静态类型的核心区别： 动态类型的类型检查会在代码运行的时候进行， 而静态类型的类型检查则是在编译时进行。
运行时类型检查
``
`js
var obj = {};
obj.forEach(function(v, i){})
`
``
编译时类型检查
``
`java
int num = 100;
num = "abc";
`
``
// 六,动态类型问题,静态类型好处
问题:
// 动态类型，类型检查的操作是在运行时进行的。
// 代码中的错误，只能在代码运行的时候被发现
// var num = 123;
// var num1 = 456;
// /**
// * 函数接收两个参数，两个参数需要是数值类型的
// * 函数的返回值为两个参数的和
// */
// function sum(a, b) {
// return a + b;
// }
// // console.log(sum(num, num1));
// console.log(sum("abc", 1));
function greet(obj) {
obj.sayHello();
}
var o = {
name: "张学友"
};
greet(o);
好处: #静态类型的优势
## 提早发现代码中的Bug
##
提高代码的可读性
// 如果能指定a和b的类型
// 指定为数字，这个函数的功能就非常明确了
// a: number
// b: number
// 返回值： number
function sum(a, b) {
return a + b;
}
##
减少了复杂的错误处理逻辑
这个函数接收一个数字数组作为参数
返回这个数组中所有数字的和
// function sum(arr){
// let result = 0;
// arr.forEach(v => {
// result += v;
// })
// return result;
// }
function sum(arr) {
// 首先判断用户是否有传递参数进来
if (!arr) {
throw new Error("函数需要传参");
}
if (!Array.isArray(arr)) {
throw new Error("函数需要一个数组作为参数");
}
if (!arr.every(v => typof v == 'number')) {
throw new Error("函数需要的数组为数字数组！")
}
let result = 0;
arr.forEach(v => {
result += v;
})
return result;
}
sum([1, 2, 3]);
sum(['a', 'b'])
sum()
##
便于代码重构
function test(num) {
console.log(num)
}
test({ name: "郭富城" })
##
增强IDE的功能
IDE: 集成开发环境