网站快速建设程序,抖音代运营收费详细价格,公众号排名优化软件,wordpress list目录 类的概念类的继承 #xff1a;类的存取器#xff1a;类的静态方法与静态属性#xff1a;类的修饰符#xff1a;参数属性#xff1a;抽象类#xff1a;类的类型: 总结#xff1a; 类的概念 类是用于创建对象的模板。他们用代码封装数据以处理该数据。JavaScript 中的… 目录 类的概念类的继承 类的存取器类的静态方法与静态属性类的修饰符参数属性抽象类类的类型: 总结 类的概念 类是用于创建对象的模板。他们用代码封装数据以处理该数据。JavaScript 中的类建立在原型上但也具有某些语法和语义未与 ES5 类相似语义共享。 TypeScript 除了实现了所有 ES6 中的类的功能以外还添加了一些新的用法。 关于ES6的 Class 类语法概念在本章节不做过多阐述感兴趣的的小伙伴 可以 点击这里了解查看更多 ES6中有关Class的语法概念使用。
本章节还是主要给大家带来在 TypeScript 中如何去定义 Class 【类】以及如何去使用 类身上的 属性及方法。
定义Class 使用 Class 定义类使用 constructor 定义构造函数。
在原生 JavaScript 中
class Rectangle {constructor(height, width) {this.height height;this.width width;}
}
new Rectangle(1, 2) //实例化并传入参数上面的是在JS中Class 类的常用定义方式。
而在TypeScript 中定义 Class 类
class identity {name: string; //TS 中需要对要接受的参数初始化age: number;constructor(name: string, age: number) { //为要传入的参数指定类型。不指定类型默认为Any 类型。this.name name;this.age age;}sayHi() {return 我叫 ${this.name},今年${this.age}岁;}
}
let a new identity(张三, 20);
console.log(a); //Animal {name: 张三, age: 20}console.log(a.sayHi()); //我叫 张三,今年20岁类的继承
使用 extends 关键字实现继承子类中使用 super() 关键字来调用父类的构造函数和方法。
class identity { //父类name: string;age: number;constructor(name: string, age: number) {this.name name;this.age age;}sayHi() {return 我叫 ${this.name},今年${this.age}岁;}
}//子类
class copy extends identity { //由于我继承了 identity 在 identity 身上已经存在了 name 和 age// 所以 在 copy 类里面就不用再定义 name 和 age了,继承后可以直接读取到,所继承类身上的属性方法。constructor(name: string, age: number) {super(name, age) // super 继承}
}
let c new copy(李四, 30) //实例化子类
console.log(c); //copy {name: 李四, age: 30}//可以调用父类身上的方法。
console.log(c.sayHi()); //我叫 李四,今年30岁类的存取器
使用 getter 和 setter 可以改变属性的赋值和读取行为。 存取器的作用可以用来更专注化的控制对对象属性方法的读取和修改。 class identity { //父类name: string;age: number;constructor(name: string, age: number) {this.name name;this.age age;}//设置读取器》用来读取数据get names() {return getter 我叫 ${this.name},今年${this.age}岁;}//设置存储器用来修改数据set names(val: string) {console.log(这是set 传入进来的值, val);}
}let a new identity(张三, 18);
console.log(a.names); //当我们访问读取器的时候会触发get会直接得到返回的值 : getter张三18
a.names 李四 //当我们为存储器赋值的时候会触发 set 并且会把赋值当成参数传递给 set。使用 存储器的好处对属性方法的读取和修改更加的专业化不同的存取器负责不同的逻辑处理这里的存取器也相似于 Vue 中的 computed 计算属性。 以及 Object.defineProperty()的 get 和 set 方法 类似。 类的静态方法与静态属性 有时候我们希望 类中所定义的属性或者方法不想被实例化后的对象读取不需要实例化那么我们就可以通过 static 关键字来把 属性或方法定义为静态成员来实现。 class identity {static username: string asdasd; //将 username 通过 static 设置为静态属性。并为其赋值。name: stringage: number;constructor(name: string, age: number) {this.name name;this.age age;console.log(this.username); //也会报错类的内部也不能拿取 username}//将方法设置为 静态方法static bolkfn() {console.log(静态方法);}
}let a new identity(张三, 18);console.log(identity.username); // 类自身访问静态属性不会报错console.log(a.username); //实例对象访问静态属性会报错 属性“username”在类型“identity”上不存在。console.log(identity.bolkfn()); // 类自身访问静态方法不会报错console.log(a.bolkfn()); //实例对象访问静态方法会报错 属性“bolkfn”在类型“identity”上不存在。扩展知识点 在ES7 中有一些关于类的新特性提案TypeScript 也实现了它们这里做一个简单的介绍。 ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义而在 ES7 提案中可以直接在类里面定义
class Animal {name Jack; //可以直接在类中定义非必须要在 constructor 通过 this.name 来定义。constructor() {// ...}
}let a new Animal();
console.log(a.name); // Jack 可以直接读取到name属性 类的修饰符 TypeScript 可以使用三种访问修饰符Access Modifiers分别是 public、private 和 protected。 public :修饰的属性或方法是公有的可以在任何地方被访问到默认所有的属性和方法都是 public 的private 修饰的属性或方法是私有的不能在声明它的类的外部访问虽然 子类 可以通过 extends 继承它的私有属性但是却无法读取。protected : 修饰的属性或方法是受保护的它和 private 类似区别是它在子类中也是允许被访问的也依然无法在外部访问
例 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); // Tomprivate
class Animal {private name; //设置私有化public constructor(name) {this.name name;}
}let a new Animal(Jack);
console.log(Animal.name); //只能自身读取console.log(a.name); //报错
a.name Tom; //报错即使通过子类继承在子类继承中也不能访问读取
class Animal {private name;public constructor(name) {this.name name;}
}
class Cat extends Animal {constructor(name) {super(name);console.log(this.name); //报错子类继承中也无法访问私有化数据}
}当构造函数修饰为 private 时该类 不 允许被继承或者实例化
class Animal {public name;private constructor(name) { //构造函数 private 私有化this.name name;}}class Cat extends Animal { //报错不能被继承constructor(name) {super(name);}}let a new Animal(Jack); //报错不应该被实例化protected
当使用 protected 修饰则 允许 在子类中访问
class Animal {private name;public constructor(name) {this.name name;}
}
class Cat extends Animal {constructor(name) {super(name);console.log(this.name); //不会报错,子类继承中可以访问}
}当构造函数修饰为 protected 时该类只允许被继承
class Animal {public name;protected constructor(name: string) {this.name name;}
}
class Cat extends Animal {constructor(name: string) {super(name);}
}let a new Animal(Jack); //报错因为 Animal 只允许被继承。参数属性 上面介绍的三种 修饰符其实还有一种简洁的写法被称为 属性参数写法修饰符还可以使用在构造函数参数中等同于类中定义该属性同时给该属性赋值使代码更简洁。 class Animal {// public name; //可以省略此处protected constructor(public name: string) { // private protected 同理// this.name name; //可以省略此处}
}readonly : 只读属性关键字只允许出现在属性声明或索引签名或构造函数中。
class Animal {readonly name;public constructor(name) {this.name name;}
}let a new Animal(Jack);
console.log(a.name); // Jack
a.name Tom; //会报错因为属性为 只读的不能修改。注意; 注意如果 readonly 和其他访问修饰符同时存在的话需要写在其后面。
class Animal {// public readonly name;public constructor(public readonly name) {// this.name name;}
}抽象类 概念抽象类的概念是专注于用来为子类服务的抽象类是不允许被实例化的只能通过被子类继承。 语法abstract 关键字用于定义抽象类和其中的抽象方法 abstract class Animal { // 通过 abstract 定义一个抽象类public name;public constructor(name) {this.name name;}public abstract sayHi(); //并且在抽象类里面还可以定义 抽象方法
}let a new Animal(Jack); //会报错抽象类不能被实例化注意抽象类中的抽象方法或属性必须被子类实现否则在子类继承抽象类后实例化的时候会报错
abstract class Animal { // 通过 abstract 定义一个抽象类public name;public constructor(name) {this.name name;}public abstract sayHi() { }; //并且在抽象类里面还可以定义 抽象方法
}class B extends Animal {public sayHi() { //抽象类中所定义抽象方法必须要在子类中实现。console.log(继承Animal);}
}
let isB new B()类的类型: 给实例化的类定义类型简述而言就是定义的 class 类还可以被用来当做 一种类型赋值给实例化的对象用来校验类的数据完整性。 案例说明:
class Animal {name: string;constructor(name: string) {this.name name;}sayHi(): string {return My name is ${this.name};}
}// 把 Animal 当做一种类型用来校验实例化对象 a 的规范性。
let a: Animal new Animal(Jack);
console.log(a.sayHi()); // My name is Jack总结
本章节主要给大家介绍了在 TypeScript 中如何去声明 class 类以及对 class 类的主要运用解析。欢迎大家交流评论。 ♂️ 博主座右铭向阳而生我还在路上 —————————————————————————————— 博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ♂️ 如果都看到这了博主希望留下你的足迹【收藏点赞✍️评论】 ——————————————————————————————
