ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写，就是下面这样。
//定义类 class Person { constructor () { } run () { } }
1.ok！那我们在TS 是如何定义类的如下图
在TypeScript是不允许直接在constructor 定义变量的 需要在constructor上面先声明
这样引发了第二个问题你如果了定义了变量不用 也会报错 通常是给个默认值 或者 进行赋值
恭喜你已经学会了在class中 如何定义变量
2.类的修饰符
总共有三个 public private protected
使用public 修饰符 可以让你定义的变量 内部访问 也可以外部访问 如果不写默认就是public
使用 private 修饰符 代表定义的变量私有的只能在内部访问 不能在外部访问
使用 protected 修饰符 代表定义的变量私有的只能在内部和继承的子类中访问 不能在外部访问
TIPS:代码
class Person { public name:string private age:number protected some:any constructor (name:string,ages:number,some:any) { this.name = name this.age = ages this.some = some } run () { } } class Man extends Person{ constructor () { super("张三",18,1) console.log(this.some) } create () { console.log(this.some) } } let xiaoman = new Person('小满',18,1) let man = new Man() man.some
3. static 静态属性 和 静态方法
我们用static 定义的属性 不可以通过this 去访问 只能通过类名去调用
static 静态函数 同样也是不能通过this 去调用 也是通过类名去调用
需注意： 如果两个函数都是static 静态的是可以通过this互相调用
4.interface 定义 类
ts interface 定义类 使用关键字 implements 后面跟interface的名字多个用逗号隔开 继承还是用extends
interface PersonClass { get(type: boolean): boolean } interface PersonClass2{ set():void, asd:string } class A { name: string constructor() { this.name = "123" } } class Person extends A implements PersonClass,PersonClass2 { asd: string constructor() { super() this.asd = '123' } get(type:boolean) { return type } set () { } }
5.抽象类
应用场景如果你写的类实例化之后毫无用处此时我可以把他定义为抽象类
或者你也可以把他作为一个基类-> 通过继承一个派生类去实现基类的一些方法
我们看例子
下面这段代码会报错抽象类无法被实例化
abstract class A { public name:string } new A()
例子2
我们在A类定义了 getName 抽象方法但为实现
我们B类实现了A定义的抽象方法 如不实现就不报错 我们定义的抽象方法必须在派生类实现
abstract class A { name: string constructor(name: string) { this.name = name; } print(): string { return this.name } abstract getName(): string } class B extends A { constructor() { super('小满') } getName(): string { return this.name } } let b = new B(); console.log(b.getName());
视频案例
//1. class 的基本用法 继承 和 类型约束 //2. class 的修饰符 readonly private protected public //3. super 原理 //4. 静态方法 //5. get set interface Options { el: string | HTMLElement } interface VueCls { init(): void options: Options } interface Vnode { tag: string text?: string props?: { id?: number | string key?: number | string | object } children?: Vnode[] } class Dom { constructor() { } private createElement(el: string): HTMLElement { return document.createElement(el) } protected setText(el: Element, text: string | null) { el.textContent = text; } protected render(createElement: Vnode): HTMLElement { const el = this.createElement(createElement.tag) if (createElement.children && Array.isArray(createElement.children)) { createElement.children.forEach(item => { const child = this.render(item) this.setText(child, item.text ?? null) el.appendChild(child) }) } else { this.setText(el, createElement.text ?? null) } return el; } } class Vue extends Dom implements VueCls { options: Options constructor(options: Options) { super() this.options = options; this.init() } static version () { return '1.0.0' } public init() { let app = typeof this.options.el == 'string' ? document.querySelector(this.options.el) : this.options.el; let data: Vnode = { tag: "div", props: { id: 1, key: 1 }, children: [ { tag: "div", text: "子集1", }, { tag: "div", text: "子集2" } ] } app?.appendChild(this.render(data)) console.log(app); this.mount(app as Element) } public mount(app: Element) { document.body.append(app) } } const v = new Vue({ el: "#app" })
