es6 の新しいクラス クラスである ts クラス クラスの使用と継承

序文：

        ES6の新しいクラスクラス、TSのクラスクラスの使用と継承。

1. es6 の新しいクラス class

        ES6では、jsをオブジェクト指向言語の文法機能にうまく設計するために、クラスクラスが提案されています.クラスの本質は関数です.クラスは繰り返し宣言できず、クラス定義は昇格されません. 、js をオブジェクト指向プログラミングのようにします。

        クラス名は大文字にすることをお勧めします。厳密な要件の下では大文字にする必要があります。

        クラスを宣言: クラス クラス名 {}   

        匿名クラス: var fn = class {}

        クラスのインスタンスはオブジェクトであり、オブジェクトにはカプセル化、継承、ポリモーフィズムという3 つの主要な特徴があります。

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. サブクラスは 1 つの親クラスからのみ継承でき (単一継承)、親クラスは複数のサブクラスを持つことができます。

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  );

印刷効果:

2. ts の新しいクラス メソッド

ts のクラスは、さらに 3 つの修飾子を追加します。これらは、管理しやすいクラスの属性とメソッドのアクセス許可を設定するために使用されます。

• public: 変更されたプロパティとメソッドはデフォルトで共有されます。
• private: 変更されたプロパティとメソッドはプライベートであり、クラスでのみ使用でき、このクラスの新しいインスタンスまたは継承されたサブクラスでは使用できません。
• protected: 変更されたプロパティとメソッドは保護され、継承されたサブクラスで使用できます。

1、公開

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、プライベート

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

3. 保護された継承されたサブクラスは使用できます

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';   //无法修改

3、ts のインターフェイス インターフェイス

オブジェクトの型を定義するためにインターフェイス (Interfaces) を使用します。インターフェイス (Interfaces) は非常に重要な概念であり、動作の抽象化であり、具体的にどのように動作するかはクラス (クラス) によって実装される必要があります。

インターフェイス宣言はコンパイル フェーズにのみ存在し、コンパイル後に生成される 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是只读属性

4. ts のタイプとインターフェースの違い

1.違い

同じ：

オブジェクト または 関数の構造        を定義するために使用できます  。厳密に言えば、型は参照です interfaceが定義です

違う：

1. タイプ (エイリアス) タイプ エイリアス。基本タイプ、ジョイント タイプ、またはクロス タイプを定義できます。インターフェイス インターフェイス、オブジェクトのみを定義できます。

2. インターフェースは拡張および実装できるため、複数のインターフェースまたはクラスを拡張できます。タイプには拡張機能がなく、クロスマージのみ可能です

3. 同じ名前で 2 つのインターフェイスを定義すると宣言がマージされ、同じ名前で 2 つの型を定義すると例外が発生します。

4. type は実際には型 alias を宣言した後の代入操作であり、別名を 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. インターフェースの継承

インターフェイスは、継承を実現するために拡張および実装できます

//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 は cross 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合并对象和接口