前言:
ts的class类的使用与继承, es6新增的class类。
一、es6新增的 class 类
在ES6中为了更好的把js设计成面向对象的语言的语法特征,提出了class 类,class的本质是函数,类不可重复声明,类定义不会被提升,让js更像面向对象编程的语法。
类名建议大写,在严格要求下必须大写。
声明类:class 类名 {}
匿名类: var fn = class {}
类的实例为对象,对象三大特性:封装、继承与多态。
1、封装
class Animal{
constructor(name){ //接收参数
this.name = name
}
run(){
console.log( this.name+'可以跑起来!')
}
}
console.log(111);
const dog = new Animal('小黑')
dog.run()
2、继承
1、使用extends关键字实现继承
2、子类可以继承父类中所有的方法和属性
3、子类只能继承一个父类(单继承),一个父类可以有多个子类
4、子类的构造方法中必须有super()来指定调用父类的构造方法,并且位于子类构造方法中的第一行
5、子类中如果有与父类相同的方法和属性,将会优先使用子类的(覆盖)
class Dog extends Animal{
bark(){
return `${this.name} 是一只狗`
}
}
console.log(222);
const mazi = new Dog('王麻子')
mazi.run()
console.log(mazi.bark)
3、多态
class JinMao extends Dog{
static categories = ['manmal'] //static-修饰符,静态属性
constructor(name){
super(name) //子类构造函数中必须用super()
consoe.log(this.name)
}
run(){
return 'memow'+super.run() //调用父类的run函数
}
}
console.log(333);
const maomao = new JinMao('maomao')
maomao.run()
//static 定义的变量和方法,可以直接用 方法名+点+变量/方法名() 调用
console.log( JinMao.categories );
打印效果:
二、ts新增的 class的方法
ts中的class又增加了三种修饰符,用来给类中的属性与方法设置权限,更易管理。
- public:修饰的属性与方法是共有的,默认;
- private:修饰的属性和方法是私有的,只能在class里使用,通过该类new出来的实例、继承的子类也不能使用;
- protected:修饰的属性与方法是受保护的,继承的子类可以使用。
1、public
class Animal {
public name;
public constructor(name) {
this.name = name;
}
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom
2、private
class Animal{
private run(){
return `${this.name} is running`
}
}
const snake = new Animal()
console.log(snake.run()) //报错,run已变成私有方法,不能被使用
3、protected 继承的子类可以使用
class Animal {
protected name;
}
class Cat extends Animal {
constructor(name) {
super(name);
console.log(this.name);
}
}
4、readonly 只读属性,
注意如果
readonly
和其他访问修饰符同时存在的话,需要写在其后面。
class Animal {
readonly name;
}
let a = new Animal();
console.log(a.name); // Jack
a.name = 'Tom'; //无法修改
三、ts中的 interface接口
我们使用接口(Interfaces)来定义对象的类型, 接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)
接口声明只存在于编译阶段,在编译后生成的 JS 代码中不包含任何接口代码
普通接口的实现:
interface Person {
name: String //必传
age?: Number // ?:可传可不传
}
//调用1:格式必须和接口的格式一致,多属性,少属性都不行
let tom: Person = {
name: 'Tom'
};
//调用2:
let tom: Person = {
name: 'Tom',
age: 25
};
接口的任意属性:[propName: string]
*一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集
interface Person {
name: string //确定属性,之前就是必传
age?: number //可传属性,之前就是不必传,使用任意属性以后,必传
[propName: string]: string | number //任意属性,加上以后,对象里面可以有任意多对象
//[propName: string]: string 如果这样写会报错,因为 age的值是number
}
//调用1:格式必须和接口的格式一致,多属性,少属性都不行
let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'
}
//调用2
let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male',
aaa: '123'
}
接口的只读属性
注意,只读的约束存在于第一次给对象赋值的时候
interface Person {
readonly id: number
name: string
age?: number
[propName: string]: any
}
let tom: Person = {
id: 89757, // 初始化 对象赋值,是成功的
name: 'Tom',
gender: 'male'
};
tom.id = 9527; // 再次赋值,会报错,因为id是只读属性
四、ts里面的 type 和 interface 的区别
1、区别
相同:
都可以用来定义 对象 或者 函数 的结构,而严谨的来说,type 是引用,而
interface
是定义不同:
1、type (alias)类型别名,可以定义基础类型、联合类型或交叉类型。interface 接口,只能定义对象,
2、接口可以 extends、implements,从而扩展多个接口或类。 type没有扩展功能,只能交叉合并
3、定义两个相同名称的接口会合并声明,定义两个同名的 type 会出现异常。
4、type 在声明类型别名之后实际上是一个赋值操作,它需要将别名与类型关联起来。也就是说类型别名不会创建出一种新的类型,它只是给已有类型命名并直接进行引用。
interface
是定义了一个接口类型
// 1、定义声明不同
type Person = string
type animal = Dog | Cat
//type定义元组
interface Dog {
name: string;
}
interface Cat {
age: number;
}
type animal = [Dog, Cat];
//接口定义对象
interface Person {
name: string
}
// 2、定义两个相同名称的接口会合并声明,定义两个同名的 type 会出现异常
interface Person {
name: string;
}
interface Person {
age: number;
}
// 合并为:interface Person { name: string age: number}
type User = {
name: string;
};
type User = {
age: number;
};
// 声明重复报错:标识符“User”重复。
2、interface 的继承
接口可以 extends、implements ,来实现继承文章来源:https://www.toymoban.com/news/detail-753751.html
文章来源地址https://www.toymoban.com/news/detail-753751.html
//extends 可以实现class继承,也可以实现接口继承
interface Person {
name: string;
}
interface User extends Person {
age: number;
}
interface Animal {
food: string
eat(food: string): void
}
// Cat类实现Animal接口的时候需要能够兼容Animal接口才行,否则会报错。
class Cat implements Animal {
food: string = 'fish';
eat(food: string): void {}
}
3、type 使用交叉类型&来合并不同成员的类型,实现一个类似继承的效果
type Person = { name: string }; //1、type定义对象
type User = Person & { age: number }; //2、type合并两个对象
interface Person {
name: string;
}
type User = { age: number } & Person; //3、type合并对象和接口
到了这里,关于ts的class类的使用与继承, es6新增的class类的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!