TypeScript-如何定义类

前言

传统的JavaScript中,使用的是基于原型的继承方式来使用类,虽然在ES6中明确提出了类关键字,但是支持度还不高。TypeScript允许你直接使用ES6的类语法,并且实现了各大浏览器和平台的支持。

一、基本使用

class Person {
  name: string
  constructor(name: string) {
    this.name = name;
  } 
}

然后这样使用这个类:

let mss = new Person("mss");
console.log(mss.name);
// mms

二、类的继承

定义基础类

class Animal {
  name: string
  constructor(name: string) {
    this.name = name;
  }

  move(speed: number = 0) {
    console.log(`${this.name}移动了${speed}`);
  }
}

定义继承类,并且使用继承类重写基础类的方法

class Cat extends Animal {
  constructor(name: string) {
    super(name)
  }
  move(speed: number = 10) {
    super.move(speed);
  }
}

然后你这样使用继承类:

let cat = new Cat("🐈");
cat.move(20);
// 🐈移动了20

上面的例子就是很简单的使用extends实现类继承的例子,我们在继承类的内部使用super关键字改写了基础类的move方法。

三、Public, private, and protected

在其他的强类型语言中,有public等关键字标记变量的使用范围,TypeScript中也提供了这些关键字。

1.public

public关键字是标记变量或者方法是公用的,不管在父类和子类都能使用。在TypeScript中默认就是public,也就是当你没有使用任何范围关键字修饰,默认就是公用的变量和方法,当然你也可以显示的使用puclic声明。

class aAnimal {
  public name: string
  public constructor(name:string) {
    this.name = name;
  }
  public move(speed: number) {
    console.log(speed); 
  }
}

然后可以定义继承类:

class Dog extends aAnimal {
  constructor(name: string) {
    super(name);
  }
}

我们可以在基础类和继承类中都可以访问到name属性:

// 基础类可以访问
console.log(aAnimal.name);

// 继承类也可以访问
let dog = new Dog("mss");
console.log(dog.name);
// mss

2.private

private是用来标记一个类中私有变量的关键字,一旦使用private标记,表示申明了该变量是类私有的,只能在类中进行访问。

基础类

class sAnimal {
  private name: string;

  constructor(theName: string) {
    this.name = theName;
  }
}

继承类:

class Snake extends sAnimal {
  constructor(name: string) {
    super(name);
  }
}

然后试着去访问继承类中的name属性:

class Snake extends sAnimal {
  constructor(name: string) {
    super(name);
        // 这里访问基础类的name属性
     console .log(super.name);
  }
}

发现都不能访问,也应证了确实只能在基础类类中进行访问。

3.protected

protected关键字标记的变量在基础类的子类和衍生类中都能访问。比如把上面的例子中provate改为protected

class sAnimal {
  protected name: string;
  constructor(theName: string) {
    this.name = theName;
  }
}

class Snake extends sAnimal {
  constructor(name: string) {
    super(name);
    // 这里可以正常访问
    console .log(super.name);  
  }
}

3.readonly

readonly关键字用来修饰只读属性

class OtherPerson {
  readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}

let me = new OtherPerson("mss");
// me.name = ''

当我们试图设置me实例的name属性时,TypeScript会报错,因为我们使用了readonly关键字描述了只读属性。

同时,TypeScript也允许在申明的时候同时初始化参数:

class OtherPerson {
  readonly age: number = 18
  constructor(readonly name: string) {
    console.log(name);
  }
}

let me = new OtherPerson("mss");
// me.name = ''

这样做也是合理的,其他如public等修饰符也可以在声明变量的同时初始化,用法和这个例子是一致的。

四、访问器属性

和JavaScript中一样,TypeScrip中也提供了访问器属性,使得开发者可以对对象进行更细粒度的控制。值得注意的是,一旦在对象中设置了getset方法,TypeScript会默认用readonly修饰setget方法。

我们可以利用访问器属性,实现对一个输入的字符串的校验,我们首先设置了输入的长度为10位:

const maxLength = 10;

然后我们为类定义getset访问器方法:

lass ValidName {
  private name: string = "";

  get fullName () {
    return this.name;
  }

  set fullName (newName: string) {
    if (newName && newName.length > maxLength) {
      throw new Error("输入的字符串不合法!");
    }
    this.name = name;
  }
}

当我们传入的字符串不符合长度的时候,会给我们一个友好的提示。同时,注意,访问起属性只能在编译器是ES5+的版本才能使用。

五、静态类

前面我们提到可以使用修饰符对类中的变量进行访问范围的控制,静态属性修饰符的作用也是在于此,使用static修饰符修饰变量,可以使得该变量只能被该类直接访问。

class StaticObj {
  static age: number = 18;

  getAge() {
    return StaticObj.age;
  }
}

然后我们访问age属性的时候,只能通过StaticObj签名进行访问:

console.log(StaticObj.age);
// 18

六、抽象类

抽象类的行为可以有这样几个特点:

  • 抽象类不能实例化,只能作为基础类供其他类继承。
  • 使用abstract关键字定义抽象类和抽象方法,抽象方法只包括定义,不包括实现。
  • 基于抽象类的衍生类必须实现抽象类的抽象方法。

我们首先定义一个抽象类和抽象方法,注意抽象方法必须是在抽象类中定义:

abstract class AbstractObj {
  abstract getName(): void
}

然后定一个AbstractObj抽象类的继承类ImpleAbstractObj

class ImpleAbstractObj extends AbstractObj{
  public name: string = 'mss'
  public age: number = 18

  // 这里实现了抽象类的getName方法
  getName(): void {
    console.log(this.name);
  }
  getAge() {
    return this.age;
  }
}

七、类可以当作接口使用

前面说到了接口是TypeScript定义数据结合类型的一个虚拟结构,对于类来说,也可以当作接口的功能。

你可以像使用接口一样使用类

class baseObj {
  name: string
}

同等功能的接口是这样定义:

interface baseObj {
  name: string
}

然后这样使用:

let irObj: baseObj = {
  name: 'mss'
}

八、总结

ES6之前JavaScript并没有正式的关于类的概念,ES6之后新增了class的关键字,虽然只是基与ES5原型的语法糖,但是也算是方便了前端开发者。同时,TypeScript中引入了强类型语言中类的特性,使得JS向开发大型的项目又跨进了一步。

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

推荐阅读更多精彩内容