美文网首页TypeScript基础我爱编程
8、TypeScript面向对象特性

8、TypeScript面向对象特性

作者: 伯纳乌的追风少年 | 来源:发表于2017-08-20 04:52 被阅读48次

    一、类

    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来寻找或安装一个类型定义文件。

    相关文章

      网友评论

        本文标题:8、TypeScript面向对象特性

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