TypeScriptでクラスベースのVue.jsアプリを書き始めます

vue.js 3.0およびtypeScriptは強力な組み合わせ

です

VUE.JS 3.0は、クラスベースのコンポーネントのネイティブサポートやより良いタイプの推論を含む、タイプスクリプトユーザーに改善されたサポートをもたらします。ただし、VueのコマンドラインツールであるVue CLIを使用して、Vue CLIを使用してVueアプリケーションの書き込みを開始できます。

クラスベースのコンポーネントとタイプスクリプトの利点

Vue.jsのクラスベースのコンポーネントは、タイプのチェックと保守性をより適切に提供するTypeScriptクラスを使用して記述できます。これらのクラスは、

パッケージで

デコレータを使用して宣言できます。 vue-property-decorator @Component

パッケージによって提供される他のデコレーターは、クラスベースのコンポーネントをさらに強化できます。これらには、プロップをクラス属性として宣言するための

、クラスメソッドからイベントを放出するためのvue-property-decorator、およびオブザーバーを作成するための@Propが含まれます。 @Emit @Watch

typeScriptとvue.js

の利点 タイプスクリプトは、エラーの早期検出、より良いオートコンプリート、ナビゲーション、リファクタリングサービスの静的タイプチェック、複雑なアプリケーションライブラリ向けのより構造化された拡張コードの提供など、複数の利点を持つVue.jsと組み合わせて使用​​されます。

昨年9月、エヴァン・ユー（Vue.jsの作成者）は、次の主要バージョンの図書館の計画を発表しました。 VUE 3.0は、クラスベースのコンポーネントのネイティブサポートや、コードを作成する際のタイプ推論のより良いサポートなど、タイプスクリプトユーザーに改善されたエクスペリエンスをもたらします。

良いニュースは、TypeScriptを使用してVueアプリの作成を開始するために3.0（2019年第3四半期に予想）がリリースされるまで待つ必要がないことです。 VueのコマンドラインツールVue CLIは、Preconugured TypeScriptビルドツールを使用してプロジェクトを開始するオプションを提供し、VueコンポーネントをTypeScriptクラスとして記述できる公式にサポートされている

モジュールが含まれています。

vue-class-componentこの記事では、VueとTypescriptの基本に精通していると想定しています。今日の静的タイピングとクラスベースのコンポーネントの活用を開始する方法を見てみましょう。

Vue TypeScript Projectを作成

を作成します タイプスクリプトを始めるための障害の1つは、必要なビルドツールの構成です。ありがたいことに、Vue Cliは私たちのためにこの問題を解決しました。それを使用して、TypeScriptコンパイラがセットアップされて準備が整っているプロジェクトを作成できます。

新しいVUEプロジェクトの作成をサポートするためにTypeScriptを使用するプロセスを簡単に紹介しましょう。

ターミナル/コマンドラインから次のコマンドを実行します（およびnode.jsがインストールされていると仮定して）vue CLIをグローバルにインストールします。

次に、新しいプロジェクトを作成して、プロジェクト名を指定しましょう：

<code class="language-bash">npm install -g @vue/cli</code>

これは、インストールプロジェクトのサブフォルダーの名前でもあります。

を押した後、

<code class="language-bash">vue create vue-typescript-demo</code>

を入力した後、デフォルトのプリセットを選択するか、インストールするオプションを手動で選択するように求められます。

マニュアルオプションを選択すると、さらに一連のオプションが表示されます。必要なオプションはもちろんタイプスクリプトですが、Vuex固有のデコレーターを後で見るため、Vuexを選択することもできます。

プロジェクトオプションを選択した後、次の画面でクラススタイルのコンポーネント構文を使用するかどうかを尋ねます。これに「はい」と言います。次に、「自動検出のためにポリフィル用のTypeScriptを使用してBabelを使用する」かどうかを尋ねられます。これは、古いブラウザをサポートするプロジェクトにとって良い考えです。必要に応じて残りの質問に答えると、インストールプロセスが開始されます。

エディター/IDEサポートに関する

指示

多くのコードエディターとIDEがTypeScriptをサポートするようになりました。有料ソリューションでは、JetBrainsソフトウェア（Webstorm、Phpstormなど）は、VUEとTypeScriptの両方に優れたサポートを提供しています。無料の代替品をお探しの場合は、MicrosoftのVisual Studioコードをお勧めします。Vetur拡張機能と併せて、優れたオートコンプリートとタイプチェックを提供します。

クラスベースのコンポーネント

まず、クラスを使用してVueコンポーネントを作成する方法を見てみましょう。この機能はTypeScriptに限定されませんが、クラスベースのコンポーネントを使用すると、TSがより良いタイプチェックを提供するのに役立ちます。私の意見では、コンポーネントをより簡単に維持しやすくします。

構文を見てみましょう。前のセクションの手順に従って、Vue CLIを使用して新しいプロジェクトを作成した場合は、プロジェクトディレクトリに移動し、srcsubfolderに移動し、 app.vueを開きます。ここで興味があるのは、標準のVUEシングルファイルコンポーネント（SFC）と唯一の異なる部分であるため、<script></script>セクションです。

<code class="language-bash">npm install -g @vue/cli</code>

<script></script>タグ自体にはts属性がlangに設定されていることに注意してください。これは、ビルドツールと編集者がコードをTypeScriptとして正しく解釈するために非常に重要です。

クラスベースのコンポーネントを宣言するには、VUEを拡張するクラスを作成する必要があります（ここでは、vue-property-decoratorパッケージから直接インポートされます）。 vue

クラス宣言は、

デコレータ：@Componentから始める必要があります

<code class="language-bash">vue create vue-typescript-demo</code>

コンポーネントのコードでは、デコレーターがコンポーネント、プロップ、フィルターオプションを指定するために使用できるオブジェクトを受け入れることができることに気付いたかもしれません。 App.vue

データ属性

<code class="language-typescript">import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}</code>

オブジェクトベースのコンポーネントを宣言すると、コンポーネントのデータプロパティをデータオブジェクトの返品として宣言する必要がある関数に精通しています。

…クラスベースのコンポーネントの場合、データ属性を通常のクラス属性として宣言できます：

<code class="language-typescript">@Component
class MyComponent extends Vue {}</code>

コンピューティングプロパティ

<code class="language-typescript">@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}</code>

クラスをコンポーネントとして使用するもう1つの利点は、ゲッターメソッドを使用して、計算されたプロパティを宣言するためのクリーンな構文です。

同様に、セッターメソッドを使用して、書き込み可能な計算プロパティを作成できます。

メソッド

<code class="language-javascript">{
  data: () => ({
    todos: [],
  })
}</code>

コンポーネントメソッドは、クラスの方法として、同様に簡潔な方法で宣言できます。

<code class="language-bash">npm install -g @vue/cli</code>

私の意見では、メソッド、データ属性、および計算された属性を宣言するための単純な構文により、クラスベースのコンポーネントが元のオブジェクトベースのコンポーネントよりも執筆と読み取りコンポーネントが優れています。

デコレーター

さらに一歩進んで、

パッケージで提供される追加のデコレーターを使用できます。クラスベースのコンポーネントを作成するための6つの追加のデコレーターを提供します：vue-property-decorator

• @Emit
• @Inject
• @Model
• @Prop
• @Provide
• @Watch

最も便利だと思うかもしれない3つを見てみましょう。

@Prop

小道具構成オブジェクトを

デコレーターに渡す代わりに、@Propデコレーターを使用してプロップをクラスプロパティとして宣言できます。 @Component

<code class="language-bash">vue create vue-typescript-demo</code>

他のデコレーターと同様に、

は、タイプ、タイプ配列、オプションオブジェクトを含むさまざまなパラメーターを受け入れることができます。 @Prop

<code class="language-typescript">import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}</code>

上記のように、必要に応じてデコレーターと属性宣言を1行に完全に配置できることに注意してください。

<code class="language-typescript">@Component
class MyComponent extends Vue {}</code>

もう1つの便利なデコレーターは@Emitです。これにより、任意のクラスメソッドからイベントを発行できます。エミストされたイベントは、メソッドの名前（キャメルケース名はケバブケースに変換されます）を使用します。

メソッドが値を返す場合、値はイベントのペイロードとして発行され、メソッドに渡されたパラメーターが発行されます。 @Emit

上記のコードは、

の値のペイロードを使用して

<code class="language-typescript">@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}</code>

イベントを放出します。

add-todo this.newTodo

このデコレーターでオブザーバーを作成するのは非常に簡単です。観測されたプロパティの名前とオプションのオプションオブジェクトの2つのパラメーターを受け入れます。 @Watch

概要

<code class="language-javascript">{
  data: () => ({
    todos: [],
  })
}</code>

この記事では、TypeScriptを使用してVueアプリケーションの作成を開始することは必ずしも面倒ではないことを示しています。 CLIを使用して新しいプロジェクトを開始することにより、必要なビルドツールをすばやく設定できます。クラスベースのコンポーネントと追加のデコレーターのサポートを含めると、すぐに簡潔で慣用型タイプスクリプトを書くことができます！

ゼロからvue.jsを学びたいですか？ SitePoint Premiumを使用して、基本、プロジェクト、ヒント、ツールなどをカバーするVue Booksの完全なコレクションを取得します。今すぐ1か月あたりわずか9ドルで参加するか、7日間の無料トライアルをお試しください。

TypeScriptを使用したクラスベースのvue.jsに関する

faq（faq）

TypeScriptとvue.jsを使用することの利点は何ですか？

TypeScriptは静的タイピングを提供します。これは、大規模なアプリケーションを開発するときに大きな利点になる可能性があります。開発プロセスの早い段階でエラーをキャッチするのに役立ち、コードをより堅牢で維持しやすくします。また、タイプスクリプトは、開発プロセスをより効率的にするために、より良い自動完成、ナビゲーション、再構成サービスを提供します。 Vue.jsで使用すると、TypeScriptを使用すると、より構造化された拡張可能なコードベースが可能になり、複雑なアプリケーションの管理と開発が容易になります。

TypeScriptを使用してVue.jsプロジェクトをセットアップする方法は？

vue.jsプロジェクトをtypeScriptで設定するには、いくつかのステップが含まれます。まず、Vue CLIがインストールされていない場合は、インストールする必要があります。次に、Vue CLIを使用して新しいプロジェクトを作成し、作成プロセス中にTypeScriptを機能として選択します。 Vue CLIは、TypeScript構成を設定します。その後、TypeScriptを使用してVueコンポーネントの書き込みを開始できます。

vue.jsのクラスベースのコンポーネントは何ですか？

vue.jsのクラスベースのコンポーネントは、ES6クラスを使用してコンポーネントを定義する方法です。このアプローチにより、特にオブジェクト指向プログラミングのバックグラウンドの開発者にとって、コンポーネントが読みやすくなり、理解しやすくなります。クラスベースのコンポーネントは、TypeScriptでもうまく機能し、静的タイプやインターフェイスなどのTypeScriptの機能を活用できます。

vue.jsでクラスベースのコンポーネントを定義するためにTypeScriptを使用する方法は？

vue.jsでTypeScriptを使用してクラスベースのコンポーネントを定義するには、vue-class-component

クラスベースのコンポーネントでvue.jsディレクティブを使用できますか？

はい、クラスベースのコンポーネントでvue.jsディレクティブを使用できます。構文は、通常のVUEコンポーネントと同じです。

、v-model、v-if、およびテンプレートでその他の命令を使用できます。 v-for

クラスベースのコンポーネントで小道具を使用する方法は？

クラスベースのコンポーネントでは、

デコレータを使用して小道具を定義できます。このデコレーターを使用すると、プロップのタイプと、それが必要かどうかを指定できます。 @Prop

クラスベースのコンポーネントで計算されたプロパティを使用する方法は？

クラスベースのコンポーネントでは、計算されたプロパティをクラス内のゲッターメソッドとして定義できます。ゲッターメソッドの結果は、その依存関係が変更された場合にのみキャッシュされ、再計算されます。

クラスベースのコンポーネントでオブザーバーを使用する方法は？

クラスベースのコンポーネントでは、

デコレータを使用してオブザーバーを定義できます。このデコレーターを使用すると、観察する属性と、属性が変更されたときに呼び出される方法を指定できます。 @Watch

クラスベースのコンポーネントでMixinを使用できますか？

はい、クラスベースのコンポーネントでMixinを使用できます。 Mixinをクラスとして定義し、

デコレータを使用してコンポーネントに含めることができます。 @Mixins

vue.jsの組み合わせAPIをTypeScriptと使用する方法は？

vue.jsの組み合わせAPIは、TypeScriptでうまく機能します。リアクティブなデータと機能をsetupメソッド内で定義し、TypeScriptを使用してタイプを設定できます。これにより、TypeScriptの静的なタイピングとオートコンプリート機能を活用して、コードをより堅牢で開発しやすくすることができます。

以上がTypeScriptでクラスベースのVue.jsアプリを書き始めますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。