javaScript的静态类型数据设置

 

Flow和TypeScript简介

功能

Flow和TypeScript都是用来做JavaScript类型检查的！

使用JavaScript进行编程时可能遇到的问题分析

Flow的使用

TypeScript的使用

JavaScript语言特征介绍（类型）

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

弱类型和强类型

弱类型？

在定义变量的时候，我们可以为变量赋值任何数据，变量的数据类型不是固定死的，这样的类型叫做弱类型

var a = 10;
a = "abc";
a = [];
a = function(){};

强类型？

在声明变量的时候，一旦给变量赋值，那么变量的数据类型就已经确定，之后如果要给该变量赋值其他类型的数据，需要进行强制数据类型转换。

int a = 10;
a = "10";

动态类型和静态类型

动态类型和静态类型的核心区别： 动态类型的类型检查会在代码运行的时候进行，而静态类型的类型检查则是在编译时进行。

运行时类型检查

var obj = {};
obj.forEach(function(v, i){
​
})

编译时类型检查

int num = 100;
num = "abc";

03-动态类型和弱类型带来的问题
// 动态类型，类型检查的操作是在运行时进行的。
// 代码中的错误，只能在代码运行的时候被发现

// 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

function greet(obj){
    obj.sayHello();
}
​
var o = {
    name: "张学友"
}
​
greet(o);

提高代码的可读性

// 如果能指定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(100)
sum(['a', 'b'])
sum()

便于代码重构

function test(num){
    console.log(num)
}
​
test({name: "郭富城"})
​
test({name: "郭富城"})
​
​
test({name: "郭富城"})
​
test({name: "郭富城"})
​

增强IDE的功能

IDE: 集成开发环境

Flow的基本使用步骤

安装

npm init -y
npm i flow-bin -D

书写代码，为代码添加类型

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

1. 通过注释的方式添加 (不会改写js代码，代码在添加完类型之后仍然可以正常运行)

2. 通过直接给数据添加类型，改写js代码，如果要正常运行，需要使用babel进行转码

使用flow进行类型检查

1. 在pacakge.json文件中，scripts属性中添加flow命令

2. 需要为flow创建一个配置文件.flowconfig

npm run flow init

1. 执行类型检查

npm run flow

使用babel对flow代码进行转码

如果给数据添加类型声明是通过第二种方式，直接修改的js代码，那么代码是不能正常运行的

我们需要通过babel对代码进行转码之后才能正常运行

1. 安装babel以及presets

npm i babel-cli babel-preset-flow -D

1. 配置package.json添加build命令调用babel···json{ "scripts": {

     "build": "babel ./src -d ./dist"

   }}···

2. 执行build命令对文件进行转换

npm run build

Flow小结

Flow是什么？

Static Type Checker For JavaScript

静态类型检查工具

Flow能做什么？

Flow能够给JavaScript提供静态类型检查的能力，其实就是为javascript添加了一个编译过程。

Flow的使用

1. 安装Flow

npm i flow-bin -D

1. 需要编写Flow代码

   • 通过注释的方式为代码添加类型 （不会对js代码产生任何更改，影响）

   • 通过直接在js代码中书写类型 （改变了js代码的结构，需要通过babel进行转码之后，才能够正常的运行）

// 文件中需要添加一个标记 告诉flow当前文件需要进行类型检查！
// @flow 
​
var 变量 /*: 类型*/ = 数据
​
var 变量: 类型 = 数据

1. 如果使用的是第二种方式，则需要配合babel使用

npm install babel-cli babel-preset-flow -D

// 通过babel进行转码之后，代码就可以正常运行

TypeScript

是什么？

TypeScript是微软公司开发的一款开源的JavaScript超集语言！

JavaScript超集： 当前任何JavaScript都是合法的TypeScript代码！

TypeScript主要为JavaScript提供了类型系统和ES6语法的支持！

Flow是一个类型检查工具，TypeScript是一种开发语言！

TypeScript有自己的编译工具，我们写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行！

如何使用

安装

TypeScript命令行工具的安装（TS编译器）

npm i typescript -g

安装好了之后，全局会提供一个tsc命令给我们使用！

编写TypeScript代码

通过tsc进行编译，最终运行

ts配置文件的说明

1. 创建配置文件

tsc --init

1. 设置配置项

   • target: 指的就是将ts代码要转换成哪个版本的js代码 es5 es3

   • module: 指的就是将ts代码转换成js代码之后，使用的模块化的标准是什么

   • outDir: 指的就是将ts代码转换成js代码之后，js代码存放的文件夹路径

   • rootDir: 指的就是要将哪个目录中的ts代码进型转换，ts代码的存放路径

   • strict: 是否要将ts代码转换为严格模式的js代码！

2. 使用配置文件

tsc -p ./tsconfig.json

TypeScript小结

是什么？

是微软开发的一款编程语言，是JavaScript超集！

能做什么？

TypeScript提供了类型系统

怎么用？

因为typescript是一个编程语言，它最终会被转换成javaScript代码运行，tsc就是用来进行转换的工具

1. 安装 tscnpm i typescript -g

2. 编写TS代码

3. 利用tsc命令对文件进行编译 ts->js

ts的配置文件

1. 创建配置文件 .tsconfig.jsontsc --init

2. 常见配置属性

   • target: 转换成的js代码的目标版本 ES ES3 ES5 ES6

   • module: 转换成的js代码的模块化方式

   • rootDir: ts代码存放的路径，要被转码的ts文件存放的路径

   • outDir: 最终转换好的js文件的存储路径

   • strict: 是否要转换成严格模式的代码