一、前言
TypeScript是面向对象的语言和JavaScript稍微有一些区别, 更加的符合我们的编码规范，本文主要讲解类，构造函数，this，继承，super，抽象类，接口，属性的封装
如果你会Java或者别的面向对象语言的话，这篇文章对你来说快速过一下就好，基本都是差不多的
本文采用所有示例的tsconfig.json都如下所示
{ "compilerOptions": { "module": "ES2015", "target": "ES6", "strict": true, "outDir": "./dist" }, "include": [ "./src/**/*" ] } 复制代码
二、类（Class）
通常来讲类是由属性和组成，属性分为两种， 分别是实例属性和静态属性（static），示例属性需要创建对象后去访问，静态属性直接通过 类名.属性 就可以访问到， 方法同理， 也分为实例方法和静态方法
// 新建动物类 /* 对象中主要包含两个部分： 1.属性 2.方法 */ class Animal{ // 定义实例属性 // 实例属性需要创建对象访问 name: string = "动物名字"; // 定义静态属性, 在属性名称前添加 static关键字 // 静态属性要通过 类名.属性的方式去访问 static age: number = 0; // 定义方法 run(){ console.log("动物会跑") } static call(){ console.log("动物在叫") } } // new 一个对象 const animal = new Animal() // 实例属性 console.log(animal.name) // 静态属性 console.log(Animal.age) // 实例方法 console.log(animal.run) // 静态方法 console.log(Animal.call) 复制代码
三、构造函数和this
创建类的时候，我们是使用的固定属性，也就是说，这个属性他的值是不会变的，但是在实际的使用过程中，我们是需要自定义这个类的属性的，这个时候我们就可以通过创建这个类的构造函数的方式来对属性进行赋值
但是在TypeScript中，类的构造函数和Java有些区别，TypeScript的构造函数是通过一个固定的关键字（constructor）来确认的
关于this：
- 在实例方法中 this就表示当前的这个实例
- 在构造方法中 this就是当前新建的那个对象
- 在构造方法中，可以通过this向新建的对象中添加属性
class Animal{ name: string; age: number; // 构造函数 constructor(name: string, age: number){ // 使用this更改对象的属性 this.name = name; this.age = age; } run(){ console.log("动物会跑") } static call(){ console.log("动物在叫") } getName(){ console.log(this.name) } } // new 一个对象 猫 const cat = new Animal("猫", 12) // new 一个对象 狗 const dog = new Animal("狗", 4) console.log(cat.name) // 猫 console.log(cat.age) // 12 console.log(dog.name) // 狗 console.log(dog.age) // 4 cat.getName() // 猫 dog.getName() // 狗 复制代码
四、继承
用继承后, 子类会拥有父类所有的属性和方法, 且可以在子类中新增父类中没有的方法和属性
继承的作用: 我们可以将多个类公共的部分写到一个父类中, 这样只需写一次, 所有子类就都拥有父类的属性和方法
方法重写: 若子类中添加了父类中存在的方法, 则会覆盖父类中的方法
class Animal{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } run(){ console.log("动物会跑") } } // 使 Dog类继承 Animal类 // 此时 Dog 被称为子类, Animal被称为父类 class Dog extends Animal{ // 创建新的方法 call(){ console.log("汪汪汪!!!") } // 方法重写: 修改父类的方法 run(){ console.log("狗会跑") } } const dog = new Dog("狗", 12); console.log(dog.age) // 12 console.log(dog.name) // 狗 dog.call() // 汪汪汪!!! dog.run() // 狗会跑 复制代码
五、super关键字
父类还有一个名字叫做超类
在类的方法中, super就表示当前类的父类
同时, 如果子类中存在父类中不存在的元素, 那么创建子类的构造函数的时候, 还要调用一下父类的构造函数
class Animal{ name: string; constructor(name: string){ this.name = name; } run(){ console.log("动物会跑") } } class Dog extends Animal{ // 创建父类中不存在的属性 age: number; constructor(name:string, age:number){ // 需要先调用父类的构造函数, 并传入相应的参数 super(name); // 调用安super()之后才能为当前类的属性进行赋值 this.age = age; } call(){ console.log("汪汪汪!!!") } run(){ // 在类的方法中, super就表示当前类的父类 super.run(); } } const dog = new Dog("狗", 12); dog.run() // 动物会跑 复制代码
六、抽象类
抽象类是以 abstract开头的, 抽象类和class类的区别不大, 但是声明为抽象类之后, 这个类就不能创建对象了
抽象类还可以创建抽象方法, 抽象方法以abstract开头, 没有方法体, 且只能定义在抽象类中, 子类必须对其进行实现, 如下所示
abstract class Animal{ name: string; constructor(name: string){ this.name = name; } abstract run(): void; } class Dog extends Animal{ // 创建父类中不存在的属性 age: number; constructor(name:string, age:number){ super(name); this.age = age; } run(){ console.log("111") } } const animal = new Animal("动物"); // 报错 复制代码
七、接口
接口用来定义一个类中应该包含哪些属性和方法, 接口就是定义了一个规范, 对类的一个限制
接口的相关概念:
- 同时接口也可以当做类型声明去使用
- 一个类可以实现多个接口
- 接口中所有的属性都不能有实际的值
- 接口中所有的方法都不能有实际的实现
- 实现接口使用 implements
- 实现类必须继承接口的所有属性且重写所有方法
interface Animal{ name: string; run(): void; } class Dog implements Animal{ age: number; // 继承接口的属性 name: string; constructor(name:string, age:number){ this.age = age; this.name = name; } // 继承接口的值 run(){ console.log("111") } } 复制代码
八、属性的封装
在上面的代码中, 类的属性是可以被随意更改的, 在实际开发中, 属性可以被随意更改的话, 将会导致对象中的数据变得非常不安全
| 属性名称 | 属性含义 |
| public | 公共的 |
| private | 私有的: 只能在类内部修改 |
| protected | 受保护的: 只能在当前类和子类中访问和修改 |
当我们为类的属性设置为私有的(private)后, 创建对象后不能直接进行修改
这个时候我们可以创建两个方法(getter 和 setter)去进行访问和修改, 且可以在方法中对属性进行个性化定制操作, 例如: age属性不可小于0, name属性长度必须大于4等
class Animal{ // TypeScript可以在属性前添加属性的修饰符 private _name: string; constructor(name:string){ this._name = name } run(): void{ console.log("动物会跑") }; get name(){ return this._name; } set name(name:string){ if(name.length > 4){ this._name = name; } } } const animal = new Animal("动物") animal._name = "123" // 报错, 因为 _name 是私有属性 console.log(animal.name); // 动物 animal.name = "123"; console.log(animal.name); // 123 复制代码
十、总结
到这里关于TypeScript 类的所有内容就都结束了，和JavaScript, java等都差不多, 只有一些细微的区别
我也是个刚刚在技术之路上起步的小白, 有任何问题欢迎在评论区指正
