Class类
定义类
1
2
3
4
5
6
7
8
9
10
11
12
| class Person {
name: string
age: number
constructor(name: string, age: number = 11) {
this.name=name
this.age=age;
}
run() { }
}
let item=new Person('张三')
|
类的修饰符
访问修饰符总共有三个 public、private、protected
public :公共的,没有访问限制protected : 受保护的,只能自身和子类访问，实例不能访问pravite :私人的，只能自身访问
只读修饰符 readonly
1
2
3
4
5
6
7
8
9
| class F {
readonly a =444;
}
class S extends F {
}
let s = new S;
console.log(s.a);
s.a = 999 ;
|
静态修饰符 static
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| class Person {
name: string
age: number
static sex: string = 'man'
constructor(name: string, age: number = 11) {
this.name = name
this.age = age;
}
static run() {
console.log(this.sex)
}
}
let item = new Person('张三')
Person.run()
Person.sex
|
interface 定义类
和对象一样我们同样可以使用interface 定义类,但是需要使用关键字implements,后面跟interface的名字多个用逗号隔开继承还是用extends
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| interface PersonClass {
get(type: boolean): boolean
}
interface PersonClass2{
set():void,
strName:string
}
class A {
name: string
constructor() {
this.name = "123"
}
}
class Person extends A implements PersonClass,PersonClass2 {
strName: string
constructor() {
super();
this.strName = '123'
}
get(type:boolean) {
return type
}
set () {
}
}
|
抽象类
应用场景如果你写的类实例化之后毫无用处此时我可以把他定义为抽象类
或者你也可以把他作为一个基类-> 通过继承一个派生类去实现基类的一些方法
基类:父类，被继承的类
派生类:子类，继承的类
- 通过
abstract 去定义的类为抽象类,该类无法被实例化
- 通过
abstract 去定义的方法为抽象方法,该类无法被实现
- 通过
abstract 去定义的方法想要实现必须在派生类中去实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| 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());
|
Vue虚拟DMO
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
interface VueOption {
el: string | HTMLElement
}
interface VNode {
tag: string | HTMLElement,
text?: string,
props?: {
readonly id: string | number,
key: number | string | object
},
children?: VNode[]
}
interface VueCls {
option: VueOption,
init: () => void
}
class SetDom {
constructor() { }
protected createElement(el: string | HTMLElement): HTMLElement {
return typeof el === 'string' ? document.createElement(el) : el
}
protected setText(el: HTMLElement, text: string | null) {
el.textContent = text;
}
setProps(el: HTMLElement, props: object | null) {
console.log(props)
if (props) {
Object.entries(props).forEach(item => {
el.setAttribute(item[0], item[1]);
})
console.log(el)
}
}
public render(createElement: VNode): HTMLElement {
const el = this.createElement(createElement.tag)
this.setProps(el, createElement.props ?? null)
this.setText(el, createElement.text ?? null)
if (createElement?.children && Array.isArray(createElement?.children)) {
createElement.children.forEach(item => {
const childNode = this.render(item);
this.setText(childNode, item.text ?? null)
el.appendChild(childNode)
})
}
return el;
}
}
class Vue extends SetDom implements VueCls {
option: VueOption
constructor(option: VueOption) {
super();
this.option = option;
this.init()
}
public init() {
let app = typeof this.option.el == 'string' ? document.querySelector(this.option.el) : this.option.el;
let VData: VNode = {
tag: "div",
props: {
id: 1,
key: 1
},
children: [
{
tag: "div",
text: "子集1",
},
{
tag: "div",
text: "子集2"
}
]
}
app?.appendChild(this.render(VData))
this.mount(app as Element)
}
public mount(app: Element) {
document.body.append(app)
}
static version() {
return '1.0.0'
}
}
const v = new Vue({
el: '#app'
})
console.log(Vue.version())
|
