类

  1. //使用class关键字来定义一个类
  2. /**
  3.  * 对象中主要包含了两个部分
  4.  *  属性
  5.  * 方法
  6.  * 
  7.  */
  8. class Person {
  10.     /**
  11.      * 直接定义的属性是实例属性，需要通过对象的实例去访问
  12.      *       const per = new Person()
  13.      *       per.name
  14.      * 使用static开头的属性是静态属性（类属性）可以直接通过类去访问
  15.      *       Person.age
  16.      */
  18.     //定义实例属性
  19.     name: string = 'zz'
  21.     //在属性前使用static关键字可以定义类属性（静态属性）
  22.     static age: number = 18
  24.     //readonly开头的属性表示一个只读的属性无法修改
  25.     readonly gender: string = '男'
  27.     //静态只读属性
  28.     static readonly hobby: string = 'bick'
  30.     //定义方法
  31.     /**
  32.      * 如果方法以static开头则方法就是类方法，可以直接通过类去调用
  33.      */
  34.     static sayHallo() {
  35.         console.log('hallo')
  36.     }
  37. }
  38. const per = new Person()
  39. console.log(per.name)
  40. console.log(Person.age)
  41. Person.sayHallo()

构造函数和this

  1. class Dog{
  2.     name
  3.     age
  4.     //构造函数，会在对象创建时调用
  5.     constructor(name:string,age:number){
  6.         //在实例方法中，this就表示当前的实例
  7.         //在构造函数中当前对象就是当前新建的那个对象
  8.         //可以通过this向新建的对象中添加属性
  9.         this.name = name,
  10.         this.age = age
  11.         console.log('构造函数')
  12.     }
  14.     bark(){
  15.         //在方法中可以通过this来表示当前调用方法的对象
  16.         console.log(this)
  17.         console.log('wangwangwang!')
  18.     }
  20. }
  21. const dog = new Dog('小黑',3)
  22. const dog2 = new Dog('小白',4)
  23. console.log(dog)
  24. console.log(dog2)

继承（extends）

  1. "use strict";
  2. (function () {
  3.     class Animal {
  4.         constructor(name, age) {
  5.             this.name = name;
  6.             this.age = age;
  7.         }
  8.         say() {
  9.             console.log('动物叫!');
  10.         }
  11.     }
  12.     /**
  13.      * Dog extends Animal
  14.      *      此时Animal被称为父类，Dog被称为子类
  15.      *      使用继承后，子类将会拥有父类所有的方法和属性
  16.      *      通过继承可以将多个类中共有的代码写在一个父类中
  17.      *          这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
  18.      *          如果希望在子类中添加一些父类中没有的属性或方法直接加就行
  19.      *      如果在子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法
  20.      *          这种子类覆盖掉父类方法的形式我们称之为 重写
  21.      */
  22.     //定义一个类
  23.     //使Dog类继承 Animal类
  24.     class Dog extends Animal {
  25.         run(){
  26.             console.log(`${this.name}在跑`)
  27.         }
  28.         say(){
  29.             console.log('汪')
  30.         }
  31.     }
  32.     //定义一个类
  33.     class Cat extends Animal {
  34.         say(){
  35.             console.log('喵')
  36.         }
  37.     }
  39.     const dog = new Dog('旺财', 3);
  40.     const cat = new Cat('咪咪', 9);
  41.     console.log(dog)
  42.     console.log(cat);
  43.     dog.say()
  44.     cat.say()
  45.     dog.run()
  46. })()

super

  1. (function(){
  2.     class Animal{
  3.         name:string
  4.         constructor(name:string){
  5.             this.name = name
  6.         }
  7.         say(){
  8.             console.log('动物叫!')
  9.         }
  10.     }
  12.     class Dog extends Animal{
  14.         age:number
  15.         constructor(name:string,age:number){
  16.             //如果在子类中写了构造函数，在子类的构造函数中必须要对父类的够赞函数进行调用
  17.             super(name) //调用父类的构造函数
  18.             this.age=age
  19.         }
  21.         say(){
  22.             //在类的方法中super就表示当前类的父类
  23.             super.say()
  24.             console.log('999')
  25.         }
  26.     }
  27.     const dog = new Dog('旺财',3)
  28.     dog.say()
  29. })()

抽象类（sbstract）

以abstract开头的类是一个抽象类
抽象类和其他类区别不大，只是不能用来创建对象
抽象类就是专门被用来继承的类
抽象类中可以添加抽象方法
抽象方法使用abstract开头，没有方法体
抽象方法只能定义在抽象类，子类必须对抽象方法进行重写

  1. (function(){
  4.     /**
  5.      * 以abstract开头的类是一个抽象类
  6.      *      抽象类和其他类区别不大，只是不能用来创建对象
  7.      *      抽象类就是专门被用来继承的类
  8.      * 
  9.      *      抽象类中可以添加抽象方法
  10.      */
  11.    abstract class Animal{
  12.         name:string
  13.         constructor(name:string){
  14.             this.name = name
  15.         }
  16.         //定义一个抽象方法
  17.         //抽象方法使用abstract开头，没有方法体
  18.         //抽象方法只能定义在抽象类，子类必须对抽象方法进行重写
  19.         abstract say():void
  20.     }
  21.     class Dog extends Animal{
  22.         say(){
  24.         }
  25.     }
  26.     const dog = new Dog('旺财')
  27.     dog.say()
  28. })()

接口（interface,implements）

接口来定义一个类结构，用来定义一个类中应该包含那些属性和方法
同时接口也可以当成类声明去使用
接口可以定义类的时候去限制类的结构
接口中所有的属性都不能有实际的值
接口定义对象的结构，而不考虑实际值
在接口中所有的方法都是抽象方法
定义类时，可以使类去实现一个接口
实现接口就是使类满足接口的需求

  1. (function(){
  3.     //描述一个对象的类型
  4.     type myType ={
  5.         name:string,
  6.         age:number
  7.     }
  8.     /**
  9.      * 接口来定义一个类结构，用来定义一个类中应该包含那些属性和方法
  10.      *      同时接口也可以当成类声明去使用
  11.      */
  13.     interface myInterface{
  14.         name:string,
  15.         age:number
  16.     }
  18.     interface myInterface{
  19.         gender:string
  20.     }
  21.     const obj:myInterface ={
  22.         name:'123',
  23.         age:123,
  24.              gender:'男'
  25.     }
  27.     /**
  28.      * 接口可以定义类的时候去限制类的结构
  29.      * 接口中所有的属性都不能有实际的值
  30.      * 接口定义对象的结构，而不考虑实际值
  31.      *  在接口中所有的方法都是抽象方法
  32.      */
  34.     interface myInter{
  35.         name:string
  36.         say():void
  37.     }
  39.     /**
  40.      * 定义类时，可以使类去实现一个接口
  41.      *  实现接口就是使类满足接口的需求
  42.      */
  43.     class myClass implements myInter{
  44.         name:string
  45.         constructor(name:string){
  46.             this.name = name
  47.         }
  48.         say(){
  49.             console.log('hello')
  50.         }
  51.     }
  53. })()

属性的封装（public，private，protected）

  1. (function () {
  2.     class Person {
  3.         //TS可以在属性前添加属性的修饰符
  4.         /**
  5.          * public 修饰的属性可以在任意位置访问（修改）是默认值
  6.          * private 私有属性，私有属性只能在类内部进行修改
  7.          *      通过在类中添加方法使得私有属性可以在外部被访问
  8.          * protected 受保护的属性，只能在当前类的子类中访问（修改）
  9.          */
  10.         private name: string
  11.         private age: number
  12.         constructor(name: string, age: number) {
  13.             this.name = name
  14.             this.age = age
  15.         }
  16.         /**
  17.          * getter方法用来读取属性
  18.          * setter方法用来设置属性 
  19.          *      他们称为属性的存取器
  20.          * 
  21.          */
  22.         getName() {
  23.             return this.name
  24.         }
  25.         setName(value: string) {
  26.             this.name = value
  27.         }
  28.         getAge() {
  29.             return this.age
  30.         }
  31.         setAge(value: number) {
  32.             if (value >= 0) {
  33.                 this.age = value
  34.             }
  35.         }
  37.         //ts中设置getter方法的方式
  38.         get _name(){
  39.             console.log('get name()!!!!')
  40.             return this.name
  41.         }
  42.         set _name(value: string){
  44.                 this.name = value
  46.         }
  47.     }
  49.     const pre = new Person('zz', 13)
  51.     /**
  52.      * 现在属性是在对象中设置的，属性可以任意的被修改
  53.      *      属性可以任意被修改将会导致对象中的数据变得非常不安全
  54.      */
  55.     //console.log(pre.name)//报错
  56.     pre.setName('xx')
  57.     pre.setAge(-10)
  58.     pre._name = 'yy'
  59.     console.log(pre._name)
  63.     class A{
  64.        protected num:number
  65.         constructor(num:number){
  66.             this.num = num
  67.         }
  68.     }
  69.     class B extends A{
  70.         test(){
  71.             console.log(this.num)
  72.         }
  73.     }
  74.     const b = new B(213)
  75.     //console.log(b.num) //报错
  78.     // class C{
  79.     //     name:string
  80.     //     age:number
  81.     //     constructor(name:string,age:number){
  82.     //         this.name = name
  83.     //         this.age = age
  84.     //     }
  85.     // }
  87.     class C{
  88.         //可以直接将属性定义在构造函数中
  89.         constructor(public name:string,public age:number){
  91.         }
  92.     }
  93.     const c = new C('xx',12)
  96. })()