• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript学习笔记(三):类

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在TypeScript中,类似于C#的结构,即一个文件中可以存在多个类,且文件名可以任意取,我们先看一个简单的类的示例。

 1 class Person {
 2     private name: string;
 3     private age: number;
 4 
 5     public constructor(name:string, age:number) {
 6         this.name = name;
 7         this.age = age;
 8     }
 9 
10     public talk() {
11         alert("Hi, my name is " + this.name + ", i am " + this.age.toString() + "!");
12     }
13 }
14 
15 function run() {
16     var p: Person = new Person("Li Lei", 18);
17     p.talk();
18 }
19 
20 run();

TypeScript中的类需要注意下面几个点:

  • class前不用加访问控制符,所有类都是全局公开可访问的;
  • 如果类的属性和方法不加访问控制符则默认为public;
  • 1.3开始支持protected访问权限,1.3之前仅支持public及private;
  • 构造函数不是类名而是constructor;
  • 访问类的成员变量及函数都需要加this关键字;

类的继承

在TypeScript中,如何实现类的继承呢,请看如下示例:

 1 class Person
 2 {
 3     private name: string;
 4     private age: number;
 5 
 6     constructor(name: string, age: number)
 7     {
 8         this.name = name;
 9         this.age = age;
10     }
11 
12     talk()
13     {
14         alert("Hi, my name is " + this.name + ", i am " + this.age.toString() + "!");
15     }
16 }
17 
18 class Student extends Person
19 {
20     private school: string;
21 
22     constructor(name: string, age: number, school: string)
23     {
24         super(name, age);
25         this.school = school;
26     }
27 
28     talk()
29     {
30         super.talk();
31         alert("And I`m in " + this.school + "!");
32     }
33 }
34 
35 function run()
36 {
37     var p: Person = new Student("Li Lei", 18, "English School");
38     p.talk();
39 }
40 
41 run();

类的继承需要注意以下几点:

  • 继承使用extends关键字;
  • 调用父级使用super关键字;
  • 重写父级方法不需要加override关键字,直接定义一样的方法即可;
  • 父级变量可以调用到子级的方法,符合多态的概念;

getter/setter封装

在TypeScript中我们可以对一个成员变量进行getter和setter的封装,如下:

 1 class Person
 2 {
 3     private _name:string;
 4 
 5     constructor(name: string)
 6     {
 7         this._name = name;
 8     }
 9 
10     set name(value:string) {this._name = value;}
11     get name() {return this._name;}
12 
13     talk()
14     {
15         alert("Hi, my name is " + this.name + "!");
16     }
17 }
18 
19 function run()
20 {
21     var p:Person = new Person(null);
22     p.name = "Li Lie";
23     p.talk();
24 }
25 
26 run();

静态数据和方法

在TypeScript中,是可以使用Static来定义静态变量及静态函数的,我们以单例类为例来看看:

 1 class Person
 2 {
 3     private static _instance:Person;
 4 
 5     static getInstance():Person
 6     {
 7         if(this._instance == null)
 8         {
 9             this._instance = new Person();
10         }
11         return this._instance;
12     }
13 
14     talk()
15     {
16         alert("Hi, my name is Li Lie!");
17     }
18 }
19 
20 function run()
21 {
22     Person.getInstance().talk();
23 }
24 
25 run();

reference

TypeScript允许多个类在同一个文件里,但如果类与类在不同的文件,需要这种写法:

1 /// <reference path="SimpleWebSocket.ts"/>
2 class ComplexWebSocket extends SimpleWebSocket {
3 ...
4 }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript为Zepto编写LazyLoad插件发布时间:2022-07-18
下一篇:
vue+typescript项目中eslint,tslint配置发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap