面试官：说说你对TypeScript中类的理解？应用场景？

本文转载自微信公众号「JS每日一题」，作者灰灰。转载本文请联系JS每日一题公众号。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、网站空间、营销软件、网站建设、安乡网站维护、网站推广。

一、是什么

类(Class)是面向对象程序设计(OOP，Object-Oriented Programming)实现信息封装的基础

类是一种用户定义的引用数据类型，也称类类型

传统的面向对象语言基本都是基于类的，JavaScript 基于原型的方式让开发者多了很多理解成本

在 ES6 之后，JavaScript 拥有了 class 关键字，虽然本质依然是构造函数，但是使用起来已经方便了许多

但是JavaScript 的class依然有一些特性还没有加入，比如修饰符和抽象类

TypeScript 的 class 支持面向对象的所有特性，比如 类、接口等

二、使用方式

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块(类的数据成员)：

  • 「字段」 ：字段是类里面声明的变量。字段表示对象的有关数据。
  • 「构造函数」：类实例化时调用，可以为类的对象分配内存。
  • 「方法」：方法为对象要执行的操作

如下例子：

 
 
 
 
    
  
  
  
  
  1. class Car { 
    2. 
  
  
  
  
  2.     // 字段 
    3. 
  
  
  
  
  3.     engine:string; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.     // 构造函数 
    6. 
  
  
  
  
  6.     constructor(engine:string) { 
    7. 
  
  
  
  
  7.         this.engine = engine 
    8. 
  
  
  
  
  8.     }  
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.     // 方法 
    11. 
  
  
  
  
  11.     disp():void { 
    12. 
  
  
  
  
  12.         console.log("发动机为 :   "+this.engine) 
    13. 
  
  
  
  
  13.     } 
    14. 
  
  
  
  
  14. }
    15.

继承

类的继承使用过extends的关键字

 
 
 
 
    
  
  
  
  
  1. class Animal {
    2. 
  
  
  
  
  2.     move(distanceInMeters: number = 0) {
    3. 
  
  
  
  
  3.         console.log(`Animal moved ${distanceInMeters}m.`);
    4. 
  
  
  
  
  4.     }
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. class Dog extends Animal {
    8. 
  
  
  
  
  8.     bark() {
    9. 
  
  
  
  
  9.         console.log('Woof! Woof!');
    10. 
  
  
  
  
  10.     }
    11. 
  
  
  
  
  11. }
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. const dog = new Dog();
    14. 
  
  
  
  
  14. dog.bark();
    15. 
  
  
  
  
  15. dog.move(10);
    16. 
  
  
  
  
  16. dog.bark();
    17.

Dog是一个 派生类，它派生自 Animal 基类，派生类通常被称作子类，基类通常被称作 超类

Dog类继承了Animal类，因此实例dog也能够使用Animal类move方法

同样，类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写，通过super关键字是对父类的直接引用，该关键字可以引用父类的属性和方法，如下：

 
 
 
 
    
  
  
  
  
  1. class PrinterClass { 
    2. 
  
  
  
  
  2.    doPrint():void {
    3. 
  
  
  
  
  3.       console.log("父类的 doPrint() 方法。") 
    4. 
  
  
  
  
  4.    } 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. class StringPrinter extends PrinterClass { 
    8. 
  
  
  
  
  8.    doPrint():void { 
    9. 
  
  
  
  
  9.       super.doPrint() // 调用父类的函数
    10. 
  
  
  
  
  10.       console.log("子类的 doPrint()方法。")
    11. 
  
  
  
  
  11.    } 
    12. 
  
  
  
  
  12. }
    13.

修饰符

可以看到，上述的形式跟ES6十分的相似，typescript在此基础上添加了三种修饰符：

  • 公共 public：可以自由的访问类程序里定义的成员
  • 私有 private：只能够在该类的内部进行访问
  • 受保护 protect：除了在该类的内部可以访问，还可以在子类中仍然可以访问

私有修饰符

只能够在该类的内部进行访问，实例对象并不能够访问

并且继承该类的子类并不能访问，如下图所示：

受保护修饰符

跟私有修饰符很相似，实例对象同样不能访问受保护的属性，如下：

有一点不同的是 protected 成员在子类中仍然可以访问

除了上述修饰符之外，还有只读「修饰符」

只读修饰符

通过readonly关键字进行声明，只读属性必须在声明时或构造函数里被初始化，如下：

除了实例属性之外，同样存在静态属性

静态属性

这些属性存在于类本身上面而不是类的实例上，通过static进行定义，访问这些属性需要通过 类型.静态属性 的这种形式访问，如下所示：

 
 
 
 
    
  
  
  
  
  1. class Square {
    2. 
  
  
  
  
  2.     static width = '100px'
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. console.log(Square.width) // 100px
    6.

上述的类都能发现一个特点就是，都能够被实例化，在 typescript中，还存在一种抽象类

抽象类

抽象类做为其它派生类的基类使用，它们一般不会直接被实例化，不同于接口，抽象类可以包含成员的实现细节

abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法，如下所示：

 
 
 
 
    
  
  
  
  
  1. abstract class Animal {
    2. 
  
  
  
  
  2.     abstract makeSound(): void;
    3. 
  
  
  
  
  3.     move(): void {
    4. 
  
  
  
  
  4.         console.log('roaming the earch...');
    5. 
  
  
  
  
  5.     }
    6. 
  
  
  
  
  6. }
    7.

这种类并不能被实例化，通常需要我们创建子类去继承，如下：

 
 
 
 
    
  
  
  
  
  1. class Cat extends Animal {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     makeSound() {
    4. 
  
  
  
  
  4.         console.log('miao miao')
    5. 
  
  
  
  
  5.     }
    6. 
  
  
  
  
  6. }
    7. 
  
  
  
  
  7. 
  
  
  
  
  8. const cat = new Cat()
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. cat.makeSound() // miao miao
    11. 
  
  
  
  
  11. cat.move() // roaming the earch...
    12.

三、应用场景

除了日常借助类的特性完成日常业务代码，还可以将类(class)也可以作为接口，尤其在 React 工程中是很常用的，如下：

export default class Carousel extends React.Component

由于组件需要传入 props 的类型 Props ，同时有需要设置默认 props 即 defaultProps，这时候更加适合使用class作为接口

先声明一个类，这个类包含组件 props 所需的类型和初始值：

 
 
 
 
    
  
  
  
  
  1. // props的类型
    2. 
  
  
  
  
  2. export default class Props {
    3. 
  
  
  
  
  3.   public children: Array> | React.ReactElement | never[] = []
    4. 
  
  
  
  
  4.   public speed: number = 500
    5. 
  
  
  
  
  5.   public height: number = 160
    6. 
  
  
  
  
  6.   public animation: string = 'easeInOutQuad'
    7. 
  
  
  
  
  7.   public isAuto: boolean = true
    8. 
  
  
  
  
  8.   public autoPlayInterval: number = 4500
    9. 
  
  
  
  
  9.   public afterChange: () => {}
    10. 
  
  
  
  
  10.   public beforeChange: () => {}
    11. 
  
  
  
  
  11.   public selesctedColor: string
    12. 
  
  
  
  
  12.   public showDots: boolean = true
    13. 
  
  
  
  
  13. }
    14.

当我们需要传入 props 类型的时候直接将 Props 作为接口传入，此时 Props 的作用就是接口，而当需要我们设置defaultProps初始值的时候，我们只需要:

 
 
 
 
    
  
  
  
  
  1. public static defaultProps = new Props()
    2.

Props 的实例就是 defaultProps 的初始值，这就是 class作为接口的实际应用，我们用一个 class 起到了接口和设置初始值两个作用，方便统一管理，减少了代码量

参考文献

https://www.tslang.cn/docs/handbook/classes.html

https://www.runoob.com/typescript/ts-class.html

网站栏目：面试官：说说你对TypeScript中类的理解？应用场景？
当前路径：http://www.shufengxianlan.com/qtweb/news16/64316.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

关键词优化知识

分类信息网

成都网站推广营销　　 　绵阳网站制作公司　　 　成都租用服务器　　 　微信公众号开发　　 　成都门户网站建设设计方案　　 　成都网站设计公司　　 　卡多尼人工智　　 　西云机房　　 　成都枢纽中心　　 　企业营销型网站　　 　成都APP定制开发　　 　眉山网站建设　　 　注册域名　　 　高端网站设计　　 　成都微信二次开发　　 　西信服务器托管　　 　成都网站排名　　 　简阳做网站　　 　南充电信机房托管　　 　成都微信开发