Typescript学习3

Typescript学习

泛型

可以支持不特定的数据类型，要求：传入的参数和返回的参数一致

// 	T表示泛型，具体类型为调用这个方法时决定
function getData<T>(value: T): T {
  return value
}

console.log(getData<number>(1323))
console.log(getData<string>("1222"))

• 泛型类

// 泛型类
class MinClass<T> {
  public list: T[] = []
  add(...num: T[]): void {
    this.list = num
  }
  min(): T {
    let minNum = this.list[0]
    this.list.forEach((item) => {
      if (minNum > item) {
        minNum = item
      }
    })
    return minNum
  }
}

let m = new MinClass<number>()  // 实例化类，并且指定了类的T代表的类型
let m1 = new MinClass<string>()
m.add(0, 2, 3, 3)
console.log(m.min())  // 0
m1.add("12", "22", "111")
console.log(m1.min())  // 111

• 泛型接口

// 自定义接口不能完成多种参数的兼容，有严格的控制，除any类型之外
interface ConfigFn {
  (value1: string, value2: string): string
}
var setData: ConfigFn = function (value1: string, value2: string): string {
  return value1 + value2
}

console.log(setData("name", "zhangsan"))

// 泛型接口
interface CongfigFn {
  <T>(value: T): T
}

let getData: CongfigFn = function <T>(value: T): T {
  return value
}

console.log(getData<string>("azs"))
console.log(getData<number>(111))

// 第二种定义
interface Config<T> {
  (value: T): T
}

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

let myGetData: Config<string> = getData

console.log(myGetData("aada"))

• 泛型类扩展

接口是规范数据的格式和行为，但不实现，不能实例化。而创建类可以实例化有更多的操作空间

泛型可以帮助我们避免数据类型和类的不同的重复代码，以及对不特定数据类型的支持

class Info {
  public title: string | undefined // 防止不赋予初值的情况要指明为undefined
  public desp?: string | undefined
  constructor(title:string,desp:string){
      this.title = title 
      this.desp = desp
  }
}

class MysqlDb<T>{  // 通过泛型来对连接数据库的类进行服用
  add(info: T): boolean {   
    console.log(info)
    return true
  }
}

let info = new Info('1111','1111')
let db = new MysqlDb<Info>()   // 在传入数据进行检验
db.add(info)  // Info { title: '1111', desp: '111' }

装饰器

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为

通俗的来说，装饰器就是一个方法，可以注入到类、方法、属性来扩展类等功能

常见的装饰器有：类装饰器，属性装饰器，方法装饰器，参数装饰器

装饰器的方法：普通装饰器（无法传参）、装饰器工厂（可传参）

• 无参数装饰器

// 类装饰器：在类声明之前被声明（紧靠这类声明）类装饰器应用与构造函数，可以用来监视，修改或替换类定义

// 装饰器
function logClass(params: any) {
  console.log(params)
  params.prototype.apiUrl = "http://baidu.com"
}

@logClass //无参数的
class HttpClient {
  constructor() {}
  getData() {}
}

let http: any = new HttpClient()
console.log(http.apiUrl) //  "http://baidu.com"

• 装饰器工厂

function logClass(params: any) {
  console.log(params)   // http://baidu.com
  return function (target: any) {
    target.prototype.apiUrl = params
    console.log(target)  // 此时的target为Function 是类HttpClient
  }
}

@logClass("http://baidu.com")
class HttpClient {
  constructor() {}
  getData() {}
}

let http: any = new HttpClient()
console.log(http.apiUrl) // http://baidu.com

---

类装饰器

下面是一个重载构造函数的例子

类构造器表达式会在运行时当作函数被调用，类的构造器作为其唯一的参数

如果类装饰器返回一个值，它会使用提供的构造函数来替代类的声明

function logClass(target: any) {
  return class extends target {
    apiUrl: any = "修改后的api"
    getData() {
      console.log(this.apiUrl)
    }
  }
}

@logClass
class HttpClient {
  public apiUrl: string | undefined
  constructor() {
    this.apiUrl = "我是构造函数里的api"
  }
  getData() {}
}

let http: any = new HttpClient()
console.log(http.apiUrl) // 修改后的api

属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入两个参数

1. 对静态成员来视类的构造函数，对于实例成员时类的原型对象
2. 成员的名字

// 装饰器
function logClass(params: any) {
  return function (target: any) {
    // console.log(params) // xxx
    // console.log(target) // Function HttpClient
  }
}
// 属性装饰器
function logProperty(params: any) {
  return function (target: any, attr: any) { 
    console.log(target) // HttpClient {getData:Function} //为实例的构造函数
    console.log(attr) // apiUrl
    target[attr] = params 
  }
}

@logClass("xxx")
class HttpClient {
  @logProperty("it")
  public apiUrl: string | undefined
  constructor() {}
  getData() {
    console.log(this.apiUrl)
  }
}

let http: any = new HttpClient()
http.getData()  // it

方法装饰器

它被应用于方法的属性描述符上，可以用来监视，修改或者替换方法定义。方法传入三个参数

1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2. 方法的名字
3. 成员的属性描述符，主要在此做修改 有四个属性:value(函数的内容)，writeable（是否可修改）默认为true，enumerable，configurable

// 方法装饰器
function get(params: any) {
  return function (target: any, methodName: any, des: any) {
    console.log(target)
    console.log(methodName) // getData
    console.log(des)
    target.apiUrl = "1111"
    // 修改装饰器的方法，把装饰器方法里面传入的所有参数改为string类型
    let methodContent = des.value
    methodContent = function (...args: any[]) {
      args = args.map((value) => {
        return String(value)
      })
    }
  }
}

class HttpClient {
  public apiUrl: string | undefined
  constructor() {}
  @get("www.baidu.com")
  getData(...args: any[]) {
    console.log(args)
  }
}

let http: any = new HttpClient()
http.getData(1111, 11111)

做修改有四个属性:value(函数的内容)，writeable（是否可修改）默认为true，enumerable，configurable`

// 方法装饰器
function get(params: any) {
  return function (target: any, methodName: any, des: any) {
    console.log(target)
    console.log(methodName) // getData
    console.log(des)
    target.apiUrl = "1111"
    // 修改装饰器的方法，把装饰器方法里面传入的所有参数改为string类型
    let methodContent = des.value
    methodContent = function (...args: any[]) {
      args = args.map((value) => {
        return String(value)
      })
    }
  }
}

class HttpClient {
  public apiUrl: string | undefined
  constructor() {}
  @get("www.baidu.com")
  getData(...args: any[]) {
    console.log(args)
  }
}

let http: any = new HttpClient()
http.getData(1111, 11111)