ホームページ > ウェブフロントエンド > jsチュートリアル > 初心者向けのタイプスクリプト、パート4:クラス

初心者向けのタイプスクリプト、パート4:クラス

William Shakespeare
リリース: 2025-03-16 09:49:08
オリジナル
869 人が閲覧しました

初心者向けのタイプスクリプト、パート4:クラス

この一連のチュートリアルでは、タイプスクリプトを段階的に学習します。最初の部分では、タイプスクリプトを一時的に導入し、タイプスクリプトの作成に使用できるIDEを推奨します。 2番目の部分はデータ型に焦点を当て、3番目の部分ではTypeScriptインターフェイスの基本について説明します。

おそらくすでにご存知のように、JavaScriptはクラスとオブジェクト指向のプログラミングをネイティブにサポートしています。ただし、タイプスクリプトは、開発者がコードでクラスを使用できるように長い間許可されています。このコードは、すべての主要なブラウザで実行できるJavaScriptコードにコンパイルされます。このチュートリアルでは、TypeScriptのクラスについて学びます。彼らは彼らのES6のカウンターパートに似ていますが、より厳しいです。

ファーストクラスを作成します

基本から始めましょう。クラスは、オブジェクト指向プログラミングの基本的な部分です。クラスを使用して、特定のプロパティに基づいて行動できる特定のプロパティと機能を持つエンティティを表すことができます。 TypeScriptは、含まれるクラスの内外でアクセスできるプロパティと機能を完全に制御できます。クラスの作成方法の基本的な例を次に示します。

コンストラクターがgetnameに似てgetことに気づいたかもしれませんreadonly明示的に指定されていない場合、セッターのパラメータータイプは、ゲッターの返品タイプから推測されます。 TypeScript 4.3から始めて、Getterが返したタイプとは異なるタイプを受け入れるセッターを使用できます。

インターフェイスを使用してクラスを実装します

TypeScriptインターフェイスに関する以前のチュートリアルでは、コードで使用するさまざまなオブジェクトの構造を指定するためにインターフェイスが基本的に使用されることを学びました。ここで、以前に宣言されたインターフェイスに基づいてクラスを実装する方法を学びます。

インターフェイスipoint {
    X:番号;
    Y:番号;
    位置(x:number、y:number):void
}

インターフェイスirectangleはipointを拡張します{
    幅:番号;
    長さ:番号;
    領域(幅:番号、長さ:数):番号
}

クラスポイントはipointを実装しています{
    X:番号;
    Y:番号;

    コンストラクター(x:number、y:number){
        this.x = x;
        this.y = y;
    }

    position():void {
        console.log( `ポイントは($ {this.x}、$ {this.y})。`)です。
    }
}

クラス長方形はirectangleを実装します{
    幅:番号;
    長さ:番号;
    X:番号;
    Y:番号;

    Constructor(x:number、y:number、width:number、length:number){
        this.x = x;
        this.y = y;
        this.width = width;
        this.length = length;
    }

    area():number {
        this.width * this.length;
    }

    position():void {
        console.log( `長方形は($ {this.x}、$ {this.y})。`)にあります。
    }
}

mypoint = new Point(10、20);

myRect = new Rectangle(0、0、20、30);

mypoint.position();

myrect.position();

console.log(myrect.area());
ログイン後にコピー

前のチュートリアルと同じように、 IRectangleインターフェイスを作成しました。ここでの追加の変更は、インターフェイスに関数宣言を追加することです。

IRectangle 、これらの4つのプロパティとその位置を出力し、その領域を表示する2つの方法を持つことを意味します。

要約します

このチュートリアルでは、TypeScriptのクラスの基本を紹介しようとしています。最初に、人の名前をコンソールに印刷する非常に基本的なPersonクラスを作成しました。その後、 privateキーワードを学習します。これは、プログラムの任意の時点でクラスのメンバーにアクセスするのを防ぐために使用できます。

最後に、継承された基本クラスを使用してコード内のさまざまなクラスを拡張する方法を学びました。公式ドキュメントでクラスの詳細をご覧ください。

以上が初心者向けのタイプスクリプト、パート4:クラスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート