typescript 相关概念

1. TypeScript 开发环境搭建

   1. 下载Node.js

      1. 14.15.1版本64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi

      2. node官网： Node.js

   2. 安装Node.js

   3. 使用npm全局安装typescript

      1. 进入命令行

      2. 输入: npm i -g typescript

   4. 创建一个ts文件

   5. 使用tsc对ts文件进行编译

      1. 进入命令行进入

      2. ts文件所在目录

      3. 执行命令：tsc 文件名.ts

2. typtscript类型

   1. 类型声明

      1. 通过类型声明可以指定TS中变量（参数、形参）的类型

      2. 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

      3. 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值

      4. 语法：

         let 变量：类型；
         let 变量：类型 = 值;
         function fn（参数：类型，参数：类型）：类型{
         	...
         }

   2. 自动类型判断

      1. typescriptTS拥有自动的类型判断机制

      2. 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型

      3. 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

   3. ts类型

      1. 常用类型

      2. 类型定义：

         1. 字面量：用| 表示或

         2. any： 设置any相当于对该变量关闭了ts检测。可以赋值给其他变量，影响其他变量的类型 --- 避免使用

         3. unknown：表示位置的类型的值。他不能赋值其他类型的值。

            1. 解决：可以对unknown的值进行类型判断

         4. 类型断言：可以用来告诉解析器变量的实际类型

            1. 语法： 变量 as 类型

            2. <类型> 变量

         5. void：用来表示为空，主要表示函数返回值为空，返回null也是表示为空

         6. never:表示永远不会返回结果

         7. {}：用来指定对象包含哪些属性

            1. 语法：{属性：属性值} eg： let b : {name: string}

            2. 在属性后加?，表示属性是可选的 eg：let b : {name: string， age?: number }

            3. 属性后面加任意：eg： let b : {name: string， [propName: string]: any }

         8. 设置函数结构的类型声明

            1. 语法：（形参：类型，形参：类型，...）=> 返回值

            2. eg：let d: (a:number, b:number) => number

         9. 数组表示：

            1. 表示：类型[]

               1. let e:string[]; 表示字符串 ;

               2. let f:number[]; 表示数字的数组

            2. 表示：Array<类型>

               1. let g: Array

         10. 元组，元组就是固定长度的数组

             1. 写法：h: [string, string]; h = ['a', 'b']

         11. 枚举：enum

             1. 写法： let i : {name:string,gender:string}

             2. enum Gender{male=0,femal=1}

      3. 拓展：

         1. &：表示同时：let j: { name: string } & { age: number };

         2. |：

            1. 使用

            2. 类型的别名

               type myType = 1|2| 3|4| 5;
               let k: myType;

3. 编译选项

   1. 自动编译文件

      1. 编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。

      2. 示例：tsc xxx.ts -w

   2. 自动编译整个项目

      1. 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。

      2. 但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.

      3. jsontsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译

      4. 配置选项：在tsconfig.json文件

         1. include

            1. 定义希望被编译文件所在的目录

            2. 默认值：["/*"]

            3. **示例：

               1. "include": ["src//", "tests/**/"]

               2. 上述示例中，所有src目录和tests目录下的文件都会被编译

         2. exclude

            1. 定义需要排除在外的目录

            2. 默认值： ["node_modules", "bower_components", "jspm_packages"]

            3. 示例：

         3. compilerOptions

            1. 编译选项是配置文件中非常重要也比较复杂的配置选项

            2. 在compilerOptions中包含多个子选项，用来完成对编译的配置

               1. 项目选项

                  1. target

                     1. 设置ts代码编译的目标版本

                     2. 可选值：ES3 (默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

                     3. 示例：compilerOptions": {"target": "ES6"}

                     4. 如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码

                  2. lib

                     1. 指定代码运行时所包含的库（宿主环境）

                     2. 可选值：ES5、ES6/ES2015、 ES7/ES2016、ES2017、ES2018、 ES2019、ES2020、 ESNext、 DOM、WebWorker、 ScriptHost

                     3. 示例：{"lib": ["es6", "DOM"]}

                  3. outDir

                     1. 用来指定编译后文件所在目录

                     2. 可选值：

                     3. 示例：

                  4. outFile --- 用的不多

                     1. 将代码合并为一个文件

                  5. allowJS

                     1. 是否对js文件进行编译，默认为false

                  6. checkJS

                     1. 是否检查js代码是否符合语法规范

                  7. removeComments：

                     1. 是否移除注释

                  8. noEmit：

                     1. 不生成编译后的文件

4. 类的介绍

   1. 属性的定义：

      1. 实例属性: p.name

      2. 类属性：Person.name

         1. eg: readonly name:string = 'zhangsan'

   2. 方法的定义：

      1. 实例方法：p.learn()

      2. 类方法：Person.learn()

      3. 构造函数

         1. 属性直接在类中定义

         2. 赋值是在类的构造函数赋值的：constructor(){}

            class Person {
            	name: string,
            	age: number,
            	
            	constructor(name:string, age:number){
            		// this表示当前对象的实例对象
            		this.name = name;
            		this.age = age;
            	}
            	
            	eat(){
            		console.log('吃饭')
            	}
            }
            
            
            const p1 = new Person(name: 'zhangsan', age: 18);
            const p2 = new Person(name:'lisi', age: 30);
            
            p1.eat();

5. 继承

   1. Dog extends Animal

      1. 此时，Animal被称为父类，Dog被称为子类

      2. 使用继承后，子类将会拥有父类所有的方法和属性-

      3. 通过继承可以将多个类中共有的代码写在一个父类中，

         1. 这样只需要写一次即可让所有的子类都同时拥有父类中的属性

         2. 如果希望在子类中添加父类中没有的属性或方法，直接加就行

         3. 如果不满足父类中的方法，可以在本类中做重写（这种子类覆盖掉父类方法的形式，就是方法的重写）

      4. 父类也叫做超类，super

         class Animal {
         	name: string;
         	constructor(name: string) {
         		this.name = name;
         	}
         	sayHello() {
         		console.log('在说话');
         	}
         }
         
         
         class Dog extends Animal{ 
         	age: number;
         	constructor(name: string,age:number){
         		// 如果在子类中写了构造函数，在子类构造函数必须对父类构造函数进行调用
         		super();   // 调用父类构造函数
         		this.age = age;
         	}
         	sayHello() {
         		// 在类的方法中 super就表示当前类的父类
         		//super.sayHello();
         		console.log('汪汪汪')
         	}
         }
         
         const dog = new Dog(name:'阿黄',age: 3);

      5. 抽象类

         1. 以abstract开头的类是抽象类，抽象类和其他类区别不大，只是不能用来创建对象抽象类就是专门用来被继承的关

         2. 作用：不能被创建实例

         3. 特点：可以创建抽象方法，通用方法

         4. 抽象方法：

            1. 定义一个抽象方法

            2. 抽象方法使用 abstract开头，没有方法体

            3. 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写

               abstract class Animal {
               	name: string;
               	constructor(name: string) {
               		this.name = name;
               	}
               	
               	abstract sayHello():void;
               }

            4. 子类需要重写父类的抽象方法

6. 定义接口：interface

   1. 描述一个对象类型（使用别名） ----- 只能声明一个

      abstract class Animal {
      	name: string;
      	constructor(name: string) {
      		this.name = name;
      	}
      	
      	abstract sayHello():void;
      }

   2. 接口用来定义一个类结构（使用interface） ---- 可以声明多个

      interface myInterface{
          name: string;
          age: number;
      }
      interface myInterface{
          gender: string;
      }
      ​
      const obj: myInterface = { 
          name: 'sss',
          age: 111,
          gender:'男'
      };

      注意：接口中的所有属性都不能有实际的值，接口值定义对象的结构，而不考虑实际的值。在接口中定义的方法都是抽象方法

   3. 定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求

   4. 作用：接口主要是对类的定义规范

7. 泛型：

   1. 在定义函数或是类时，如果遇到类型不明确就可以使用泛型

      function fn(a:T):T{
          return a;
      }

   2. 可以直接调用具有泛型的函数

      1. 不指定泛型：fn(a:10);

      2. 指定泛型：fn(a: 'hellow');

   3. 可以传多个参数

      function fn2(a: T, b: K):T{
      	console.log(b);
      	return a;
      }
      fn2(a: 123, b: 'hello');

   4. 可以使用interface：T extends Inter 表示泛型T必须是Inter实现类（子类）

      interface Inter{
      	length: number;
      }
      function fn3(a: T): number{ 
      	return a.length;
      }
      
      fn3( a: 10);