纵横研究院TS技术专题社区

TypeScript 基础入门及综合案例使用

2019-10-17  本文已影响0人  梁坤同学

TypeScript

数据类型

函数

ES5 创建对象和继承

TS 中的类

静态属性、静态方法

多态

抽象类

接口

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里的方法的实现细节，它之规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。Typescript 中的接口类似于 Java，同事还增加了更加灵活的接口类型，包括属性、函数、可索引和类等。

  1. 类类型接口：对类的约束 和 抽象类有点类似 
          interface Animal {
          name: string;
          eat(str: string): void
      }
      class Dog implements Animal {
          name: string;
          constructor(name: string) {
              this.name = name
          }
          eat() {
              console.log(this.name + '吃肉')
          }
      }
  2. 接口扩展：接口可以继承接口 
          interface Animal {
          eat(): void;
      }
      interface Person extends Animal {
          work(): void;
      }
  
      class Programmer {
          public name: string;
          constructor(name: string) {
              this.name = name
          }
          coding(code: string) {
              console.log(this.name + code)
          }
      }
  
      class Web extends Programmer implements Person {
          constructor(name: string) {
              super(name)
              this.name = name
          }
          eat() {
              console.log(this.name + '吃馒头')
          }
          work() {
              console.log(this.name + '写代码')
          }
      }
  
      let w = new Web("小黑")
      w.eat()
      w.work()
      w.coding("写 TS 代码")

泛型

泛型：软件工程中，我们不仅要创建一直的定义良好的 API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同事也能支持未来的数据类型，着在创建大型系统时为你提供十分灵活的功能。
在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
通俗理解：泛型就是解决类 接口 方法的复用性、以及对不特定类型的支持。

泛型的定义

泛型函数

    function getData<T>(value: T):T {
        return value
    }
    getData<number>(123)

泛型类：

    class MinClass<T> {
        public list: T[] = []
        add(value: T):void {
            this.list.push(value)
        }
        min():T {
            let minNum = this.list[0];
            for(let i = 0; i < this.list.length; i++) {
                if (minNum > this.list[i]) {
                    minNum = this.list[i]
                }
            }
            return minNum
        }
    }
    let m1 = new MinClass<number>();
    m1.add(1) 
    m1.add(14) 
    m1.add(5) 
    alert(m1.min())

泛型接口

综合使用

功能：定义一个操作数据库的库，支持 Mysql、Mssql、MongDB
要求1：Mysql、Mssql、MongDB 功能一样，都有 add、update、delete、get 方法
注意：约束统一的规范，以及代码重用
解决方案：需要约束规范所以要定义接口，需要代码重用所以用到泛型
1、接口：在面向对象的编程中，接口是一种规范
2、泛型 通俗理解：泛型就是解决类 接口 方法的复用性

    interface DBI<T> {
        add(info: T): boolean;
        update(info: T, id: number): boolean;
        delete(id: number): boolean;
        get(id: number): any[];
    }
    // 定义一个操作 mysql 数据库的类       注意：要实现泛型接口，这个类也应该是一个泛型
    class MysqlDb<T> implements DBI<T> {
        constructor() {
            console.log("数据库建立连接")
        }
        add(info: T): boolean {
            console.log(info)
            return true
        }   
        update(info: T, id: number): boolean {
            throw new Error("Method not implemented.");
        }
        delete(id: number): boolean {
            throw new Error("Method not implemented.");
        }
        get(id: number): any[] {
            let list = [
                {
                    title: 'xxxx',
                    desc: 'xxxxx',
                },
                {
                    title: 'xxxx',
                    desc: 'xxxxx',
                },
            ]
            return list
        }
    }
    // 定义已个操作 mssql 数据库的类
    class MssqlDb<T> implements DBI<T> {
        add(info: T): boolean {
            console.log(info)
            return true
        }   
        update(info: T, id: number): boolean {
            throw new Error("Method not implemented.");
        }
        delete(id: number): boolean {
            throw new Error("Method not implemented.");
        }
        get(id: number): any[] {
            throw new Error("Method not implemented.");
        }
    }
    // 操作用户表        定义一个 User 类和数据表做映射
    class User {
        username: string | undefined;
        password: string | undefined;
    }
    let u = new User()
    u.username = "张三"
    u.password = "123456"
    let oMysql = new MysqlDb<User>()
    oMysql.add(u)
    
    let oMssql = new MssqlDb<User>();
    oMssql.add(u)
    
    // 获取 User 表 id 为4的数据
    let data = oMysql.get(4)
    console.log(data)

模块

模块的概念

命名空间

命名空间和模块的区别

装饰器

类装饰器

类装饰器在类声明之前被声明（紧靠着类声明）。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。传入一个参数

上一篇 下一篇

猜你喜欢

热点阅读