美文网首页程序员让前端飞
走进 Typescript (3)类

走进 Typescript (3)类

作者: zidea | 来源:发表于2019-04-18 10:36 被阅读21次
    typescript-cover-image.jpg

    有关类的继承或者说是扩展的实现方式通常分为两个阵营,一个像 java 或是 c++ 中,需要类名称正确无误,根据名称严禁地进行类的继承或者是扩展。另一种就是像 go 语言以及今天介绍的 Typescript 一样通过形状来进行继承或者扩展的。


    2-f.png

    类的定义

    类定义是通过 class 关键字来定义的,typescript 是一套结构化类型系统,所以 interface 和 class 都是比较核心的

    class BaseActivity {
        name:string;
        constructor(name: string) { this.name = name; }
        render(){
            console.log(`render ${this.name} page...`)
        }
    }
    
    
    stretch-coffee-table-of-coffee-table-that-extends-up.jpg

    类的扩展

    类扩展可以让我们不同类共同属性和方法抽象出来在类间共享,也提供一种方式让我们可以搭建出一种从上向下的结构,在构造方法中可以用super()调用基类的方法。如果熟悉 OOP 应该没有什么陌生的地方。

    class BaseActivity {
        name:string;
        constructor(name: string) { this.name = name; }
        render(){
            console.log(`render ${this.name}`);
        }
    }
    
    class SplashActivity extends BaseActivity{
        constructor(name:string){
            super(name);
        }
    
        goto(acitivty:BaseActivity){
            console.log(`open ${acitivty.name} page`)
        }
    }
    

    Public、private 和 protected 修饰符

    我们在整个应用在通过命名空间、类、函数不断对程序 code 进行分割划分为一个一个,一层一层嵌套的区域。而且各个区域是可以是隔离和透明的。对类之间的字段方法也是通过 public\private\protected 等修饰符来定义其可见范围。

    pubic 和 private

    public 定义属性对外访问是没有任何障碍的,默认也是 public,private 如果没有 getter 和 setter 方法我们是无法获取和赋值这些属性值的。对这个属性访问是交给我们类设计者的。

    class Tut{
        private author:string;
        public title:string;
        public courses:number;
    }
    
    let tut:Tut = new Tut();
    tut.title = "angular base";
    console.log(tut.title)
    
    class Tut{
        private author:string;
        title:string;
        public courses:number;
    }
    
    let tut:Tut = new Tut();
    tut.title = "angular base";
    tut.courses = 12;
    console.log(tut.title)
    console.log(tut.courses)
    

    protected

    其实整个我本人很少用到,也不是在基础类中可能会经常用到这个 protected 来修饰属性,以便让其子类可以访问到这个属性。

    class BaseActivity {
        protected name:string;
        constructor(name: string) { this.name = name; }
    }
    
    class SplashActivity extends BaseActivity{
        constructor(name:string){
            super(name);
        }
    
        render(){
            console.log(`render ${this.name}`);
        }
    }
    
    let activity:SplashActivity = new SplashActivity("splash activity");
    activity.render();
    

    访问符

    有关这个我记忆深刻,我的第一门语言确切地说应该是 Actionscript,当初用 flash 做课件用到一些简单脚本语言,我的第一个 Android 小游戏也是用 ActionScript 写的。当时我还清楚记得兴奋好长时间。因为做的时候对 getter 和 setter 就花很长时间区理解。在 java 中叫什么装箱吧。

    class Tut{
        title:string;
        couses:number;
        
    }
    
    let angularTut = new Tut();
    angularTut.title = "angular base";
    console.log(angularTut.title)
    
    class Tut{
        title:string;
        couses:number;
        private _author;
    
        get author(){
            return this._author;
        }
    
        set author(name:string):string{
            this._author = "tut by " + name;
        }
    }
    
    let angularTut = new Tut();
    angularTut.title = "angular base";
    angularTut.author = "zidea";
    console.log(angularTut.author)
    console.log(angularTut.title)
    

    可以通过创建 set 和 get 方法提供对私有变量的设置和访问。

    抽象类

    抽象类和接口本质区别就是抽象类有自己实现方法而接口没有自己实现的方法,个人展示这样区分,只是弥补实现接口和扩展类中间空白区间,抽象类包含需要实现方法和

    abstract class Animal {
    
        abstract move():void
        constructor() {
            
        }
         eating(food:string):void{
            console.log("can eat " + food)
        }
    }
    
    class Dog extends Animal{
        move():void{
            console.log("dog is running...")
        }
    }
    
    const aDog:Dog = new Dog();
    aDog.move()
    

    定义一个 Animal 抽象类,提供一个抽象方法 move 需要继续子类来实现。然后定义 Dog 类扩展 Animal 并实现其抽象方法。

    [图片上传中...(typescript-cover-image.jpg-4047dc-1555554926402-0)]

    类也可以作为接口

    类通常做两件事,定义实例的类型,也就是对实例的一种描述,然后通过构造函数来进行一些初始化工作,如果抛开构造函数。单从表示类型结构上看其功能与接口有交叉。

    class Point {
        x: number;
        y: number;
    }
    
    interface Point3d extends Point {
        z: number;
    }
    
    let point3d: Point3d = {x: 1, y: 2, z: 3};
    

    相关文章

      网友评论

        本文标题:走进 Typescript (3)类

        本文链接:https://www.haomeiwen.com/subject/mplzwqtx.html