typescript中的class和interface

 typescript这个东西说实在的，真的是容易忘记，一段时间不用就感觉特别陌生，但是回过头来看看，又有一种熟悉的感觉,有句话这么说的ts越用越香,它确实能够规范我们的书写的格式，语法校验和类型校验等。之前写过react+ts的一个demo，但是时间久了就忘记了，现在也是趁着热度再回顾一下ts的内容，以及一些高阶语法，现在我们回顾一下ts中常见的类和接口，如果喜欢的可以点赞,评论,关注公众号让更多的人看到。如果有问题也可以评论留言，我们一起相互学习，一起进步。

泊头网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作，到程序开发，运营维护。成都创新互联公司公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。

class
首页我们要清楚的一点是typescript中类和javascript中ES6语法类的区别,千万不要混淆。ts中相比于js添加了声明属性的类型和参数的类型以及返回结果类型。这个地方一看就会一写就不对，如果不声明ts会报错。

 
 
 
 
    
  
  
  
  
  1. class Person{ 
    2. 
  
  
  
  
  2.     name:string; 
    3. 
  
  
  
  
  3.     constructor(name:string){ 
    4. 
  
  
  
  
  4.         this.name = name; 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.     getName():void{ 
    7. 
  
  
  
  
  7.         console.log(this.name); 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9. } 
    10. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  1. class Person{ 
    2. 
  
  
  
  
  2.     constructor(name){ 
    3. 
  
  
  
  
  3.         this.name = name; 
    4. 
  
  
  
  
  4.     } 
    5. 
  
  
  
  
  5.     getName(){ 
    6. 
  
  
  
  
  6.         console.log(this.name); 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8. } 
    9.

ES5编辑后的结果

 
 
 
 
    
  
  
  
  
  1. var Person = /** @class */ (function () { 
    2. 
  
  
  
  
  2.     function Person(name) { 
    3. 
  
  
  
  
  3.         this.name = name; 
    4. 
  
  
  
  
  4.     } 
    5. 
  
  
  
  
  5.     Person.prototype.getName = function () { 
    6. 
  
  
  
  
  6.         console.log(this.name); 
    7. 
  
  
  
  
  7.     }; 
    8. 
  
  
  
  
  8.     return Person; 
    9. 
  
  
  
  
  9. }()); 
    10.

类的get和set
ts在编译get和set的时候默认是es3编译，vscode编辑器会报错error TS1056: Accessors are only available when targeting ECMAScript 5 and higher需要编译到版本ES5或以上,解决办法:$ tsc xxx.ts -t es5。

 
 
 
 
    
  
  
  
  
  1. class User{ 
    2. 
  
  
  
  
  2.     myname:string; 
    3. 
  
  
  
  
  3.     constructor(myname:string){ 
    4. 
  
  
  
  
  4.         this.myname = myname 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.     get name(){ 
    7. 
  
  
  
  
  7.         return this.myname 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9.     set name(newName:string){ 
    10. 
  
  
  
  
  10.         this.myname = newName 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12. } 
    13.

ES5编译后的结果

 
 
 
 
    
  
  
  
  
  1. var User = /** @class */ (function () { 
    2. 
  
  
  
  
  2.     function User(myname) { 
    3. 
  
  
  
  
  3.         this.myname = myname; 
    4. 
  
  
  
  
  4.     } 
    5. 
  
  
  
  
  5.     Object.defineProperty(User.prototype, "name", { 
    6. 
  
  
  
  
  6.         get: function () { 
    7. 
  
  
  
  
  7.             return this.myname; 
    8. 
  
  
  
  
  8.         }, 
    9. 
  
  
  
  
  9.         set: function (newName) { 
    10. 
  
  
  
  
  10.             this.myname = newName; 
    11. 
  
  
  
  
  11.         }, 
    12. 
  
  
  
  
  12.         enumerable: false, 
    13. 
  
  
  
  
  13.         configurable: true 
    14. 
  
  
  
  
  14.     }); 
    15. 
  
  
  
  
  15.     return User; 
    16. 
  
  
  
  
  16. }()); 
    17.

这里有几个思考问题,答案见文末:

 
 
 
 
    
  
  
  
  
  1. var u = new User("a"); 
    2. 
  
  
  
  
  2. console.log(u); 
    3. 
  
  
  
  
  3. console.log(u.myname); 
    4. 
  
  
  
  
  4. u.myname = 'b'; 
    5. 
  
  
  
  
  5. console.log(u.myname); 
    6. 
  
  
  
  
  6. console.log(u.hasOwnProperty("name")); 
    7. 
  
  
  
  
  7. console.log(Object.getPrototypeOf(u)); 
    8. 
  
  
  
  
  8. console.log(Object.getPrototypeOf(u).hasOwnProperty("name")); 
    9.

抽象类
abstract关键字表示抽象类，抽象类是不能被实例化即new,只能被继承,抽象类一般是用来封装一些公共的，提供给子类使用的方法和属性的

 
 
 
 
    
  
  
  
  
  1. abstract class Animal{ 
    2. 
  
  
  
  
  2.     public readonly name:string; 
    3. 
  
  
  
  
  3.     protected age:number = 38; 
    4. 
  
  
  
  
  4.     private money:number = 10; 
    5. 
  
  
  
  
  5.     constructor(name:string){ 
    6. 
  
  
  
  
  6.         this.name = name 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9. class Dog extends Animal{ 
    10. 
  
  
  
  
  10.     static className = 'Dog' 
    11. 
  
  
  
  
  11.     static getClassName(){ 
    12. 
  
  
  
  
  12.         console.log(this.className) 
    13. 
  
  
  
  
  13.     } 
    14. 
  
  
  
  
  14.     getName(){ 
    15. 
  
  
  
  
  15.         console.log(this.name) 
    16. 
  
  
  
  
  16.     } 
    17. 
  
  
  
  
  17.     getAge(){ 
    18. 
  
  
  
  
  18.         console.log(this.age) 
    19. 
  
  
  
  
  19.     } 
    20. 
  
  
  
  
  20. } 
    21. 
  
  
  
  
  21. let a = new Animal("ss"); 
    22.

这里打印看一下继承的结果:

 
 
 
 
    
  
  
  
  
  1. console.log(a); //Dog { age: 38, money: 10, name: 'ss' } 
    2.

这里顺便说一下访问修饰符 public protected private

public 里里外外都能访问,包括自己、自己的子类、其他类都能
protected 自己和子类能访问但是其他地方不能访问
private 私有的(只有自己能访问,子类的其他都不能访问）

接口表示对象的属性

 
 
 
 
    
  
  
  
  
  1. interface Rectangle { 
    2. 
  
  
  
  
  2.     width: number; 
    3. 
  
  
  
  
  3.     height: number 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. let r: Rectangle = { 
    7. 
  
  
  
  
  7.     width: 100, height: 10 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. interface Speakable { 
    11. 
  
  
  
  
  11.     speak(): void; 
    12. 
  
  
  
  
  12.     name?: string 
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. let speaker: Speakable = { 
    16. 
  
  
  
  
  16.     //name:"bdt", 
    17. 
  
  
  
  
  17.     speak() { } 
    18. 
  
  
  
  
  18. } 
    19.

接口用来描述抽象的行为

 
 
 
 
    
  
  
  
  
  1. interface AnimalLink { 
    2. 
  
  
  
  
  2.     eat(): void; 
    3. 
  
  
  
  
  3.     move(): void 
    4. 
  
  
  
  
  4. } 
    5.

接口可以实现继承

 
 
 
 
    
  
  
  
  
  1. interface PersonLike extends AnimalLink { 
    2. 
  
  
  
  
  2.     speak(): void 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. class Person2 implements PersonLike { 
    5. 
  
  
  
  
  5.     speak() { }; 
    6. 
  
  
  
  
  6.     eat() { }; 
    7. 
  
  
  
  
  7.     move() { } 
    8. 
  
  
  
  
  8. } 
    9.

通过接口约束变量类型

 
 
 
 
    
  
  
  
  
  1. interface Person3 { 
    2. 
  
  
  
  
  2.     readonly id: number; 
    3. 
  
  
  
  
  3.     name: string; 
    4. 
  
  
  
  
  4.     [PropName: string]: any 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. let p1: Person3 = { 
    7. 
  
  
  
  
  7.     id: 1, 
    8. 
  
  
  
  
  8.     name: "sss" 
    9. 
  
  
  
  
  9. } 
    10.

通过接口约束(规范)函数

 
 
 
 
    
  
  
  
  
  1. interface DiscountInterface{ 
    2. 
  
  
  
  
  2.     (price:number):number 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. let discount:DiscountInterface = function (price: number): number { 
    5. 
  
  
  
  
  5.     return price * .8 
    6. 
  
  
  
  
  6. } 
    7.

通过索引约束数组和对象

 
 
 
 
    
  
  
  
  
  1. interface UserInterface{ 
    2. 
  
  
  
  
  2.     [index:number]:string 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. let arr:UserInterface = ['aa','bb'] 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. interface UserInterface2{ 
    8. 
  
  
  
  
  8.     [index:string]:string 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10. let obj:UserInterface2  = {name:"sss"} 
    11.

通过接口约束构造函数

 
 
 
 
    
  
  
  
  
  1. class Animal3{ 
    2. 
  
  
  
  
  2.     constructor(public name:string){} 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. interface WithClassName{ 
    5. 
  
  
  
  
  5.     new (name:string):Animal3 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. function createClass(clazz:WithClassName,name:string){ 
    8. 
  
  
  
  
  8.     return new clazz(name) 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10. let a3 = createClass(Animal3,"别抖腿"); 
    11. 
  
  
  
  
  11. console.log(a3) 
    12.

class和interface的区别
class 类声明并实现方法
interface 接口声明，但是不能实现方法

 
 
 
 
    
  
  
  
  
  1. abstract class Animal{ 
    2. 
  
  
  
  
  2.     name:string="111"; 
    3. 
  
  
  
  
  3.     abstract speak():void;  //抽象类和方法不包含具体实现  必须在子类中实现 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. //接口里的方法都是抽象的 
    6. 
  
  
  
  
  6. interface Flying{ 
    7. 
  
  
  
  
  7.     fly():void 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9. interface Eating{ 
    10. 
  
  
  
  
  10.     eat():void 
    11. 
  
  
  
  
  11. } 
    12. 
  
  
  
  
  12. class Dog extends Animal{ 
    13. 
  
  
  
  
  13.     speak(){ 
    14. 
  
  
  
  
  14.         console.log("汪汪汪")   //重写:子类重写继承自父类中的方法 
    15. 
  
  
  
  
  15.     } 
    16. 
  
  
  
  
  16. } 
    17. 
  
  
  
  
  17. class Cat extends Animal implements Flying,Eating{ 
    18. 
  
  
  
  
  18.     speak(){   //继承抽象类的方法必须实现 
    19. 
  
  
  
  
  19.         console.log("喵喵喵") 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21.     fly(){ 
    22. 
  
  
  
  
  22.         console.log("我是一只飞货") 
    23. 
  
  
  
  
  23.     } 
    24. 
  
  
  
  
  24.     eat(){ 
    25. 
  
  
  
  
  25.         console.log("我是一只吃货") 
    26. 
  
  
  
  
  26.     } 
    27. 
  
  
  
  
  27. } 
    28.

写在最后
文中答案

 
 
 
 
    
  
  
  
  
  1. User { myname: 'a' } 
    2. 
  
  
  
  
  2. a 
    3. 
  
  
  
  
  3. b 
    4. 
  
  
  
  
  4. false 
    5. 
  
  
  
  
  5. User { name: [Getter/Setter] } 
    6. 
  
  
  
  
  6. true 
    7.

网页题目：typescript中的class和interface
转载注明：http://www.shufengxianlan.com/qtweb/news46/221696.html

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

广告

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

猜你还喜欢下面的内容

网站设计公司知识

行业网站建设

网站SEO优化排名　　 　云服务器香港　　 　宜宾网站建设　　 　app软件开发公司　　 　广汉锦华　　 　合江网站建设　　 　成都免费自助建站　　 　资阳网站建设　　 　广西弘博建站　　 　网站营销推广　　 　成都酒店服定制　　 　SSL认证　　 　做网站价格　　 　成都网站推广　　 　成都小程序开发　　 　雪茄烟　　 　德阳定制网站建设　　 　消防维保　　 　成都电信服务器托管　　 　汕尾凯敏网站