vue.js 3.0およびtypeScriptは強(qiáng)力な組み合わせ

です

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

クラスベースのコンポーネントとタイプスクリプトの利點(diǎn)

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

パッケージで

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

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

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

typeScriptとvue.js

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

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

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

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

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

Vue TypeScript Projectを作成

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

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

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

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

npm install -g @vue/cli

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

を押した後、

vue create vue-typescript-demo

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

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

プロジェクトオプションを選択した後、次の畫(huà)面でクラススタイルのコンポーネント構(gòu)文を使用するかどうかを?qū)い亭蓼?。これに「はい」と言います。次に、「自?dòng)検出のためにポリフィル用のTypeScriptを使用してBabelを使用する」かどうかを?qū)い亭椁欷蓼?。これは、古いブラウザをサポートするプロジェクトにとって良い考えです。必要に応じて殘りの質(zhì)問(wèn)に答えると、インストールプロセスが開(kāi)始されます。

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

指示

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

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

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

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

npm install -g @vue/cli

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

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

クラス宣言は、

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

vue create vue-typescript-demo

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

データ屬性

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

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

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

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

@Component
class MyComponent extends Vue {}

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

@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}

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

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

メソッド

{
  data: () => ({
    todos: [],
  })
}

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

npm install -g @vue/cli

私の意見(jiàn)では、メソッド、データ屬性、および計(jì)算された屬性を宣言するための単純な構(gòu)文により、クラスベースのコンポーネントが元のオブジェクトベースのコンポーネントよりも執(zhí)筆と読み取りコンポーネントが優(yōu)れています。

デコレーター

さらに一歩進(jìn)んで、

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

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

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

@Prop

小道具構(gòu)成オブジェクトを

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

vue create vue-typescript-demo

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

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

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

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

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

@Component
class MyComponent extends Vue {}

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

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

上記のコードは、

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

@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}

イベントを放出します。

add-todo this.newTodo

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

概要

{
  data: () => ({
    todos: [],
  })
}

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

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

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

faq（faq）

TypeScriptとvue.jsを使用することの利點(diǎn)は何ですか？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上がTypeScriptでクラスベースのVue.jsアプリを書(shū)き始めますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。