TypeScript面向对象编程

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

面向对象编程-类的声明和使用

类的出现可以让前端程序员抽象层次、增加维护性和复用性。当然这一系列的类的操作，我们都叫他面向对象编程。TypeScript就是一个基于类的面向对象编程语言。

类是对象具体事务的一个抽象，对象是类的具体表现。

// 类规范，首写字母大写 - 大驼峰命名
class XiaoJieJie{
// 区别于对象，不需要使用逗号隔开
name: string
age: number
// 构造函数
// 构造函数的主要作用是给类中封装的属性进行赋值
constructor(name:string, age:number){
// 使用 this 赋值
this.name = name
this.age = age
}
say(){
console.log('NIHAOA!')
}
}
// 有类之后声明对象
let jiejie:XiaoJieJie = new XiaoJieJie('fanbingbing',18)
// 打印出生成的对象看下样子
console.log(jiejie)
// 调用类方法
jiejie.say()

使用和定义类其实很简单，关键是理解类的思想。要有抽象逻辑的能力，这样才能复用和增强维护性。

面向对象编程-修饰符

访问修饰符

public:公有修饰符，可以在类内或者类外使用public修饰的属性或者行为，默认修饰符。
protected:受保护的修饰符，可以本类和子类中使用protected修饰的属性和行为。
private : 私有修饰符，只可以在类内使用private修饰的属性和行为。

class XiaoJieJie{
    public sex:string
    protected name:string
    private age:number
    public constructor(sex:string, name:string, age:number){
        this.sex = sex
        this.name = name
        this.age = age
    }
    public sayHello(){
        console.log('HELLO')
    }
    protected sayLove(){
        console.log('ILOVEYOU')
    }
}

var jiejie:XiaoJieJie = new XiaoJieJie('nv', 'DLLB', 16)

// 打印出对象属性看效果
console.log(jiejie.sex)
// 报错：属性“name”受保护，只能在类“XiaoJieJie”及其子类中访问
console.log(jiejie.name)
// 报错：属性“age”为私有属性，只能在类“XiaoJieJie”中访问
console.log(jiejie.age)
// 调用方法
jiejie.sayHello()
// 报错：属性“age”为私有属性，只能在类“XiaoJieJie”中访问
jiejie.sayLove()

只读属性修饰符

使用readonly修饰符将属性设置为只读，只读属性必须在生命时或者构造函数里被初始化（注意）。

class Man{
    public readonly sex:string = 'nan'
}

var man:Man = new Man()
// 报错：无法分配到“sex”，因为它是常数或只读属性
man.sex = 'nv'

面向对象编程-继承和重写

类的继承

继承：允许我们创建一个类（子类），从已有的类（父类）上继承所有的属性和方法，子类可以新建父类中没有的属性和方法。

// 父类
class Nloong{
    public name:string
    public age:number
    public skill:string
    constructor(name:string, age:number, skill:string){
        this.name = name
        this.age = age
        this.skill = skill
    }
    public interest(){
        console.log('zhaonimei')
    }
}

let loongObj:Nloong = new Nloong('baiye', 18, 'coding')
// 测试父类方法
loongObj.interest()

// 子类继承父类属性和方法 extends
// 但是有一点需要我们注意，TypeScript不支持多重继承。
class Xloong extends Nloong{
    // 子类扩展自身的属性和方法
    public xingxiang:string = 'shuaiqi'
    public zhuangQian(){
        console.log('yitianyigeyi')
    }
}

let shuai = new Xloong('shuai', 5, 'daren')

// 子类能使用父类的方法，通过继承而来
shuai.interest()
// 子类能使用父类找中没有自身扩展的方法
shuai.zhuangQian()

类方法的重写

// 父类
class Nloong{
    public name:string
    public age:number
    public skill:string
    constructor(name:string, age:number, skill:string){
        this.name = name
        this.age = age
        this.skill = skill
    }
    public interest(){
        console.log('zhaonimei')
    }
}

let loongObj:Nloong = new Nloong('baiye', 18, 'coding')

loongObj.interest()

// 子类
class Xloong extends Nloong{
    public xingxiang:string = 'shuaiqi'

    // 重写
    public interest(){
        // super 在子类中调用父类的方法，实现重写时保存父类的方法
        super.interest()
        console.log('chuangjianGS')
    }
    
    public zhuangQian(){
        console.log('yitianyigeyi')
    }
}

let shuai = new Xloong('shuai', 5, 'daren')

shuai.interest()

shuai.zhuangQian()

面向对象编程-接口

认识接口

// 接口
interface Husband{
    sex:string
    interset:string
    // 接口可选参数添加问号
    maiBaoBao?:Boolean
}

let myhusband:Husband = {sex: 'nan', interset: 'kanshu'}

console.log(myhusband)

面向对象编程-命名空间

命名空间的使用

Dehua 是同名类，可以使用不同的命名空间区分使用

// 命名空间
namespace shuaiGe{
    // export 暴露出去
    export class Dehua{
        public name:string = 'liudehua'
        talk(){
            console.log('woshishuaigeliudehua')
        }
    }
}

namespace bdjie{
    export class Dehua{
        public name:string = 'madehua'
        talk(){
            console.log('woshiershixiongmadehua')
        }
    }
}

let dehua1:shuaiGe.Dehua = new shuaiGe.Dehua()
let dehua2:bdjie.Dehua = new bdjie.Dehua()

dehua1.talk()
dehua2.talk()

原文地址：http://jspang.com/post/typescript.html?tdsourcetag=s_pcqq_aiomsg