zoukankan      html  css  js  c++  java
  • TypeScript学习笔记(三):类

    在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 }
  • 相关阅读:
    DRF项目之视图获取路径参数
    DRF项目之层级关系
    DRF项目之序列化器和视图重写方法的区别
    DRF项目之自定义分页器
    DRF项目之实现用户密码加密保存
    DRF项目之通过业务逻辑选择数据集和序列化器
    DRF项目之自定义JWT认证响应数据
    PIP一次性导入所有环境和指定镜像源
    DRF项目之JWT认证方式的简介及使用
    DRF项目之解决浏览器同源策略问题
  • 原文地址:https://www.cnblogs.com/lancidie/p/7344842.html
Copyright © 2011-2022 走看看