TypeScript学习-Classes

介绍


传统的JavaScript使用函数和基于原型的继承来构建可复用的组件,ES6引进了基于类的OO编程方法,TypeScript也是使用了最新的ES6语法进行构建的,它能将这些高级特性编译成能在现代浏览器上运行的JavaScript版本。


Classes特性

  • C#Java类似,包括属性方法constructor(构造函数)

  • 成员访问符 this,我们在类中用this语法访问类中instance属性

// eg
class Greeter {
    greeting: string;
    constructor(message: string) {
// this 成员访问符
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
  • 通过new方法创建类的instance,这将调用我们在类中定义的constructor(构造函数),它将完成两件事: 创建一个和Greeter类一样Shape的新对象,然后通过constructor里面的语句Initialize实例属性
let  greeter = new Greeter("world");
// 

继承

  • 通过extends关键字来继承父类
class Animal {
      name: string;
      constructor(theName: string) { this.name =     theName; }
      move(distanceInMeters: number = 0) {
      console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
// 继承
class Horse extends Animal {}
  • 通过super关键字调用父类(base class)的constructor
class Horse extends Animal {
  constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}
  • 通过sub classbase class同名的方法,会重载(override)父类的方法
class Horse extends Animal {
  constructor(name: string) { super(name); }
// move 重载 父类的move方法
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

访问修饰符

  • public 修饰符
    默认设置为 public,不需要显式的写出(C#等语言需要显式写出),这样无论在子类中还是类外都可以无限制访问base class中的属性或方法
class Animal {
//此时 public也可以不写
    public name: string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
  • private 修饰符
    如果在属性或方法前面设置了private,就不能在任何sub class或类外访问到这个属性或方法
class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}
new Animal("Cat").name; // Error: 'name' is private;

如果将base classconstructor加上private修饰符,那么派生类也不不能调用super()方法访问,类外也不能实例化:

class Person {
    protected name: string;
    private constructor(theName: string) { this.name = theName; }
}
let john = new Person('John'); //Error, The constructor is private

TypeScript是一个基于结构(shape)比较的类型检查系统(原文:是一种结构类型系统,我为了更好的理解自作主张扩充),也就是说:
如果类中没有privateprotected等修饰符,那么这个类的成员和要检查的类型相同,那么它们两类型就是相同的。

class BigCar {
    name: string;
    constructor(theName: string) { this.name = theName; }
}
class SmallCar {
    name: string;
    constructor(theName: string) { this.name = theName; }
}
// 上面两个类是相同类型的

反之,如果存在privateprotected那么除了检查形状(shape),还要检查privateprotected后属性或方法的申明源originated是否相同。
简而言之就是,它们的privateprotected后属性或方法必须来源同一个申明。

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}
class Rhino extends Animal {
    constructor() { super("Rhino"); }
}
class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}
let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");
animal = rhino;
animal = employee; // Error: 'Animal' and 'Employee' are not compatible
  • protected修饰符
    除了能够在(deriving classes)派生类,也就是子类中访问到base class成员,其他的特性和private基本一致
class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}
class Employee extends Person {
    private department: string;
    constructor(name: string, department: string) {
        super(name);
        this.department = department;
    }
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error

如果给constructor加上protected修饰符,那么base class只能在派生类中被super()调用,在类外不能实例化。

class Person {
    protected name: string;
    protected constructor(theName: string) { this.name = theName; }
}
// Employee can extend Person
class Employee extends Person {
    private department: string;
    constructor(name: string, department: string) {
        super(name);
        this.department = department;
    }
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}
let howard = new Employee("Howard", "Sales");
let john = new Person("John"); // Error: The 'Person' constructor is protected

只读修饰符

  • readonly只能在定义时初始化,或者在constructor中初始化
class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // error! name is readonly.
  • 参数属性:Parameter properties。由于定义readonly属性和在constructor中初始化是一个很常用的属性,所以TypeScript做了一个简化,让你在constructor中的parameter list前面加上readonly修饰符,那么在调用constructor创建一个新类并初始化的时候就能同时创建一个readonly成员属性,并初始化,而不用写在两个地方。
class Octopus {
    readonly numberOfLegs: number = 8;
    constructor(readonly name: string) {
    }
}
//实际上readonly、public、private、protected都能获得以上的create and initialize的效果

访问器Accessors

  • TypeScript提供getters / setters方法,使得你能精细的控制怎么对成员进行操作。
  • 通过拦截读或写操作,来避免不必要的bug
let passcode = "secret passcode";
class Employee {
    private _fullName: string;
    get fullName(): string {
        return this._fullName;
    }
    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}
  • 只设置了get而没有set那么这个属性就是只读的readonly
  • 只用ES5及以上的版本支持get / set

静态属性Static Properties

  • 类其实包括两个方面:instance sidestatic side,其中在属性或方法前面加上了static以及constructorstatic side, 其余为 instance side
  • static 属性通过类名直接获取,constructor通过new关键字创建实例
class Grid {
    static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) { }
}
let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scale
console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

抽象类Abstract classes

  • 抽象类只能是基类,不是继承自其它类或抽象类。只能被继承。
  • 抽象类不能直接实例化。
  • 相比Interface,抽象类的成员可以包含具体的细节,例如函数体的具体内容。
  • 抽象类中加了abstract关键字的省略了细节,而且派生类必须实现这些属性。
  • 抽象类中可以没有抽象属性
  • 有抽象属性的类一定是抽象类,必须带上abstract关键字
abstract class Department {
    constructor(public name: string) {
    }
    printName(): void {
        console.log("Department name: " + this.name);
    }
    abstract printMeeting(): void; // must be implemented in derived classes
}
class AccountingDepartment extends Department {
    constructor() {
        super("Accounting and Auditing"); // constructors in derived classes must call super()
    }
    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10am.");
    }
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}
let department: Department; // ok to create a reference to an abstract type
department = new Department(); // error: cannot create an instance of an abstract class
department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass
department.printName();
department.printMeeting();
department.generateReports(); // error: method doesn't exist on declared abstract type

高级技巧

  • 构造函数Constructor functions
    当在TypeScript定义了一个类的时候,实际上创建了两份申明。
  • 这个类的实例类型
  • 这个类的构造函数

也就是说,创建一个类,用类名赋予类型检查的时候是相当于一个包含了这个类所有实例成员的一个Interface
而类名赋予变量,则相当于把这个类的构造函数赋值给一个变量,所以用类型检查要用typeof 类名

class Greeter {
    static standardGreeting = "Hello, there";
    greeting: string;
    greet() {
        if (this.greeting) {
            return "Hello, " + this.greeting;
        }
        else {
            return Greeter.standardGreeting;
        }
    }
}
//用Greeter作为类的实例的类型来做类型检查
let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet());
//typeof Greeter实际上类的静态属性或方法的类型来做类型检查
let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";
let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());
  • 把类当做interface来用
    因为类名用作类型检查的作用和Interface类似

综上。接口可以继承结构,结构可以继承类。类可以继承类,类可以实现接口。再加上一系列修饰符的限制,使得我们可以使用TypeScript完成很多丰富的操作。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,587评论 18 399
  • { "Unterminated string literal.": "未终止的字符串文本。", "Identifi...
    一粒沙随风飘摇阅读 10,399评论 0 3
  • 一. Java基础部分.................................................
    wy_sure阅读 3,791评论 0 11
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,600评论 18 139
  • 我以吻回苍天,却被报以痛苦挣扎 1. 有多少人每天在抱怨自己生不逢时,出生在一个地图上也很难找到的无名小镇,而非大...
    不二柠檬阅读 800评论 0 1