【typescript】全程干货，淦

ゞ浴缸里的玫瑰 2022-12-12 13:43 114阅读 0赞

## 内容 ##

> typescript 概述  
> typescript 变量与数据类型  
> 列出 javascript 中没有的地方

## 1. typescript 概述 ##

官网在此：[typescript中文网][typescript]

##### 1.1 什么是 typescript #####

`TypeScript`（简称：TS）是 `JavaScript 的超集`（JS 有的 TS 都有）。 `TypeScript = Type + JavaScript`（为 JS 添加了类型系统）。 TypeScript 是微软开发的开源编程语言，设计目标是开发大型应用。 可以在任何浏览器、任何计算机、任何操作系统上运行。

##### 1.2 typescript 相较于 Javascript 的优势 #####

1.  `类型化思维方式`，使得开发更加严谨，提前发现错误，减少改 Bug 时间
2.  类型系统提高了代码可读性，并使维护和 `重构代码更加容易`
3.  `补充了接口、枚举` 等开发大型应用时 JS 缺失的功能
4.  Vue 3 源码使用 TS 重写，释放出重要信号：TS 是趋势；Angular 默认支持 TS；React 与 TS 完美配合，是很多大型项目的首选。

##### 1.3 安装并运行 typescript 代码 #####

**安装**：

1.  首先拥有 `node` 环境
2.  全局安装 typescript （`npm i typescript -g`）
3.  检测 typescript 是否安装成功 （·终端输入：tsc·）

**运行：**

1.  首先将 ts 代码转换成 js 代码，再运行 js 代码 （`tsc 1.ts` ； `node 1.js` ）
2.  安装转换器 （`npm i ts-node -g`）；然后直接运行 ts 代码 （`ts-node 1.ts`）（内部原理也是将 ts 装换成 js）

## 2. typescript 变量与数据类型 ##

ts 中的变量与 js 中的变量使用基本一致，只是在原有基础上增加了：类型注释（声明变量前要声明其类型）

##### 2.1 变量 #####

let age: number = 18

**注意**：声明变量的时候要指定变量的类型。

##### 2.2 类型注解 #####

1.  类型注解是什么

let age: number = 18

其中 `number` 就是 类型注解

1.  类型注解的作用

类型注解：是一种 `为变量添加类型约束` 的方式

程序员 和 TS 有个约定

// 程序员 和 TS 约定：变量 age 的类型为 number（数值类型） 
    let age: number = 18

约定了什么类型，就只能给变量赋什么类型的值

// × 错误演示 
    age = 'Hello TS'

只要类型确定，变量就拥有了该类型的 `属性和方法`

##### 2.3 数据类型概述 #####

1.  TypeScript 中的数据类型分为两大类：1 `原始类型`（基本数据类型） 2 `对象类型`（复杂数据类型）；
2.  常用的基本数据类型有 5 个：`number / string / boolean / undefined / null`。

①：简单数据类型的类型注解

let num :number = 18
    let str :string = '18'
    let current : boolean = true
    let find : undefined = undefined
    let state : null = null

②：对象类型的类型注解

##### 接口 #####

对于对象类型的类型注解，就要用到接口（为对象的类型注解命名，并为你的代码建立契约来约束对象的结构）

// 用接口定义公共的类型注解（每个成员间可用分号';' 隔开，也可省略）
    interface IUser{ 
        name:string
        age:number
        say:(talk:string)=>void  //无返回值就返回 void（空）；存在返回值，就返回对应的数据类型注解
    }
    // 用类型注解规范对象 ‘chen’
    let chen : IUser = { 
        name:'cwen',
        age:18,
        say:function(hello){ 
            console.log(hello)
        }
    }

interface 表示接口，接口名称约定以I开头

##### 接口扩展 #####

接口可以继承接口

1.  接口的继承，类实现接口

interface People{ 
        work():void
    }
    interface Cwen extends People{  //用extends 实现接口的继承
        play(name:string):void
    }
    
    class Web implements Cwen{  // 用web 类 实现接口的方法（继承后，接口有两个方法，需要继承）
        public name:string
        constructor(name:string){ 
            this.name = name
        }
        work():void{ 
            console.log( this.name+'敲代码')
        }
        play(name):void{ 
            console.log(name + '玩游戏')
        }
    }
    var w = new Web('陈稳')
    w.play('陈稳')
    w.work()

1.  接口的继承，类实现接口，类再继承类

interface People{ 
        work():void
    }
    interface Cwen extends People{  //用extends 实现接口的继承
        play(name:string):void
    }
    
    class Programer{ 
        public name:string
        constructor(name:string){ 
            this.name = name
        }
        coding(code:string):string{ 
            return this.name + code
        }
    }
    
    class Web extends Programer implements Cwen{  // 用web 类 实现接口的方法（继承后，接口有两个方法，需要继承）
        constructor(name:string){ 
            super(name)
        }
        work():void{ 
            console.log( this.name+'敲代码')
        }
        play(name):void{ 
            console.log(name + '玩游戏')
        }
    }
    var w = new Web('陈稳')
    console.log(w.coding('敲代码'))

## 3. typescript 的语法 ##

typescript 语法与 javascript 语法基本一致，只是在定义变量时，要进行类型注解

##### 3.1 typescript 函数 #####

typescript 中函数定义及使用与 javascript 一致，只是在定义形参时，可以用类型注解来规范形参的类型；还可用类型注解规范函数的返回值

function play(age: number): void {  
    if (age < 18) {  
    return 
    }
    console.log('网吧上网好爽啊，王者、吃鸡两不误') }
    play(16) // 情况1：进入if后return，后续代码不执行 
    play(20) // 情况2：不进if，直接打印内容： 网吧上网好爽啊，王者、吃鸡两不误

注意：如果函数没有返回值，默认返回值类型是：void（空），可省略不写

## 4. typescript 中的 DOM BOM ##

##### 4.1 在浏览器运行ts #####

为了在浏览器运行 ts代码；需要将 ts 代码转换成 js 代码，然后在 HTML 页面引入使用；为了避免每次修改 ts 都要执行 `tsc` ；此处可也对 ts 代码的变化进行监控，然后实时更新。命令行：`tsc --watch index.ts`（–watch 表示启用监视模式，只要重新保存了 ts 文件，就会自动调用 tsc 将 ts 转化为 js）

##### 4.2 typescript 操作 DOM BOM #####

typescript 操作 DOM BOM 的方式与 javascript 方式基本一致，所有 javascript 的 API 皆可使用

##### 类型断言 #####

问题：通过 选择器`获取 DOM 元素时`，拿到的元素 `类型都是 Element`  
原因：因为无法根据 选择器 来确定元素的类型，所以，该方法就返回了`一个宽泛的类型`：元素（Element）类型  
不管是 h1 还是 img 都是元素  
导致新问题：无法访问 img 元素的 src 属性了  
因为：Element 类型只包含所有元素共有的属性和方法（比如：id 属性）

解决方法：使用 `类型断言`，来`手动指定更加具体的类型`（比如，此处应该比 Element 类型更加具体）

let img = document.querySelector('#image') as HTMLImageElement

技巧：通过 console.dir() 打印 DOM 元素，在属性的最后面，即可看到该元素的类型

**总结**：对于 DOM 以及 BOM的操作，建议使用 javascript

## 5. typescript 中的枚举 ##

枚举是组织有关联数据的一种方式

使用场景：当变量的值，只能是几个固定值中的一个，应该使用枚举来实现

注意：JS 中没有枚举，这是 TS 为了弥补 JS 自身不足而新增的

##### 5.1 创建枚举 #####

// enum 枚举名称 { 成员1, 成员2, ... }
    enum Gender {  Female, Male } 
    enum Player {  X, O }

约定 `枚举名称、成员名称以大写字母开头`。  
多个成员之间使用逗号 `（,）分隔`。  
注意：枚举中的成员，根据功能自己指定； 枚举中的成员不是键值对

##### 5.2 使用枚举 #####

枚举是一种类型，因此，可以其作为变量的类型注解

enum Gender {  Female, Male } 
    let userGender: Gender

访问枚举（Gender）中的成员，作为变量（userGender）的值：

userGender = Gender.Female 
    userGender = Gender.Male

注意：枚举成员是 `只读` 的，也就是说枚举中的成员 `可以访问，但是不能赋值` ！

##### 5.3 枚举成员的值 #####

enum Gender {  Female, Male } 
    let userGender: Gender = Gender.Female 
    console.log(userGender) // 0

**枚举成员是有值的**，默认为：`从 0 开始自增` 的数值

##### 5.4 数字枚举 #####

**数字枚举**：枚举成员的值为数字

当然，也可以给枚举中的成员初始化值

enum Gender {  Female = 1, Male } // Female => 1 Male => 2 
    enum Gender {  Female = 1, Male = 100 } // Female => 1 Male => 100

##### 5.5 字符串枚举 #####

**字符串枚举**：枚举成员的值是字符串

enum Gender {  Female = '女', Male = '男' }

**注意**：`字符串枚举` 没有自增长行为，因此，`每个成员必须有初始值`

console.log(Gender.Female) // 女 
    console.log(Gender.Male) // 男

## 6. typescript 中的类 ##

##### 6.1 类的定义 #####

类的定义与 es6 中类的定义相似（具体可参考：[es6中的类][es6]）

class Person {  //定义基本的类
        name: string //属性 前面省略了 public 关键字
        constructor(name: string) {   // 构造函数 实例化类的时候触发的方法
            this.name = name
        }
        work():string{ 
            return `${ this.name} 在工作`
        }
    }
    
    // 类的使用
    // var p = new Person('cwen')
    // console.log(p)

##### 6.2 类的继承 #####

类的继承用到 constructor super 关键字（与es6 中类的继承相似）

class Person {  //定义基本的类
        name: string //属性 前面省略了 public 关键字
        constructor(name: string) {   // 构造函数 实例化类的时候触发的方法
            this.name = name
        }
        work():string{ 
            return `${ this.name} 在工作`
        }
    }
    // var p = new Person('cwen')
    // console.log(p)
    
    //# 类的继承
    class Son extends Person{ 
        constructor(name:string){ 
            super(name)
        }
        work():string{ 
            return '子类在工作'
        }
    }

注意：当子类的方法与父类方法一致时，子类使用自身的方法

##### 6.3 类的修饰符 #####

1.  `public`（共有类型，不加默认为public） `在类里面、子类、类的外部都可以访问`
2.  `protected`（保护类型） `在类里面、子类里面都可以访问 、在类外面无法访问`
3.  `pricate`（私有类型） `在类里面可以访问、 子类、类外部都无法访问`

注意：修饰符既可以修饰属性，也可以修饰方法

##### 6.4 静态属性，静态方法 #####

静态方法，只能通过类来调用；实例方法必须用类的实例来调用

class Star{ 
        public name:string
        static age:number
        constructor(name:string){ 
            this.name = name
        }
        run():string{   // 实例方法
            return this.name + '在奔跑'
        }
        static work():string{  //静态方法（静态方法只能使用静态属性）
            return Star.age + '在工作'
        }
    }
    
    // 实例方法的调用，直接用类调用
    // Star.age = 21
    // console.log(Star.work())
    
    // 实例方法，必须new 实例来调用
    // var sta = new Star('cwen')
    // console.log(sta.run())

##### 6.5 多态 #####

多态：父类定义一个方法不去实现，让继承他的子类实现，每一个子类都有不同的表现（多态属于继承）

class Animal{ 
        public name:string
        constructor(name:string){ 
            this.name = name
        }
        eat():void{  //定义方法，让子类来实现
            console.log('动物都会吃')
        }
    }
    
    class Dog extends Animal{   // 定义dog 类，实现吃的方法
        constructor(name:string){ 
            super(name)
        }
        eat():string{ 
            return this.name + '吃肉肉'
        }
    }
    
    class Cat extends Animal{    // 定义cat 类，实现吃的方法
        constructor(name:string){ 
            super(name)
        }
        eat():string{ 
            return this.name + '吃咸鱼'
        }
    }
    
    // var c = new Cat('小百度')
    // console.log(c.eat())

##### 6.6 抽象类、抽象方法 #####

1.  typescript 中的`抽象类`，它是`其他类继承的基类`，`不能直接实例化`
2.  用 `abstract 关键字`定义`抽象类和抽象方法`，`抽象类中的抽象方法不包含具体实现`并且`必须在派生类中实现`
3.  `abstract 创建的抽象方法只能放在抽象类里面`
4.  抽象类和抽象方法是`用来定义标准`的 （抽象类中也可定义非抽象方法，但是`抽象类中的抽象方法必须在子类中实现`）

abstract class Animal { 
        public name:string
        constructor(name:string) { 
            this.name = name
        }
        run():void{ 
            console.log('非抽象方法，必须有具体实现')
        }
        abstract eat():void // 不包含集体的实现
    }
    
    class Cat extends Animal{ 
        constructor(name:string){ 
            super(name)
        }
        work():void{ 
            console.log( this.name + '喜欢运动')
        }
        eat():void{  // 必须实现抽象类中的抽象方法
            console.log(this.name + '爱吃鱼')
        }
    }
    
    var c  = new Cat('小百度')
    c.eat()
    c.work()

## 7. 泛型 ##

泛型：软件工程中，我们不仅要创建一致风格的API，同时也要考虑可复用性；组件不仅能支持当前数据类型，同时也能支持未来的数据类型，这在创建大型项目时提供了十分灵活的功能。`通俗理解`；泛型是解决：类、接口、方法的复用性。以及对 不特定数据类型的支持

##### 7.1 函数中的泛型 #####

对于一般的函数，类型注解是数字就只能传递数字，若要修改成字符串还要重新注解；此时我们可以用 any 来注解，那么问题来了， any注解后无法验证传入的参数是否合法。所以泛型就很好的解决了此问题（`泛型：可以支持不特定的数据类型，要求：传入的参数和返回的参数数据类型一致`）

//# 定义泛型的函数 (一般用 T ，用其他字符也可)，具体什么类型是调用方法时决定的
    function getNum<T>(value:T):T{ 
        return value
    }
    console.log(getNum<number>(123))

##### 7.2 定义泛型类 #####

//# 定义泛型类（计算数组中最小值）
    class MinNum<T>{ 
      public arr : T[] = []
      aPush(value:T):void{ 
        this.arr.push(value)
      }
      Min():T{ 
          var minnum = this.arr[0]
          for(let i = 0; i< this.arr.length;i++){ 
              if(minnum > this.arr[i]){ 
                  minnum = this.arr[i]
              }
          }
          return minnum
      }
    }
    
    var m = new MinNum<string>(); //实例化类并指定类的 T 指定类型为 string 。若传入 string 类型就比贱 ASSIC 值
    m.aPush('q');
    m.aPush('v');
    m.aPush('b');
    m.aPush('a');
    m.aPush('i');
    console.log(m.Min())

##### 7.3 泛型接口 #####

1.  第一种使用方式

interface ConfigFn{ 
        <T>(value:T):T  //定义泛型接口，参数为泛型，返回值也为泛型
    }
    var getData:ConfigFn = function<T>(value:T):T{ 
        return value
    }
    console.log(getData<string>('a'))

1.  第二种使用方式

interface ConfigFn<T>{ 
        (value:T):T
    }
    function getData<T>(value:T):T{ 
        return value
    }
    var myData:ConfigFn<string> = getData;
    console.log(myData('a'))

[typescript]: https://www.tslang.cn/
[es6]: https://blog.csdn.net/cwq521o/article/details/106578111