美文网首页程序员让前端飞
走进 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)类

    有关类的继承或者说是扩展的实现方式通常分为两个阵营,一个像 java 或是 c++ 中,需要类名称正确无误,根据名...

  • TypeScript--3.类

    在ES6之前,JS没有class关键字,JS的面向对象和继承也是面试中常见的问题.之前接触过PHP面向对象的话,在...

  • TypeScript 旅途3:类

    传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但是我们更习惯于使用面向对象的方式来开发...

  • 走进TypeScript

    国内很多技术文章千篇一律,大多从官网复制粘贴,如果要学习TypeScript语法细节,去看官网最好不过了。 本文将...

  • 走进TypeScript

    如今前端技术层出不穷,es6还没完全掌握,TypeScript又来了,2020了,不会点TypeScript都不好...

  • Typescript基础3--类

    类 javascript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。 从ES6开始引入了 Cl...

  • TypeScript学习资源汇总

    TypeScript安利指南 ☑️ 为 Vue3 学点 TypeScript , 体验 TypeScript ☑️...

  • typescript 学习第二天

    一 es5 1.定义类 2.类的继承 3.类的静态方法 二 typescript 1.定义类 2.ts中实现继承...

  • TypeScript——类

    对类的使用:

  • Typescript —— 类

    类: 上面生成的按钮,点击的结果是“Hello,world”,上面例子中声明一个Greeter类。这个类有3个成员...

网友评论

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

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