Typescript面向对象引入(接口、类、多态、重写、抽象类、访问修饰符)

114 阅读4分钟

之前的文章大部分都写在CSDN,大部分文章都未迁移完成,文章内链接也展示没进行修改,点击链接会直接转跳至CSDN的文章,请见谅,过段时间迁移完成后会进行修改

系列文章目录

引入一:Typescript基础引入(基础类型、元组、枚举)

引入二:Typescript面向对象引入(接口、类、多态、重写、抽象类、访问修饰符)

第一章:Typescript基础知识(Typescript介绍、搭建TypeScript环境、基本数据类型)

第二章:Typescript常用类型(任意值any、数组Array、函数Function、元组Tuple、类型推论、联合类型)

第三章:Typescript基础知识(类型断言、类型别名、字符串字面量类型、枚举、交叉类型)


一、接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口可以理解为是抽象到极致的抽象类,接口中只能存在抽象方法和属性。接口通过interface关键字来声明;

接口是需要实现得 类是可以继承

类实现接口必须具有接口得属性和方法,

// 类接口
interface StudentInterFace {
    name;
    say(msg: string): void; //未实现得方法
    // 抽象方法 没有方法体得方法
}
class Student implements StudentInterFace {
    name;
    say(msg: string): void {
        console.log(this.name + '说' + msg);
    };
    constructor(name) {
        this.name = name
    }
    foo() {
    }
};
let student: StudentInterFace = new Student('zs');
// 父类得引用指向实例对象
student.say('hello');//zs说hello
// 对象接口  创建出来的对象可以使用接口去实现
enum Gender {
    male1 = '男',
    female1 = '女'
}
class Student {
    name: string;
    age: number;
    gender: Gender
}
interface PropInterFace {
    data: Array<Student>,
    visible: boolean
};
let prop: PropInterFace = {
    data: [
        { name: 'zhangsan', age: 12, gender: Gender.female1 },
        { name: 'lisi', age: 16, gender: Gender.male1 }
    ],
    visible: false
}
console.log(prop);
// {
//     data: [
//       { name: 'zhangsan', age: 12, gender: '女' },
//       { name: 'lisi', age: 16, gender: '男' }
//     ],
//     visible: false
//   }

二、类

javascript关于类得侧重点主要是原型对象
 class Person{
 	foo(){}
 	bar(){}
 }
let p1=new Person()
p1.var() 
p1.foo()

1.多态(一个对象多种形态)

子类继承了父类,父类类型得引用指向子类对象,实例无法调用子类对象特性(属性、方法) 可以调用父类对象特性,一种对象多种形态.如果子类方法签名与父类一致,子类会对父类得方法进行重写.

2.重写

重写 如果子类中方法签名与父类一致 则会对父类方法进行重写

// es6 类是构造函数的另一种写法
// 类是创建对象的模板 一个类可以创建多个对象
class Person {
    name: string;
    age: number;
    weight?: number;
    say(): void {
        console.log("普通讲话")
    }
}

class Student extends Person {
    stuNo: string;
    say(): void {
        console.log("高端讲话")
    }
}
// 纯粹的面向对象 实例是new出来的
let s1: Person = new Student();//多态
s1.age = 12;
s1.name = 'terry';
// s1.stuNo = '1002';
console.log(s1)//Student { age: 12, name: 'terry' }
s1.say()//高端讲话(重写父类方法)


// 字面量模式 类型限制
let s2: Student = {
    stuNo: '1001',
    name: 'zs',
    age: 12,
    say(): void {
    }
}
console.log(s2)//{ stuNo: '1001', name: 'zs', age: 12, say: [Function: say] }

3.抽象类

​ 什么是抽象类? ​ 一般情况下,抽象类无法创建对象,抽象类中可以存在抽象方法,没有方法体得方法就是抽象方法,抽象类中可以存在抽象方法和非抽象方法,一个类中具有抽象方法,那个该类一定是抽象类 ​ 存在得意义? ​ 为了让其它类继承抽象类,并强制要求子类实现抽象方法;

子类继承抽象类 1.子类必须实现抽象类中得方法 2.子类成为抽象类

// 抽象类 里面纯在抽象方法 无法实例化对象
// 抽象方法 没有方法体的方法
// 抽象类中可以存在抽象方法或非抽象方法
// 抽象类存在的意义
// 让其他类去继承抽象类
abstract class Person1 {
    abstract study(): void;
}

// let s1 = new Student1();

// 子类继承抽象类 两种方式:
// 1.实现抽象类中方法
class Student1 extends Person1 {
    study(): void {
        console.log("好好学习")
    }
    cook(): void {
        console.log("学会了做饭")
    }
}
let s3: Student1 = new Student1()

s3.study();//好好学习
s3.cook();//学会了做饭

// 2.自身也成为抽象类
// abstract class Student2 extends Person1 {
//     // study(): void;
// }

4.访问修饰符

用于修饰类中的成员属性及成员方法(实例属性、实例方法) 访问权限 public 公开 当前类、子类、其他类 protected 受保护 当前类、子类 private 私有 当前类 readonly 属性为只读的

class Person2 {
    public name: string;
    protected age: number;
    private weight: number;
    readonly gender: string;
    constructor(name, age, weight, gender) {
        this.name = name;
        this.age = age;
        this.weight = weight;
        this.gender = gender;
    }

    protected foo() {
        console.log(this.name);
        console.log(this.age);
        console.log(this.weight)
    }
}

class Student2 extends Person2 {
    constructor(name, age, weight, gender) {
        super(name, age, weight, gender)
    }
    bar() {
        super.foo()
        // super 父类的引用
        // console.log(super.name);
        // console.log(super.age);
        // console.log(super.weight);
    }
}

let s4: Student2 = new Student2("zs", 12, 44, '女')
console.log(s4.name);//zs

s4.gender = "male";
s4.bar()
//zs
//12
//44
// console.log(s4.age);