Vue.js序章TypeScriptは、Microsoftによって作成されたJavaScriptスーパーセットであり、緩く型付けされた言語を厳密に型付けされた言語に変換します。これは、オプションの型宣言を含むECMAScript6として要約できます。Vue.jsの作成者であるEvanYouは、Vue.js3.0のコードベースは完全にTypeScriptで書き直されると述べています。2.0アプリケーションを生成し、単一ファイルコンポーネント(SFC)を構築します。前提条件この記事をフォローするには、次のものが必要です。Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。Vue.jsプロジェクトのセットアップおよび単一ファイルコンポーネントにある程度精通している。TypeScriptの規則にある程度精通している。v3.9.3、および@vue/cliv4.5.0で検証されました。3+を使用すると、TypeScriptがすでに構成されている新しいプロジェクトを生成できます。使用すると、プロジェクト構成の入力を求められます。このチュートリアルの目的のために、構成には以下が必要です。features選択プロンプトで、TypeScriptを選択します。TypeScript次のプロンプトに答えます。syntax?というプロンプトも表示されます。EvanVue3.0コアライブラリのクラススタイル構文を完全に放棄しました。これは一般的な選択肢ですが、このチュートリアルでは、いいえを選択します。クラススタイルのコンポーネントを使用したプロジェクトを検討する場合は、Vue.jsとTypeScriptを使用したクラスベースのコンポーネントの作成を参照してください。「TypeScript」を選択すると、いくつかのことが行われます。/cli-plugin-typescriptが自動的に追加されます。main.jsをmain.tsに置き換えます。shims-tsx.d.ts、shims-vue.d.tsも追加されます。注:すでにVueプロジェクトを作成していて、それにTypeScriptサポートを追加したい場合は、次の方法で追加できます。typescriptコマンドラインからVueプロジェクトを生成した後、shims-vue.d.tsファイルに気付いたかもしれません。それが宣言ファイル(.d.ts)です。宣言ファイルは、実行可能コードを含まないが、プロジェクトファイルの外部に存在するコードの説明を含むファイルです。これらは、TypeScriptインターフェース、タイプ、または宣言ファイルを含まないノードモジュールを使用する場合に役立ちます。ある意味で、これらのファイルの唯一の目的は、TypeScriptに外部コードの処理方法を指示することです。Vue}このコードエッセンシャルは、TypeScriptコンパイラ(およびIDE)に.vueファイルの処理方法を指示します。TypeScriptを使用してVueプロジェクトを作成したら、tsconfig.jsonを構成できます。ステップ2—TypeScriptコンパイラの設定チームまたはプロジェクトのニーズに合わせてTypeScriptを構成できます。多くのオプションがあり、tsconfig.jsonファイルを使用して有効または無効にできます。このファイルは、プロジェクトのルートディレクトリにある必要があります。これらのオプションを自由に試して、あなたとあなたのプロジェクトに最も役立つものを見つけてください。noImplicitAny、noImplicitThis、noImplicitReturnsは、ほとんどの状況で役立つ可能性が高いオプションです。noImplicitAny:暗黙のanyタイプの式と宣言でエラーが発生します。引数const、let、またはvarに型がない場合、これはエラーをスローします。これは、コードのカスタムデータ型を作成するための自分自身のメンタルチェックです。noImplicitThis:noImplicitAnyに似ていますが、thisキーワードでエラーがスローされます。できる限りすべてを入力するように促すもう1つのメンタルチェック。noImplicitReturns:関数内のすべてのコードパスが値を返すわけではない場合にエラーを報告します。これは、戻り型を持つ特定の関数のすべての条件が値を返すことを保証するのに役立ちます。]}tsconfig.jsonの詳細については、公式ドキュメントを参照してください。ステップ3—基本データ型とカスタムデータ型を使用するTypeScriptでは、12の基本的なタイプがサポートされています。booleannumberstringarrayobjecttupleenumanyvoidundefinednullnever使用する一般的なタイプは、プリミティブ型です。string、number、boolean、null、undefined、およびvoid。カスタムデータ型を作成する必要がある場合があります。そのような状況では、TypeScriptがInterfaceと呼ぶものを作成できます。ルートディレクトリにディレクトリを作成し、typesという名前を付けます。typesこの新しいディレクトリ内に、index.tsという名前の新しいファイルを作成します。interfaceキーワードを使用して、新しいインターフェイスを宣言できます。{}注:命名規則にCamelCaseを使用することをお勧めします。ここから、オブジェクトが持つプロパティと値型の定義を開始できます。}}この例では、オブジェクトが内部にあるインターフェース(location)があります。これは、インターフェイスをネストすることでさらに分割できます。?を追加して、任意のプロパティをオプションにすることもできます。これは、このプロパティに値がある場合とない場合があることを意味します。これらの変更で書き直された以前のindex.tsは次のとおりです。string}このカスタムデータ型は、任意の単一ファイルVueコンポーネント(.vue)またはTypeScript(.ts)ファイルで使用できるようになりました。ステップ4—単一ファイルVueコンポーネント(SFC)でのカスタムデータ型の使用Userインターフェイスを使用し、firstNameとlastNameを表示するApp.vueの例を次に示します。}</script>このコンポーネントでTypeScriptを使用するには、コンポーネントのscriptタグにlang属性を追加する必要があります。その属性の値はtsである必要があります。単一ファイルのVueコンポーネントでTypeScriptを使用する場合は、Vueライブラリをインポートして、そこから拡張できるようにする必要があります。クラススタイルの構文は使用しないため、asキーワードを使用して、データをデータ型として宣言します。const、let、var、または関数の戻り型の場合は、コロン(:)を使用して型を定義できます。これらの変更をApp.vueに適用すると、次のようになります。})</script>このコードは、Userインターフェイスをインポートし、リアクティブdataをタイプUserとして宣言します。computedプロパティはstringを返すため、stringタイプが定義されます。mountedフックは何も返さないため、voidタイプが定義されています。これらの定義が整っていれば、コンパイル時にTypeScriptエラーは発生しません。アプリケーションをコンパイルします。serve結果をブラウザで開くときは、表示されるフルネームを確認する必要があります。結論TypeScriptはJavaScriptです。TypeScriptを使用すると、必要に応じて厳密または寛大にすることができます。プロジェクトの成長に合わせて、コードベースの一貫性とスケーラブルを維持するのに役立ちます。Code、WebStorm、Sublime、Vim、Atomなど)とも緊密に統合されています。これらのエディターを使用すると、TypeScriptはバックグラウンドで動作し、舞台裏で関数の引数と戻り値の型のリアルタイムの手がかり、提案、プレビューを提供します。全体として、これは、開発者が毎日使用するより多くのツール、ライブラリ、およびフレームワークへの道を見つけ続けている言語です。強力なオープンソースコミュニティとMicrosoftの支援があります。TypeScriptの詳細については、TypeScriptトピックページで演習とプログラミングプロジェクトを確認してください。Joseモバイルバージョンに。