TypeScriptはオブジェクト指向のJavaScriptであり、そのクラスは生成するオブジェクトに共通するプロパティやメソッドを記述します。

従来のJavaScriptプログラムでは、再利用可能なコンポーネントを作成するために関数とプロトタイプベースの継承を使用しますが、オブジェクト指向のアプローチに慣れているプログラマにとっては厄介な場合があります。

ECMAScript 6としても知られるECMAScript 2015から、JavaScriptプログラムはこのクラスベースのオブジェクト指向アプローチを使用できるようになります。開発者は TypeScript でこれらの機能を使用することができるようになり、コンパイルされた JavaScript はすべての主要なブラウザとプラットフォームで動作するようになります！

コンストラクターとは何ですか？

コンストラクタは特別なメソッドです。コンストラクタは主にオブジェクトの生成時に初期化、つまりオブジェクトのメンバに初期値を代入するために使用され、オブジェクトの生成文では常に new 演算子とともに使用されます。TypeScript のコンストラクタはキーワード constructor で実装されています。this "キーワードを使用することで、現在のクラス本体のプロパティやメソッドにアクセスすることができます。

インスタンス化とは何ですか？

一般的に、クラスを作成した後はプロパティやメソッドを直接参照することはできず、クラスをインスタンス化する、つまりオブジェクトを作成する必要があります。インスタンス化した後は、プロパティやメソッドにアクセスするために"."を使ってプロパティやメソッドにアクセスできます。

I. クラスの定義

ES5コンストラクタ

function Cat(name,color) {
 this.name=name;
 this.color=color;
 //this.type=' ';
 //this.eat = function(){
 // console.log(' ')
 // }
}
// 
Cat.prototype.type=' ';
Cat.prototype.eat = function(){
 console.log(' ')
};
var c1 = new Cat(' ',' ');

ES6コンストラクタ

ES6は、オブジェクトのテンプレートとしてClassという概念を導入することで、従来の言語に近い書き方を提供します。classキーワードで、クラスを定義することができます。

コンストラクタ: クラスのコンストラクタで、クラスがインスタンス化されたときに一度だけ呼び出されます。

class Cat {
 constructor(name,color){
 this.name=name;
 this.color=color;
 }
 eat(){
 console.log(' ')
 }
};
var c2 = new Cat(' ',' ');

TSのコンストラクタ、型を追加する必要があります。

Catクラスを宣言します。このクラスには、name,colorという属性、コンストラクタ、eatメソッドの4つのメンバがあります。

class Cat {
 name:string;
 color:string;
 constructor(name:string,color:string){ //コンストラクタ クラスをインスタンス化するときに起動されるメソッド。
 this.name=name;
 this.color=color;
 }
 eat(){
 console.log(' ')
 }
};
var c2 = new Cat(' ',' ');
c2.eat();

最後の行では、Catクラスのインスタンスがnewを使って生成されています。 定義されたコンストラクタを呼び出し、Cat型の新しいオブジェクトを作成し、コンストラクタを実行して初期化します。

継承

tsの継承 extends, super

TypeScriptでは、一般的なオブジェクト指向のパターンを使用することができます。 クラスベースのプログラミングにおける最も基本的なパターンの1つは、継承を使用して既存のクラスを拡張できるようにすることです。

class Animal{ 
 name:string;
 color:string;
 constructor(name:string,color:string){
 this.name = name;
 this.color = color;
 }
 say(){
 console.log('肉を食べるのが好き');
 }
}
class Dog extends Animal{
 weight:string;
 constructor(name:string,color:string){
 super(name,color); //親クラスのコンストラクタとメソッドを呼び出すキーワード
 this.weight = '456'
 }
}
var dog02 = new Dog(' ',' ');

この例では、クラスが基底クラスからプロパティとメソッドを継承するという、最も基本的なレベルでの継承を示しています。 クラスは基底クラスからプロパティとメソッドを継承します。

派生クラスはしばしばサブクラスと呼ばれ、基底クラスはしばしば親クラスと呼ばれます。

派生クラスには、super() と呼ばれるコンストラクタがあります。つまり、コンストラクタの this 属性にアクセスするには、super() を呼び出して、基底クラスのコンストラクタを実行する必要があります。

クラスの静的プロパティ

静的メンバは、クラスのインスタンス上ではなく、クラス自体に存在します。

静的属性は、キーワード static で宣言され、インスタンス化を必要とせず、クラスから直接呼び出すことができます。

class Animal{
 static uname=' ';
 static eat(){
 console.log(' ')
 }
 run(){
 console.log(' ');
 }
}
var a = new Animal() 
a.eat() //error
Animal.eat();

属性とメソッドの変更

ts における 3 つの修飾子 プロパティとメソッドの変更 public private protected

• public public は、現在のクラス内、サブクラス内、クラス外からアクセス可能です。
• protected protected型
  
  現在のクラスとサブクラスの内部ではアクセスできますが、クラスの外部ではアクセスできません。
• private 現在のクラス内部ではアクセス可能ですが、サブクラスやクラス外部からはアクセスできません。
• コンストラクタ: クラスのコンストラクタで、クラスがインスタンス化されたときに一度だけ呼び出されます。

修飾子のない属性はデフォルトで公開されます。

 class Animal_01{
 // public username:string; 
 //Public クラス内部、サブクラス、クラス外部へアクセスできる。
 // protected username:string; 
 //保護された型は、現在のクラスとサブクラスの内部ではアクセスできるが、クラスの外部ではアクセスできない。
 private username:string; 
 //プライベート：現在のクラスの内部ではアクセスできるが、サブクラスやクラスの外部ではアクセスできない。
 
 constructor(username:string){
 this.username = username;
 this.innerCall();
 }
 public eat():string{
 return ' ';
 }
 innerCall(){
 console.log('クラス内のユーザー名にアクセスする：'+this.username) //クラス内部
 }
 }
 class Dog_01 extends Animal_01 {
 age:string;
 constructor(username:string){
 super(username);
 this.age= '124'
 }
 action():string{
 console.log('サブクラス内のユーザー名にアクセスする:'+this.username)
 return this.username; //サブクラスのアクセスでは
 }
 }
var d1=new Dog_01(' ');
d1.action() // クラス外へのアクセス
console.log('クラス外のユーザー名にアクセスできる：'+d1.username); // クラス外へのアクセス

protected：クラス内部とそのサブクラスのみアクセス可能 private：クラス内部のみアクセス可能；

タイプスクリプトにおけるポリモーフィズム

ポリモーフィズム：親クラスが実装しないメソッドを定義し、それを継承したサブクラスに実装させる 各サブクラスはメソッドの表現が異なります。

ポリモーフィズムは継承

class Animal {
 name:string;
 constructor(name:string) {
 this.name=name;
 }
 eat(){ //具体的に何を食べるのか、わからない。?そのサブクラスを継承して実装する。
 console.log('食べ方')
 }
}
class Dog extends Animal{
 constructor(name:string){
 super(name)
 }
 eat(){
 return this.name+' '
 }
}
class Cat extends Animal{
 constructor(name:string){
 super(name)
 }
 eat(){
 return this.name+' '
 }
}

typescript抽象クラス

抽象クラスと抽象メソッドは abstract キーワードで定義されます。抽象クラスと抽象メソッドは、abstract キーワードで定義します。 抽象クラスの抽象メソッドには具体的な実装は含まれず、派生クラスで実装する必要があります。

抽象メソッドは抽象クラスの中にしか置けません 抽象クラスと抽象メソッドは、標準を定義するために使われます。 標準: Animal クラスは、そのサブクラスに eat メソッドを含めることを要求します。

// :
abstract class Animal{
 public name:string;
 constructor(name:string){
 this.name=name;
 }
 abstract eat():any; //抽象メソッドは具体的な実装を含まず、派生クラスで実装する必要がある。
 run(){
 console.log('その他のメソッドは実装されていない場合がある。')
 }
}
// var a=new Animal(' ') /*間違った書き方*/
class Dog extends Animal{
 //抽象クラスのサブクラスは、抽象クラスの抽象メソッドを実装しなければならない。
 constructor(name:any){
 super(name)
 }
 eat(){
 console.log(this.name+' ')
 }
}
var d=new Dog(' ');
d.eat();

名前空間

大量のコードがある場合、変数名の衝突を避けるために、似たような機能を持つ関数、クラス、インターフェイスなどを名前空間に入れることができます。 Java のパッケージや .Net の名前空間のように、TypeScript の名前空間はコードをラップし、外部からアクセスする必要があるオブジェクトだけを公開することができます。名前空間内のオブジェクトはexportキーワードによって公開されます。

名前空間とモジュールの違い

• 名前空間: 主にコードを整理し、名前の衝突を避けるために使用される内部モジュール。
• モジュール：tsの外部モジュールの略で、コードの再利用に重点を置いています。

namespace A{
 interface Animal {
 name: string;
 eat(): void;
 }
 export class Dog implements Animal {
 name: string;
 constructor(theName: string) {
 this.name = theName;
 }
 eat() {
 console.log(`${this.name} ドッグフードを食べる。`);
 }
 }
 export class Cat implements Animal {
 name: string;
 constructor(theName: string) {
 this.name = theName;
 }
 eat() {
 console.log(`${this.name} キャットフードを食べる。`);
 }
 } 
}
namespace B{
 interface Animal {
 name: string;
 eat(): void;
 }
 export class Dog implements Animal {
 name: string;
 constructor(theName: string) {
 this.name = theName;
 }
 eat() {
 console.log(`${this.name} ドッグフードを食べる。`);
 }
 }
 export class Cat implements Animal {
 name: string;
 constructor(theName: string) {
 this.name = theName;
 }
 eat() {
 console.log(`${this.name} キャットフードを食べる。`);
 }
 } 
}
var c=new B.Cat(' ');
c.eat();