一篇文章带你掌握TypeScript中的类和对象
前言
TypeScript 由 Microsoft 开发，是一种开源的、面向对象的编程语言。当然，它是 JavaScript 的一个强大的语法超集，并改进了该语言的可选静态类型。其中最重要的一点就是TypeScript 支持面向对象的所有特性。
在JavaSript中，可以说一切皆为对象，当我们用面向对象的思想进行封装代码时，不论是用构造函数，对象，还是ES6新增的class时，其实本质上都是在使用JavaScript的Object对象，这就要求在进行一些比较复杂的对象封装时，需比较熟悉对象的原型链等原理，才能封装出简洁，易读，易扩展的对象。面向对象的三大特征为继承、封装、多态。JavaScript虽然可以模拟实现继承和封装，但无法良好的模拟实现多态。
ES5实现类代码示例：
// 定义一个Person类
function Person(name, age) {
this.name = name; // 公有属性
var privateAge = age; // 私有属性（通过闭包保存）
// 获取年龄的公共方法
this.getAge = function() {
return privateAge;
};
}
// 创建一个新的Person对象
var person1 = new Person("张三", 20);
console.log(person1.name); // 输出 "张三"
console.log(person1.age); // undefined (无法直接访问私有属性)
console.log(person1.getAge()); // 输出 20 (调用公共方法获取私有属性值)ES6实现类代码示例：
class Person {
// 构造函数
constructor(name, age) {
this.name = name
this.age = age
}
// 方法
say(){
console.log('我能说话')
}
}
// 实例化
let zs = new Person('张三', 24)
// 实例化
let ls = new Person('李四', 24)
console.log(zs)
console.log(ls)TS实现类代码示例：
class Person{
public name:string;
private age:number;
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
public setAge(age:number){
this.age = age;
}
public getAge():number{
return this.age;
}
}
let person = new Person("xiaoming",20);
console.log(person.name);
console.log(person.getAge());ES6引入了类的概念，为 JavaScript 增加了面向对象编程的能力。ES6 中的类是一种语法糖，本质上仍然是基于原型的继承。使用类可以定义构造函数、实例方法和静态方法，并且支持继承和类之间的关系。TypeScript新增了类、接口、泛形等等这些特性。相比“灵活自由”的JavaScript式封装，运用这些特性将会使初学者写的代码更加规范，更易于阅读和扩展，降低了一些封装的门槛，同时也方便了一些熟悉面向对象编程的开发者进行开发，TypeScript相比ES6具有更强的类型系统和其他功能 ，并且而对于大型的项目开发，这种面向对象的开发方式能有助于团队合作，提高开发人员的工作效率。
?对于学过Java等面向对象的小伙伴来说，学习TypeScript是非常轻松的，接下来，我就从一下常见属性来讲解TypeScript面向对象特性。
1. TypeScript中的类和类的实例化
定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：?
字段?：?字段是类里面声明的变量。字段表示对象的有关数据。
构造函数?：类实例化时调用，可以为类的对象分配内存。
方法?：?方法为对象要执行的操作。
class {
? ? ? ? [修饰符] 字段名:[字段类型];
? ? ? ? constructor([参数1:类型,....]){
? ? ? ? ? ? ? ? // 执行一些初始化操作
????????},
? ? ? ?[修饰符] 方法名([参数1:类型,....):返回值类型{
? ? ? ? ? ? ? ? // 方法体....
????????}
}
例如：
class Person{
public name:string;
private age:number;
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
public setAge(age:number){
this.age = age;
}
public getAge():number{
return this.age;
}
}
let person = new Person("xiaoming",20);
console.log(person.name);
console.log(person.getAge());2. 类的继承，以及类继承后super的使用
class User{
private name:string;
constructor(name:string){
this.name = name;
}
public setName(name:string):void{
this.name = name;
}
public getName():string{
return this.name;
}
}
class Admin extends User{
private password:string;
constructor(name:string,password:string){
super(name);
this.password = password;
}
public setPassword(password:string){
this.password = password;
}
public getPassword():string{
return this.password;
}
}
let user1 = new User("xujingliang");
console.log(user1.getName());
let admin = new Admin("xujingliang","123456")
console.log(admin.getName());
console.log(admin.getPassword());3. 类继承后的方法重写
类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。
重写是子类继承父类之后，方法名称，参数名称，返回值类型全部相同只能修改方法体中的相关操作。
重写的优点：在拥有父类方法特征的同时，自身也可以有一些特有的特征
class User{
private name:string;
constructor(name:string){
this.name = name;
}
public setName(name:string):void{
this.name = name;
}
public getName():string{
return this.name;
}
public say():string{
return "My name is "+this.name;
}
}
class Admin extends User{
private password:string;
constructor(name:string,password:string){
super(name);
this.password = password;
}
public setPassword(password:string){
this.password = password;
}
public getPassword():string{
return this.password;
}
public say():string{
return "My name is "+super.getName()+" and my password is "+this.password;
}
}
let user = new User("xujingliang");
console.log(user.say());
let admin = new Admin("xujingliang","123456")
console.log(admin.say());上面的代码示例中，我们先定义了一个User用户类，又定义了一个Admin管理员类。Admin类继承User类，并对User类的say()方法进行重写。?
4. static关键字的使用
使用static生命的类字段或者方法不需要实例化对象，可以直接通过类名点字段名称或者类名点方法名称直接调用。
class Person{
public name:string;
private age:number;
static mark:string = "普通用户"
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
public setAge(age:number){
this.age = age;
}
public getAge():number{
return this.age;
}
}
console.log(Person.mark);示例代码中，声明了一个static字段mark，直接使用Person.mark就可以访问。?
5. instanceof 运算符
instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。
class User{
private name:string;
constructor(name:string){
this.name = name;
}
public setName(name:string):void{
this.name = name;
}
public getName():string{
return this.name;
}
}
class Admin extends User{
private password:string;
constructor(name:string,password:string){
super(name);
this.password = password;
}
public setPassword(password:string){
this.password = password;
}
public getPassword():string{
return this.password;
}
}
let user1 = new User("xujingliang");
let admin = new Admin("xujingliang","123456")
console.log(user1 instanceof User);
console.log(user1 instanceof Admin);
console.log(admin instanceof Admin);
console.log(admin instanceof User);注意：示例代码中，Admin类继承User类，因此用Admin示例化的对象既属于User类有属于Admin类
6. 访问控制修饰符
类成员可访问性定义了类的成员允许在何处被访问。和Java一样TypeScript也为类成员提供了三种可访问性修饰符。
1. public：类的公有成员没有访问限制，可以在当前类的内部、外部以及派生类的内部访问。类的公有成员使用public修饰符标识。在默认情况下，类的所有成员都是公有成员。
2. protected：类的受保护成员允许在当前类的内部和派生类的内部访问，但是不允许在当前类的外部访问。类的受保护成员使用protected修饰符标识。
3. private：类的私有成员只允许在当前类的内部被访问，在当前类的外部以及派生类的内部都不允许访问。类的私有成员使用private修饰符标识。
7. 类和接口
类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。
interface Person{
name:string
}
class User implements Person{
name:string;
constructor(name:string){
this.name = name;
}
public setName(name:string):void{
this.name = name;
}
public getName():string{
return this.name;
}
}
class Admin extends User{
private password:string;
constructor(name:string,password:string){
super(name);
this.password = password;
}
public setPassword(password:string){
this.password = password;
}
public getPassword():string{
return this.password;
}
}
let user1 = new User("xujingliang");
let admin = new Admin("xujingliang","123456")本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！