• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript函数(定义、参数、重载)发布时间:2022-07-18
下一篇:
【TypeScript】基础类型和高级类型发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap