第十八章 TypeScript Mixins混入

鹤鸣的日常

已于 2024-03-21 18:29:25 修改

阅读量107

点赞数 1

文章标签： typescript 前端 javascript

于 2024-03-21 11:51:23 首次发布

本文链接：https://blog.csdn.net/XL984507092/article/details/136904266

版权

本文介绍了JavaScript中的Mixins概念，包括如何通过扩展运算符和Object.assign进行对象浅拷贝，以及structuredClone实现深拷贝。同时展示了类的混入（插件类型）应用，如使用装饰器创建具有Logger和Html功能的App类实例。

摘要由CSDN通过智能技术生成

Mixins混入

// 1. 对象混入 合并 A对象 B对象 合并到一起
// 2. 类的混入 A类 B类 合并到一起

interface A {
	age: number
}

interface B {
	name: string
}

let aa: A = {
	age: 15
}

let bb: B = {
	name: 'John'
}

//1.扩展运算符 浅拷贝 返回一个新的类型
let cc = {...aa, ...bb,}

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

// 3.深拷贝 structuredClone 需要node18版本以上以及谷歌浏览器90多以上
// structuredClone(aa)


// 2.类的混入
// 插件类型混入
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')
			this.Html.render()
		}
	}
}

const mixins = pluginMinxins(App)

const app = new mixins()
app.run()