Vue プロジェクトで TypeScript クラスを適用する方法

Vue プロジェクトで TypeScript クラスを適用する方法

1. はじめに

TypeScriptは、vue によってリリースされた公式ライブラリであるvue-class-componentライブラリに基づいており、 classを使用してvue単一ファイル コンポーネントを開発することをサポートしています。

主な機能は次のとおりです。

  • methodsクラスのメンバーメソッドとして直接宣言できる
  • 計算プロパティはクラスのプロパティアクセサとして宣言できる
  • 初期化されたdataクラス属性として宣言できる
  • datarender 、およびすべてのVueライフサイクルフックは、クラスメンバーメソッドとして直接使用できます。
  • その他のプロパティはすべてデコレータに配置する必要があります

2. 使用

vue-property-decoratorは主に以下のデコレータを提供します

  • @プロップ
  • プロップシンク
  • @モデル
  • @時計
  • @提供する
  • @注入
  • @ProvideReactive
  • @InjectReactive
  • @エミット
  • @参照
  • @Component (vue-class-component によって提供)
  • ミックスイン(vue-class-component によって提供)

1. @コンポーネント

Componentデコレータ このクラスをVueコンポーネントとしてマークするため、オプションが設定されていない場合でも省略できません。

namecomponentsfiltersdirectives 、およびカスタム プロパティを定義する必要がある場合は、次のようにComponentデコレータで定義できます。

'vue-property-decorator' から {Component,Vue} をインポートします。 
'@/components' から {componentA,componentB} をインポートします。 
 
 @成分({ 
    コンポーネント:{ 
        コンポーネントA、 
        コンポーネントB、 
    }, 
    ディレクティブ: { 
        集中: 
            // 挿入された命令の定義: function (el) { 
                el.フォーカス() 
            } 
        } 
    } 
}) 
デフォルトのクラスをエクスポートし、YourCompoent を Vue に拡張します{ 
    
} 


2. 計算、データ、方法

ここでは、コンポーネントのdatamethodsの属性はキャンセルされます。従来、データ戻りオブジェクトの属性とmethodsのメソッドは、クラスの属性とメソッドとしてクラス内に直接定義する必要がありました。

@成分 
デフォルトのクラスHelloDecoratorをエクスポートし、Vueを拡張します。 
    count: number = 123 // クラス属性は前のデータと同等です 
 
    add(): number { // クラスメソッドは前のメソッドと同じ this.count + 1 
    } 
 
    // 計算属性を取得する get total(): number { 
      this.count + 1 を返す 
    } 
 
    // 計算プロパティを設定する set total(param:number): void { 
      this.count = パラメータ 
    } 
} 

3. @props

コンポーネントは属性のデコレータを受け取ります。これは次のように使用されます。

vue-property-decorator から {Component,Vue,Prop} をインポートします。 
 
@成分 
デフォルトのクラスをエクスポートし、YourComponent を Vue に拡張します { 
    @Prop(文字列) 
    propA: 文字列; 
     
    @Prop([文字列,数値]) 
    propB:文字列|数値; 
     
    @Prop({ 
     型: 文字列、// 型: [文字列、数値] 
     default: 'デフォルト値', // 通常は文字列または数値 
      // オブジェクトまたは配列の場合。デフォルト値はファクトリー関数から返されます // default: () => { 
      // ['a','b'] を返す 
      // } 
     必須: true、 
     バリデータ: (値) => { 
        戻る [ 
          「進行中」、 
          「落ち着いた」 
        ].indexOf(値) !== -1 
     } 
    }) 
    propC: 文字列; 
} 


4. @ウォッチ

これは実際には Vue のリスナーであり、次のようになります。

'vue-property-decorator' から { Vue, Component, Watch } をインポートします。 
 
@成分 
デフォルトのクラスをエクスポートし、YourComponent を Vue に拡張します { 
  @Watch('子') 
  onChildChanged(値: 文字列、古い値: 文字列) {} 
 
  @Watch('person', { 即時: true, ディープ: true }) 
  onPersonChanged1(val: Person、oldVal: Person) {} 
 
  @Watch('人') 
  onPersonChanged2(val: Person、oldVal: Person) {} 
} 


5. @エミット

vue-property-decoratorによって提供される@Emitデコレータは、次のように Vue のイベントの$emitトリガーを置き換えます。

'vue-property-decorator' から {Vue, Component, Emit} をインポートします。 
    @成分({}) 
    デフォルトのクラスをエクスポートし、Some extends Vue{ 
        マウントされた(){ 
            this.$on('emit-todo', 関数(n) { 
                コンソール.log(n) 
            }) 
            this.emitTodo('world'); 
        } 
        @エミット() 
        出力Todo(n: 文字列){ 
            コンソールにログ出力します。 
        } 
    } 

結論

上記のtypescript版のvue classの構文は、通常のjavascript版とはかなり異なっていることがわかります。クラスとデコレータは多くの場所で使用されていますが、実際には本質は同じです。継続的に書くことによってのみ、それを習得することができます。

VueプロジェクトでTypeScriptを適用する方法についてはこれで終わりです。Vue プロジェクトでTypeScript適用する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript 列挙型
  • TypeScript の基本型の紹介
  • TypeScriptの列挙型を詳しく説明する
  • TypeScript における型保護の詳細な説明
  • TypeScriptの型保護メカニズムについての簡単な説明
  • TypeScript のクラス

<<:  Linuxのpasswdコマンドの使用

>>:  MySQL マスタースレーブレプリケーションの詳細な分析

推薦する

JS の 6 つの継承方法とその長所と短所

目次序文プロトタイプチェーン継承コンストラクタの継承組み合わせ継承(プロトタイプチェーン継承とコンス...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

JavaScriptはすべての選択と選択解除の操作を実装します

この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...

MySQL デュアルマシン ホットスタンバイ実装ソリューション [テスト可能]

目次1. コンセプト2. 環境の説明3. マスタースレーブホットスタンバイ実装1. コンセプト1. ...

MySQL 高可用性クラスタの展開とフェイルオーバーの実装

目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...

CentOS7.8 に mysql 8.0.20 をインストールするための詳細なチュートリアル

1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...

Dockerの一般的なコマンドとヒントのまとめ

インストールスクリプトUbuntu / CentOS Debian のインストールに問題があるようで...

MySQLで自動作成時間と変更時間を設定する方法の例

この記事では、MySQL の自動作成時刻と変更時刻を設定する方法について説明します。ご参考までに、詳...

MySQLトリガーの詳細な説明と簡単な例

MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...

サブセットかどうかを判断するためのMySQLメソッドの手順

目次1. 問題2. 解決策オプション1:オプション2: 1. 問題この話は、エラーと脱落率を照会する...

Nginx 正規表現の詳細な説明

Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバーであり、IM...

Linux システムで MySQL データベースの解凍バージョンをインストールして構成する方法

1. ファイルを現在のディレクトリに解凍しますコマンド: tar -zxvf mysql....ta...

MySQLのROUND関数の丸め演算における落とし穴の分析

この記事では、MySQL の ROUND 関数を使用した丸め操作の落とし穴を例を使って説明します。ご...

UA による Web サイトのクロールを防ぐ Nginx のクローラー対策戦略

クローラー対策ポリシー ファイルを追加しました: vim /usr/www/server/nginx...

HTML タグのリストと使用方法

HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...