typescript

TypeScript语言：

• JavaScript是一门 弱类型、动态类型 的语言。大规模应用下，JavaScript就会变得越来越复杂，开发周期也会更长。
• TypeScript是一门 强类型、静态类型 的语言

强类型与弱类型[从类型安全的角度]

JavaScript是弱类型

• 弱类型不会限制参数的类型js function foo(num)
• 弱类型语言允许随意的隐式类型转换[变量类型随时改变不是强弱类型的差异]
• 弱类型的代码灵活多变。也就失去了可靠性
• 弱类型的问题：

    const obj = {};
    obj.foo();//在语言的语法层面，这样写不会报错。但代码运行时会报错。obj.foo is not a function

    function sum(a,b) {
        return a+b;
    }
    sum(1,2);//3
    sum('222',4);//2224  由于弱类型导致参数类型不确定

• 对象的属性名应该是 String 或者 Symbol 类型

TypeScript是强类型

• 强类型有更强的类型约束，而弱类型中几乎没有约束
• 强类型中不允许数据随意的隐式类型转换
• 强类型的优势：
  • 强类型的代码具有可靠性。
  • 错误会更早地暴露。一些代码的错误在书写时就会暴露，不会等到运行时
  • 代码更智能，编码更准确
  • 更方便代码重构，重构更牢靠
  • 减少不必要的类型判断

    const obj = {};
    obj.foo();//在敲代码时，语法层面就会直接报出错误，不会等到运行到错误代码时才发现
    

静态类型与动态类型[从类型检查的角度]

• 静态类型一旦定义不能修改
• 动态类型的变量类型可以随时修改。JavaScript是动态类型

JavaScript自有类型系统的问题

灵活多变。丢失了类型系统的可靠性。
JavaScript是一门脚本语言，不需要编译可以直接运行。而静态类型需要在编译环节做类型检查。

Flow–JavaScript的类型检查器：只是一个工具，弥补了JavaScript自有类型系统的不足 🔺 2014年Facebook推出的工具

npm install flow-bin --dev

    function sum(a:number,b:number) {//规定参数类型。在调用函数传参时就会自动去检测参数类型。没有要求必须给 所有参数都规定参数类型
        return a+b;
    }

• flow编译移除类型注解 :flow-remove-types
• babel–JavaScript编译工具 npm install @babel/core @babel/cli @babel/preset-flow dev
• 添加.balerc文件

    {
        "presets": ["@/babel/preset-flow"]
    }
  

• https://flow.org/en/docs/editors
• https://www.saltycrane.com/cheat-sheets/flow-type/latest/
• flow原始类型：

    const a: string = 'myname';
    const b: number = Infinity; //number类型包括： NaN  Number  Infinity
    const c: boolean = false; //true
    const d: null = null;
    const e: void = undefined;
    const f: symbol = Symbol();
  

• flow数组类型：

    const arr1: Array<number> = [1,2,3]; //<number>表示数据类型是数组，数组的元素全部是由Number类型组成
    const arr2: number[] = [4,5,6]; //number[]也表示数据类型是全部由数字组成的数组
    const foo: [string, number] = ['foo', 77];  //元组类型：明确元素数量以及元素类型的数组
  

• flow对象类型：

    const obj1: { key1: string, key2: number } = { key1:'balabaal', key2: 77 };//定义了对象的属性名已经属性值的数据类型
    const obj2: { key1?: string, key2: number } = { key2: 77 };//？表示该参数为可选参数，可有可无。
    // const obj3: { [string]:string,[Symbol]:symbol } = { 'name':'peter',  } //定义键值对类型
    const objj = { [string]: string } = {};
    objj.ke1 = 'value1';
    objj.ke2 = 'value2';
  

• flow函数类型：对函数的参数类型和返回值类型进行约束

    function foo(  callback: (string,number) => void  ) {//回调函数，接收两个参数，一个string类型一个number类型，返回值类型为void表示没有返回值。
        callback('hcfa',77)
    }
    // 调用foo函数时，接收的函数作为参数。这个函数的参数个数和参数类型以及返回值类型都已经做好约束了
    foo( function(str,n) {
        //...  不可以return  
    })
  

• flow特殊类型：

    const type:'success' | 'warning' | 'danger' = 'success';//定义一个变量type。它的值只可以是'success' 或者 'warning' 或者 'danger
    //可以使用type关键字去声明一个类型的别名：
    type StringOrNumber = string | number;//表示声明了一个数据类型，这个类型可以是string类型或者是number类型
    const b: StringOrNumber = 'my name is 77';//也可以使用number类型
    // maybe类型
    const gender: ?number = undefined;//添加 ？表示gender除了可以接收number类型，还可以接收 undefined 类型和 null 类型。
  

• flow的 Mixed / Any 类型: Mixed类型可以理解为是所有数据类型的一个混合。即它可以接收任意类型。Any也是类型的效果。

• 那两者的区别是什么呢？ Any是弱类型，而Mixed是强类型。Mixed虽然可以接收任意类型的数据，但是传递进来的数据必须先明确数据类型才可以使用它。

   function passMixed(value:mixed) {
       if(typeof value === 'string') {//虽然mixed表示可以接收任意数据类型，但是传递进来的数据必须先明确数据类型后才可以使用，否则代码语法层面就会报错
           value.substr(1);
       }
       if(typeof value === 'number') {
           value * value;
       }
   }
   function passAny(value: any) {//Any接收任意数据类型，它是弱类型，所以传进来的数据直接使用没有问题。 不推荐使用它。Any存在的意义是为了兼容老代码
       value.substr(1);
       value * value;
   }

• 运行环境API

• 浏览器环境： DOM BOM
• node环境：各种模块

TypeScript语言规范与基本应用：是基于JavaScript基础之上的一门编程语言

TypeScript是JavaScript的超集【扩展集】

• npm install typescript

TypeScript枚举类型：使用enum关键字声明一个枚举

* 枚举类型会影响编译后的结果

    // const posrStatus =  {
    //     success: 0,
    //     fail: 1,
    // }
    enum postStatus {//常量枚举，在enum关键字前面加const
        success = 0,//如果没有设置值会从0开始累加
        fail = 1,
    }
    const post = {
        status:postStatus.success
    }

• 在TypeScript中，如果未知变量类型，TypeScript会根据变量的使用情况去推断变量的类型。隐式类型推断
• TypeScript类型断言：就是当TypeScript无法明确判断某个变量的数据类型时，开发者明确告诉TypeScript，x的数据类型是number。使用as关键字： x as number

TypeScript接口：interface 用来约束对象的结构

TypeScript中类的使用：

• TypeScript中类的访问修饰符

    class Person {
        public name:string;//TypeScript中类里面的变量无法在构造器中通过this创建，需要先声明
        private age:number;//私有属性，只允许当前类访问
        protected readonly gender:boolean;//受保护的属性，允许在当前类和继承自它的子类中访问
        //readonly只读属性。不允许改变值

        constructor (name:string, age:number ) {
            this.name = name;
            this.age = age;
            this.gender = true;
        }
        say(msg:string):void {
            console.log(`i am ${this.name},${msg}`);
            console.lof(this.age),
        }
    }
    const tom = new Person('tom',18);
    console.log(tom.age);//在 TypeScript 中会报错，因为访问不到类的私有属性

• 类与类之间可能存在一些共有的属性或者方法，这些共有的特征可以使用接口去抽象。

     class myClass implements myInterface,myInterface2 {}

• 抽象类包含具体的实现，接口只是成员的抽象，不包含具体的实现

• 抽象类只能被继承，不能使用new关键字去创建实例

    abstract class myClass {}

泛型：在声明阶段不去指定具体的类型，调用时才传递一个具体的类型【复用代码】