typescript应用实例

ts封装操作mysql的类方法

要求：有add,update,delete,get方法，需要统一规范和代码重用。解决方案：统一规范要定义接口，代码重用要使用泛型

interface DBI<T> { // 定义接口
  add (info: T): boolean;
  update (info: T, id: number): boolean;
  delete (id: number): boolean;
  get (id: number): any[];
}

class MysqlDb<T> implements DBI<T> { // 定义类
  constructor () {
    console.log('数据库建立连接')
  }
  add (info: T): boolean {
    console.log('add:', info)
    return true
  }
  update (info: T, id: number): boolean {
    console.log('update:', info, id)
    return true
  }
  delete (id: number): boolean {
    console.log('delete:', id)
    return true
  }
  get (id: number): any[] {
    let list: any[] = [1, '234', 'some']
    console.log('get:', id, list)
    return list
  }
}

interface User { // 定义传入参数的接口
  username: string; password: string
}
class Info { // 定义传入参数的类
  title: string; name: string
  constructor (params: {
    title: string, name: string
  }) {
    this.title = params.title
    this.name = params.name
  }
}

var user1 = new MysqlDb<User>()
user1.add({ username: 'Ethan', password: '123456' })

var info1 = new Info({
  title: '新闻', name: '国家新闻'
})
var info2 = new MysqlDb<Info>()
info2.update(info1, 1)

命名空间

主要是为了组织代码，避免命名冲突。多用于方法文件中

// utils.js
export namespace A {
  interface Animal {
    name: string;
    eat(): void;
  }
  class Dog implements Animal {
    name: string;
    constructor(name: string) {
      this.name = name
    }
    eat () {
      console.log(`${this.name}在吃狗粮`)
    }
  }
}

// index.js
import { A } from './utils'
var dog = new A.Dog('小狗')
dog.eat()

类装饰器

在不修改类的前提下扩展类的功能

function logClass(target: any) {
  // target就是当前类
  console.log(target)
  target.prototype.apiUrl = 'xxx'
}

@logClass // 不能分号，下面接着类,这就相当于执行了logClass方法
class HttpClient {
  constructor () {}
}

var http:any = new HttpClient()
console.log(http.apiUrl)

// 有参数类装饰器
function logClass(params: any) { // params: 参数str
  return function(target) { // target: 类
    console.log(params)
    console.log(target)
    target.prototype.apiUrl = '***'
  }
}

@logClass('str')
class HttpClient {
  constructor () {}
}

var http:any = new HttpClient()
console.log(http.apiUrl)

// 重载构造函数
function logClass(target:any) {
  console.log(target)
  return class extends target {
    apiUrl: any = '我是修改后的数据'
    getData () {
      console.log('修改后' + this.apiUrl)
    }
  }
}

@logClass
class HttpClient {
  public apiUrl: string;
  constructor () {
    this.apiUrl = '我是构造函数的数据'
  }
  getData () {
    console.log(this.apiUrl)
  }
}
var http: any = new HttpClient()
http.getData()

属性装饰器

function logProperty (params: any) {
  return function (target: any, attr: any) {
    console.log(attr)
    console.log(target)
    target[attr] = params
  }
}

class HttpClient {
  @logProperty('http://')
  public url: any
  constructor () {}
  getData () {
    console.log(this.url)
  }
}
var http = new HttpClient()
http.getData()