Typescript学习之路—练习

功能：定义一个操作数据库的库，支持 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('add')
    console.log(info);
    return true
  }

  update(info: T, id: number): boolean{
    console.log('update')
    console.log(info);
    return true
  }

  delete(id: number): boolean{
    // throw new Error('方法未实现')
    console.log('方法未实现');
    return true
  }

  get(id: number): any[]{
    let list = [
      {
        title: 'xxx',
        desc: 'xx',
      },
      {
        title: 'xxx',
        desc: 'xx',
      },
    ]
    return list;
  }
}

//已操作类
class Mssql<T> implements DBI<T>{
  add(info: T): boolean{
    console.log('add2')
    console.log(info);
    return true
  }

  update(info: T, id: number): boolean{
    throw new Error('方法未实现')
  }

  delete(id: number): boolean{
    throw new Error('方法未实现')
  }
  get(id: number): any[]{
    throw new Error('方法未实现')
  }
}

//操作用户表
class User {
  username: string | undefined;
  password: string | undefined;
}

let u = new User();
u.username = '张三';
u.password = '123456';

let p = new User();
p.username = "李四";
p.password = '789456';

let oMysql = new MysqlDB<User>();
oMysql.add(u);
oMysql.update(p,1);
oMysql.delete(1);
let oMssql = new Mssql<User>();
oMssql.add(u);

let data = oMysql.get(1);
console.log(data)

get方法部分还没有搞清楚；

按钮点击

class Greeter<T>{
  greeting: T;
  constructor(message: T){
    this.greeting = message
  }
  greet() {
    return this.greeting;
  }
}

let greet = new Greeter<string>('Hello  world');
let button = document.createElement('button');
button.textContent = 'say';
button.onclick = function(){
  alert(greet.greet());
}
document.body.appendChild(button)

参考：
Typescript中文手册： https://typescript.bootcss.com/
TypeScript 基础入门及综合案例使用：https://www.jianshu.com/p/d86a8698cb75