8、TypeScript面向对象特性

一、类

class Person{
    //构造函数,只在类被实例化时调用,且只被调用一次
    constructor(name: string) {
        this.name = name  
    }

    //访问控制符
    public name;//可以在类外被访问

    private age;//只可以在类内部访问

    protected sex;//只可以在类内部或子类的内部被访问

    eat() {//如果没有访问控制符的话,默认为public
        console.log(this.name)
    }
}

var p1 = new Person("batman")//因为构造函数中有参数,所以实例化的时候必须传入参数
p1.eat();

var p2 = new Person("superman")
p2.eat();

等同于:

class Person{
    constructor(public name: string) {
    //需要注意。当在构造函数内部声明一个属性name的时候,需要指定访问控制符
    }

    private age;//只可以在类内部访问

    protected sex;//只可以在类内部或子类的内部被访问

    eat() {//如果没有访问控制符的话,默认为public
        console.log(this.name)
    }
}

var p1 = new Person("batman")//因为构造函数中有参数,所以实例化的时候必须传入参数
p1.eat();

var p2 = new Person("superman")
p2.eat();

执行结果:



二、类的继承

两个关键字:
1、extends:用来声明类的继承关系
2、super:用来调用父类的构造函数或方法

extends关键字

所谓继承关系是一种“是”的关系,如:“雇员是人”,“猫是动物”等。当一个类使用extends关键字继承了一个父类之后,那么这个类会获得它所继承的那个类的属性和方法。

class Person{
    //构造函数,只在类被实例化时调用,且只被调用一次
    constructor(name: string) {
        this.name = name  
    }

    //访问控制符
    public name;//可以在类外被访问

    eat() {//如果没有访问控制符的话,默认为public
        console.log("i'm eating")
    }
}

class Employee extends Person{
    code: string;
    work() {
        console.log("i'm working")
    }
}

var e1 = new Employee("name")
e1.eat()
e1.work()

执行结果:

super关键字
class Person{
    //构造函数,只在类被实例化时调用,且只被调用一次
    constructor(public name: string) {
        console.log("parent")  
    }

    eat() {//如果没有访问控制符的话,默认为public
        console.log(this.name+"is eating")
    }
}

class Employee extends Person{
    constructor(name: string, code: string) {
        super(name);//子类的构造函数必须先用super关键字调用父类的构造函数,这是规定,必须遵守!
        this.code = code
        console.log("child")  
    }
    code: string;
    work() {
        super.eat()//在子类中通过super关键字调用父类的方法
        this.doWork()
    }
    private doWork() {//私有方法不可在外部调用
        console.log(this.name+"is working")
    }
}

var e1 = new Employee("Employee","1")
e1.work()

执行结果:



三、泛型(generic)

泛型是指一种参数化的类型,一般用来限制集合的内容


class Person{
    //构造函数,只在类被实例化时调用,且只被调用一次
    constructor(public name: string) {
        console.log("parent")  
    }

    eat() {//如果没有访问控制符的话,默认为public
        console.log(this.name+"is eating")
    }
}

class Employee extends Person{
    constructor(name: string, code: string) {
        super(name);//子类的构造函数必须先用super关键字调用父类的构造函数,这是规定,必须遵守!
        this.code = code
        console.log("child")  
    }
    code: string;
    work() {
        super.eat()//在子类中通过super关键字调用父类的方法
        this.doWork()
    }
    private doWork() {//私有方法不可在外部调用
        console.log(this.name+"is working")
    }
}
//声明变量workers为数组,这个数组里只能放Person类型的数据
var workers: Array<Person> = [];//这个数组的泛型为Person
workers[0] = new Person("zhangsan");
workers[1] = new Employee("lisi","2");

代码中的:var workers: Array<Person> = [];就是泛型的用法

四、接口(Interface)

接口是用来建立某种代码约定,使得其他开发者在调用某个方法或者创建新的类时必须遵循所接口定义的代码约定。
其实在javascript中是没有接口这个概念的,而在typescript中则提供两个关键字来支持这种特性:

Interface:用来声明一个接口;
Implements:用来声明某个类实现了某一个接口;

接口的使用方式1:用作函数参数的类型声明

interface IPerson{
    name: string;
    age: number;
}
class Person{
    constructor(public config: IPerson) {//接口用作函数参数的类型声明
        
    }
}
var p1 = new Person({
    name: "张三",
    age: 18,
    //多传或少传参数都会报错
})

接口的使用方式2:在接口中声明方法,则所有实现该接口的类都得实现这个方法。

interface Animal{
    eat()
}

class Sheep implements Animal{//Sheep类实现了Animal接口
//当一个类实现某个接口时,它必须实现该接口中声明的方法
    eat() {
        console.log("i eat grass")
    }
}

class Tiger implements Animal{//Tiger 类实现了Animal接口
    eat() {
        console.log("i eat meat")
    }
}


五、模块(Module)

模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源(类、方法、变量)暴露出去供外部使用,哪些资源只在模块内使用。
所谓“模块”在ts中就是一个文件,一个文件就是一个模块。在模块内部,有两个关键字来支撑模块的特性;这两个关键字是“export(导处)”和“import(导入)”。
代码示例:
先建立一个文件a.ts

export var prop1;//对外暴露的变量

var prop2;//不对外暴露的变量

export function func1() {//对外暴露的方法
    
}

function func2(){//不对外暴露的方法

}

export class Clazz1{//对外暴露的类

}

class Clazz2{//不对外暴露的类
    
}

再建立一个文件b.ts

//引入a.ts中暴露出来的变量、方法、类
import {prop1,func1,clazz1} from './a'

console.log(prop1)
func1();
new clazz1()

//也可以向外暴露自己的方法
export function func3() {
    
}


六、注解(annotation)

注解为程序的元素(类、方法、变量)加上更直观、更明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的工具或框架使用的。

七、类型定义文件(*.d.ts)

类型定义文件,用来帮助开发者在ts中使用已有的js工具包,如jquery;
常用的js框架的类型定义文件来自于:https://github.com/DefinitelyTyped/DefinitelyTyped
或者使用:https://github.com/typings/typings来寻找或安装一个类型定义文件。

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

推荐阅读更多精彩内容

  • { "Unterminated string literal.": "未终止的字符串文本。", "Identifi...
    一粒沙随风飘摇阅读 10,386评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,599评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,506评论 25 707
  • 每一个贫困生的背后,都是一本值得思考的书。在我们眼中他们应该独立,他们应该坚强,他们应该担当,他们应该勇敢,他们应...
    飞流三千阅读 360评论 0 1
  • 前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了...
    孟媛的笔记阅读 176评论 0 0