TypeScript基础入门介绍（四）之类、接口篇

类

介绍

传统的JavaScript程序使用函数和基于原型的继承来创建面向对象的类，在es6中，JavaScript程序员能够使用基于类的面向对象的方式，通过引入class关键字，表示定义一个类。TypeScript中允许开发者使用这些特性。

类的定义

其实typescript中定义类的方法与ES6相同，在ES6的基础上，加了类型检查。

//es6中定义类的方法:
class Person {
     constructor(name){
        this.name = name;    
     }
     run() {
        console.log(this.name);
     }
}
//ts中定义类的方法
class Person {
    public name:string;    //  public关键字可省略
    constructor(name:string){   //构造函数   实例化类的时候触发的方法
        this.name = name;     
    }
    run():void {
        console.log(this.name);
    }
}
// 执行方法
var p=new Person('张三');
p.run()

继承

在TypeScript中，我们可以使用常用的面向对象模式。可使用继承(关键字extends、super)来扩展现有的类。

class Person {
    public name:string;    //  public关键字可省略
    constructor(name:string){   //构造函数   实例化类的时候触发的方法
        this.name = name;     
    }
    run():void {
        console.log(this.name);
    }
}
class Web extends Person{
    constructor(name:string){
        super(name);    // 初始化父类的构造函数，必须调用super();
    }
}
var w=new Web('张三');
w.run()

上述例子展示了基本的继承：类从基类中继承了属性和方法。这里， Web是一个派生类，它派生自Person基类，通过extends关键字。派生类通常被称作子类，基类通常被称作超类.
因为Web继承了Person的功能，因此Web的实例能够执行run方法。

当子类中定义的方法和父类一致时，会执行子类中的方法，这是原型链的查找规则。

类中的修饰符(public、protected、private)

public :公有，在当前类里面、 子类 、类外面都可以访问；
protected：保护类型，在当前类里面、子类里面可以访问 ，在类外部没法访问
private ：私有 ，在当前类里面可以访问，子类、类外部都没法访问

默认为public

在TypeScript中，成员默认为public，也可以明确将一个成员标记为public。上面的例子也可这么写：

class Person {
    public name:string;    //  public关键字可省略
    public constructor(name:string){   //构造函数   实例化类的时候触发的方法
        this.name = name;     
    }
    public run():void {
        console.log(this.name);
    }
}
var p=new Person('张三');
p.run()
理解protected

protected类型的成员在当前类和子类中都可以访问，但不能在类外部访问。

// 类外部无法访问保护类型的属性
class Person {
    protected name:string;    
    constructor(name:string){   
        this.name = name;     
    }
    run():void {
        console.log(this.name);
    }
}
class Web extends Person{
    constructor(name:string){
        super(name);   //  这里仍可以访问name，因为web是由person类派生来的
    }
}
var p=new Person('张三');
p.name;  //  error    不能在类外部使用protected类型变量或方法

注意：当派生类构造函数被标记为protected。这意味着这个类不能在包含它的类外被实例化，但是能被继承。

理解private

当成员被 标记成private时，它就不能在声明它的类的外部访问。

class Person {
    private name:string;    
    constructor(name:string){   
        this.name = name;     
    }
    run():void {
        console.log(this.name);
    }
}
class Web extends Person{
    constructor(name:string){
        super(name);   
    }
    work():void {
        console.log(this.name);  //  error  私有变量不能在子类中使用
    }
}
var p=new Person('张三');
p.name;  //  error  私有变量不能在类外部使用

静态属性 静态方法

静态属性及方法存在于类本身而不是类的实例上。使用static关键字定义，如果实例对象想访问静态属性，需在属性age前加类名Person，如下例：

class Person {
    name:string;    
    static age:number = 20;
    constructor(name:string){   
        this.name = name;     
    }
    static run():void {
        console.log(this.name);
    }
    work():void{ 
          console.log(Person.age);  //  访问静态属性，必须使用类Person调用
    }
}
var p = new Person('张三');
p.run();  //  error   访问静态方法，必须使用类调用
Person.run();   // right

抽象类 多态

抽象类作为其他派生类的基类，一般不会直接被实例化。使用abstract关键字定义抽象类和抽象方法。

抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。abstract抽象方法只能放在抽象类里面。

abstract class Animal{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    abstract eat():any;  //抽象方法不包含具体实现并且必须在派生类中实现。 
    run(){
        console.log('其他方法可以不实现')
    }
}
// var a=new Animal() /*错误的写法*/
class Dog extends Animal{
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    eat(){
        console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小花花');
d.eat();

多态：父类定义一个方法不去实现，让继承它的子类去实现 每一个子类有不同的表现。

 class Animal {
     name:string;
     constructor(name:string) {
         this.name=name;
     }
     eat(){   //具体吃什么  不知道 ?继承它的子类去实现 ，每一个子类的表现不一样
         console.log('吃的方法')
    }
}
class Dog extends Animal{
    constructor(name:string){
         super(name)
    }
   eat(){
       return this.name+'吃粮食'
   }
}
 class Cat extends Animal{
    constructor(name:string){
       super(name)
    }
    eat(){
      return this.name+'吃老鼠'
   }
}
var d = new Dog('小狗');
var c = new Cat('小花');
d.eat();  // 小狗吃粮食
c.eat();  //  小花吃老鼠
//  对于同一个方法每个子类实例有不同的表现

接口

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

属性类接口

ts中当自定义方法需对传入的参数进行约束时，我们可以这样定义：
约束传入的参数必须是对象，并且有label属性

function printLabel(labelInfo:{label:string}):void {
   console.log('printLabel');
}
printLabel('hahah'); //错误写法
printLabel({name:'张三'});  //错误的写法
printLabel({label:'张三'});  //正确的写法

当需要对批量方法传入的参数进行更新时，可引入接口：行为和动作的规范，对批量方法进行约束.

interface FullName{
     firstName:string;   //注意;结束
     secondName:string;
}
function printName(name:FullName){
     // 必须传入对象  firstName  secondName
    console.log(name.firstName+'--'+name.secondName);
}
printName('1213');  //错误
var obj={   /*传入的参数必须包含 firstName  secondName*/
     age:20,
     firstName:'张',
    secondName:'三'
};
printName(obj);   //  输出“张--三”

当接口里的属性不全都是必需的，在某些条件下存在，或者根本不存在时，可在可选属性名字定义的后面加?符号

函数类型接口

函数类型接口：对方法传入的参数以及返回值进行约束

interface encrypt {
  (key:string, value:string):string;
}
var md5:encrypt = function(key:string, value:string):string {
  return key+value;
}
console.log(md5('name', 'zhangsan'));

对于函数类型的类型检查来说，函数的参数名不需要与接口定义的名字相匹配，比如用下面的代码重写上面的例子：

var md5:encrypt = function(source:string, src:string):string {
  return source+src;
}

类类型接口

对类的约束，和抽象类有点相似
在C#或Java中，接口通常是用来定义一个类的公共部分，然后创建一个类，通过implements关键字去实现接口。

在接口中描述方法，在类里实现它。

interface Animal{
   name:string;
   eat(str:string):void;
}
class Dog implements Animal{
    name:string;
    constructor(name:string){
      this.name=name;
    }
    eat(){
      console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小黑');
d.eat();

可索引接口

可索引接口：是对数组、对象的约束。不太常用

//可索引接口 对数组的约束
interface UserArr{   
  [index:number]:string
}
var arr:UserArr=['aaa','bbb'];
console.log(arr[0]);
var arr:UserArr=[123,'bbb'];  /*错误，索引的值只能是string*/
console.log(arr[0]);

 //可索引接口 对对象的约束
// 索引为string类型，值也为string类型
interface UserObj{
     [index:string]:string
}
var arr:UserObj={name:'张三'};

扩展接口：接口可以继承接口

interface Animal{
  eat():void;
}
interface Person extends Animal{
  work():void;
}
class Programmer{
    public name:string;
    constructor(name:string){
       this.name=name;
    } 
    coding(code:string){
        console.log(this.name+code)
    }
}
class Web extends Programmer implements Person{
     constructor(name:string){
         super(name)
     }
     eat(){
         console.log(this.name+'喜欢吃馒头')
     }
     work(){
      console.log(this.name+'写代码');
   } 
}
var w=new Web('小李');
w.eat();
w.coding('写ts代码');

在上面例子中，定义了两个接口Animal和Person ，其中Person继承自Animal，又定义programmer类，具有name属性和coding方法，定义的Web类继承自Programmer并实现了Person接口，因此Web实例也有name属性和Animal、Person接口的方法eat、work、coding

上一篇TypeScript基础入门（三）主要介绍ts中的函数

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,384评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,845评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,148评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,640评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,731评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,712评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,703评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,473评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,915评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,063评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,706评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2赞 352