TypeScript基本知识（6）

混入

import axios from "axios"
import 'reflect-metadata'

interface A {
  age: number
}

interface B {
  name: string
}

let a: A = { age: 18 }
let b: B = { name: 'lily' }

// 1.扩展运算符 浅拷贝 返回新的类型
let c = { ...a, ...b }
console.log(c)

// 2.Object.assign 浅拷贝 返回交叉类型
let c2 = Object.assign({}, a, b)

// 插件类型混入
class Logger {
  log(msg: string) {
    console.log(msg)
  }
}

class Html {
  render() {
    console.log('render')
  }
}

class App {
  run() {
    console.log('run')
  }
}

type Custructor<T> = new (...args: any[]) => T

function pluginMinxins <T extends Custructor<App>>(Base: T) {
  return class extends Base {
    private Logger = new Logger()
    private Html = new Html()

    constructor(...args: any[]) {
      super(...args)
      this.Logger = new Logger()
      this.Html = new Html()
    }

    run() {
      this.Logger.log('run')
    }

    render() {
      this.Logger.log('render')
      this.Html.render()
    }
  }
}

const mixins = pluginMinxins(App)
const app = new mixins()

app.render() // render render

类装饰器

// 类装饰器 ClassDecorator target 构造函数
const Base = (name: string) => {
  const fn: ClassDecorator = (target) => {
    console.log(target)
    target.prototype.name = name
    target.prototype.fn = () => {
      console.log('xxx')
    }
  }
  return fn
}

// 参数装饰器 ParameterDecorator
const Result = () => {
  const fn: ParameterDecorator = (target,key,index) => {
    Reflect.defineMetadata('key','result',target)
    console.log(target,key,index)
  }
  return fn
}

// 方法装饰器 MethodDecorator target 函数名 descriptor 函数描述对象
// PropertyDescriptor 属性描述对象
const Get = (url: string) => {
  const fn: MethodDecorator = (target, _, descriptor: PropertyDescriptor) => {
    const key = Reflect.getMetadata('key',target)
    axios.get(url).then((res)=> {
      descriptor.value(key ? res.data[key] : res.data)
    })
  }

  return fn
}

@Base('lily')
class Http {
  @Get('https://api.apiopen.top/api/getHaoKanVideo?page=0&size=10')
  getList(@Result() data: any) {
    console.log(data)
  }

}
const http = new Http() as any
console.log(http.name) // lily
console.log(http.fn())
http.getList({})