ts的class类的使用与继承, es6新增的class类

前言：

        ts的class类的使用与继承, es6新增的class类。

一、es6新增的 class 类

        在ES6中为了更好的把js设计成面向对象的语言的语法特征，提出了class 类，class的本质是函数，类不可重复声明，类定义不会被提升，让js更像面向对象编程的语法。

        类名建议大写，在严格要求下必须大写。

        声明类：class 类名 {}   

        匿名类： var fn = class {}

        类的实例为对象，对象三大特性：封装、继承与多态。

1、封装

class Animal{
    constructor(name){ //接收参数
        this.name = name
    }
    run(){
        console.log( this.name+'可以跑起来！')
    }
}
 
console.log(111);
const dog = new Animal('小黑')
dog.run()

2、继承

1、使用extends关键字实现继承

2、子类可以继承父类中所有的方法和属性

3、子类只能继承一个父类（单继承），一个父类可以有多个子类

4、子类的构造方法中必须有super()来指定调用父类的构造方法，并且位于子类构造方法中的第一行

5、子类中如果有与父类相同的方法和属性，将会优先使用子类的（覆盖）

class Dog extends Animal{
    bark(){
        return `${this.name} 是一只狗`
    }
}
console.log(222);
const mazi = new Dog('王麻子')
mazi.run()
console.log(mazi.bark)

3、多态

class JinMao extends Dog{
    static categories = ['manmal']  //static-修饰符，静态属性
 
    constructor(name){                    
        super(name)  //子类构造函数中必须用super()
        consoe.log(this.name)
    }
 
    run(){
        return 'memow'+super.run()  //调用父类的run函数
    }
} 
 
console.log(333);
const maomao = new JinMao('maomao')
maomao.run()

//static 定义的变量和方法，可以直接用  方法名+点+变量/方法名()   调用
console.log(  JinMao.categories  );

打印效果：

二、ts新增的 class的方法

ts中的class又增加了三种修饰符，用来给类中的属性与方法设置权限，更易管理。

• public：修饰的属性与方法是共有的，默认；
• private：修饰的属性和方法是私有的，只能在class里使用，通过该类new出来的实例、继承的子类也不能使用；
• protected：修饰的属性与方法是受保护的，继承的子类可以使用。

1、public

class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

2、private

class Animal{
    private run(){
        return `${this.name} is running`
    }
}
 
const snake = new Animal()
console.log(snake.run())            //报错，run已变成私有方法，不能被使用

3、protected   继承的子类可以使用

class Animal {
  protected name;
}

class Cat extends Animal {
  constructor(name) {
    super(name);
    console.log(this.name);
  }
}

4、readonly 只读属性，

注意如果 readonly 和其他访问修饰符同时存在的话，需要写在其后面。

class Animal {
  readonly name;
}

let a = new Animal();
console.log(a.name); // Jack
a.name = 'Tom';   //无法修改

三、ts中的 interface接口

我们使用接口（Interfaces）来定义对象的类型,  接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）

接口声明只存在于编译阶段，在编译后生成的 JS 代码中不包含任何接口代码

普通接口的实现：

interface Person {
  name: String  //必传
  age?: Number  // ?:可传可不传
}

//调用1：格式必须和接口的格式一致，多属性，少属性都不行
let tom: Person = {
    name: 'Tom'
};

//调用2：
let tom: Person = {
    name: 'Tom',
    age: 25
};

接口的任意属性：[propName: string]

*一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集

interface Person {
    name: string  //确定属性，之前就是必传
    age?: number  //可传属性，之前就是不必传，使用任意属性以后，必传
    [propName: string]: string | number  //任意属性，加上以后，对象里面可以有任意多对象
    //[propName: string]: string  如果这样写会报错，因为 age的值是number
}

//调用1：格式必须和接口的格式一致，多属性，少属性都不行
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
}
//调用2
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male',
    aaa: '123'
}

接口的只读属性

注意，只读的约束存在于第一次给对象赋值的时候

interface Person {
    readonly id: number
    name: string
    age?: number
    [propName: string]: any
}

let tom: Person = { 
    id: 89757, // 初始化 对象赋值，是成功的
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527; //  再次赋值，会报错，因为id是只读属性

四、ts里面的  type  和  interface  的区别

1、区别

相同：

        都可以用来定义 对象 或者 函数 的结构，而严谨的来说，type 是引用，而 interface是定义

不同：

1、type (alias)类型别名，可以定义基础类型、联合类型或交叉类型。interface 接口，只能定义对象，

2、接口可以 extends、implements,从而扩展多个接口或类。 type没有扩展功能，只能交叉合并

3、定义两个相同名称的接口会合并声明，定义两个同名的 type 会出现异常。

4、type 在声明类型别名之后实际上是一个赋值操作，它需要将别名与类型关联起来。也就是说类型别名不会创建出一种新的类型，它只是给已有类型命名并直接进行引用。interface是定义了一个接口类型

// 1、定义声明不同
type Person = string
type animal = Dog | Cat
//type定义元组
interface Dog {
  name: string;
}
interface Cat {
  age: number;
}
type animal = [Dog, Cat];

//接口定义对象
interface Person {
    name: string
}



// 2、定义两个相同名称的接口会合并声明，定义两个同名的 type 会出现异常
interface Person {
  name: string;
}
interface Person {
  age: number;
}
// 合并为:interface Person { name: string age: number}

type User = {
  name: string;
};
type User = {
  age: number;
};
// 声明重复报错：标识符“User”重复。

2、interface  的继承

接口可以 extends、implements ，来实现继承

//extends 可以实现class继承，也可以实现接口继承
interface Person {
  name: string;
}
interface User extends Person {
  age: number;
}



interface Animal {
    food: string
    eat(food: string): void
}
// Cat类实现Animal接口的时候需要能够兼容Animal接口才行，否则会报错。
class Cat implements Animal {
    food: string = 'fish';
    eat(food: string): void {}
}

3、type 使用交叉类型&来合并不同成员的类型，实现一个类似继承的效果

type Person = { name: string }; //1、type定义对象
type User = Person & { age: number }; //2、type合并两个对象

interface Person {
  name: string;
}
type User = { age: number } & Person; //3、type合并对象和接口