typescript2-类的类型

news2024/11/23 12:40:01

输出
吃饭
游泳




[]( )继承与多态

------------------------------------------------------------------------



1.  子类继承父类特征子类 extends 父类

2.  当需要父类参数传递时，用子类也可以，这就是多态

继承：子类继承父类
多态：当需要父类参数时，传入子类的也可以
*/

class Animal{

name: string

constructor(name:string) {

    this.name=name

}

run(distance=0){

    console.log(this.name+"跑了" + distance + "米")

}

}

class Dog extends Animal{

constructor(name:string="dog") {

    super(name);

}

run(distance=5){

    console.log(this.name+"跑了" + distance + "米")

}

}

class Cat extends Animal{

constructor(name:string="cat") {

    super(name);

}

run(distance=10){

    console.log(this.name+"跑了" + distance + "米")

}

}

const animal1=new Animal(“aniaml”)

animal1.run()

const dog1=new Dog()

dog1.run()

const cat1=new Cat()

cat1.run()

const dog2:Animal=new Dog() // 当使用了父元素类型Animal也没报错，这就是因为多态

dog2.run()

输出
aniaml跑了0米
dog跑了5米
cat跑了10米
dog跑了5米




[]( )类的修饰符

------------------------------------------------------------------------



1.  修饰构造函数，属性，方法是否可以被外部访问



| 修饰符 | 作用范围 |

| :-: | :-: |

| public | 公共的，默认属性，都可以访问 |

| protected | 外部无法访问，子类可以访问 |

| private | 内部使用，外部无法访问，子类也无法访问 |

| readonly | 只读属性，添加后外部就不能修改了，只能在构造函数内修改 |

class Person{

readonly name: string

constructor(name: string) {

    this.name=name

}

showName(){

	//在类中的普通方法中也不能对只读属性的name重新赋值

    // this.name="rose"

    console.log(this.name)

}

}

//实例化对象

const p1: Person=new Person(“jack”)

p1.showName()

//输出jack

// p1.name=“rose”

这里应为实在类的外部，name为只读的，所以不能再对name赋值




3.  参数属性



*   构造函数中的参数如果使用readonly修饰后，那么参数就叫参数属性

*   构造函数中的参数如果使用readonly修饰后，那么类中就有了一个参数成员

*   构造函数中的参数如果使用readonly修饰后，外部也是无法访问的

*   构造函数中的参数如果使用其他修饰后，那么类中就有了一个相应作用范围的参数成员

class Person{

//虽然类中并没name属性，但这里使用了readonly属性修饰，在类中隐式添加了一个name属性

constructor(readonly name: string='jack') {

    this.name=name

}

showName(){

    console.log(this.name)

}

}

//实例化对象

const p1: Person=new Person()

p1.showName()




[]( )存取器

----------------------------------------------------------------------



TypeScript 支持通过 getters/setters 来截取对对象成员的访问，它能帮助你有效的控制对对象成员的访问

class Person{

private firstName: string

private lastName: string

constructor(firstName,lastName) {

    this.firstName = firstName

    this.lastName = lastName

}

get fullName(){

    return this.firstName+ "-" + this.lastName

}

set fullName(value){

    let val = value.split("-")

    this.firstName = val[0]

    this.lastName = val[1]

}

}

const p1: Person=new Person(“东方”,“不败”)

console.log(p1.fullName)

p1.fullName = “西门-吹雪”

console.log(p1.fullName)

输出
东方-不败
西门- 吹雪

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-zkYVZ2gN-1720101823341)]