JS 的语言进阶

功能
    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: 是否要转换成严格模式的代码