導入近年、TypeScript を求める声がますます高まり、TypeScript はフロントエンドに必須のスキルとなっています。 TypeScript は JS 型のスーパーセットであり、ジェネリック、型、名前空間、列挙などの機能をサポートし、大規模なアプリケーション開発における JS の欠点を補います。 TypeScript を単独で学習する場合、多くの概念は比較的簡単に理解できると感じるでしょうが、いくつかのフレームワークと組み合わせて使用する場合は、依然として多くの落とし穴があります。たとえば、React や Vue などのフレームワークを使用する場合、TypeScript との組み合わせは大きな障害になります。フレームワークが提供する .d.ts 宣言ファイル内のいくつかの複雑な型の定義や、コンポーネントの記述方法などを確認し、大幅な調整を行う必要があります。 この記事では主に私の経験を組み合わせて、 建てる正式な足場を通して設置する # 1. Vue CLIがインストールされていない場合は、まずインストールします。npm install --global @vue/cli 最新の 次に、コマンド ラインでプリセットを選択するように求められます。矢印キーを使用して、手動で機能を選択するを選択します。 次に、以下に示すように、TypeScript と Babel のオプションが選択されていることを確認します。 次に、残りの設定を以下のように構成します。 セットアップが完了すると、vue cli は依存関係のインストールとプロジェクトのセットアップを開始します。 ディレクトリ解決インストールが完了したら、プロジェクトを開くと、ts を統合した後のプロジェクト ディレクトリ構造は次のようになります。 |-- ts-vue |-- .browserslistrc # browserslistrc 設定ファイル (Autoprefixer をサポートするために使用) |-- .eslintrc.js # eslint 設定 |-- .gitignore |-- babel.config.js # babel-loader 設定 |-- package-lock.json |-- package.json # package.json の依存関係|-- postcss.config.js # postcss の設定|-- README.md |-- tsconfig.json # typescript 設定 |-- vue.config.js # vue-cli 設定 |-- public # 静的リソース (直接コピーされます) | |-- favicon.ico # ファビコンアイコン| |-- index.html # HTML テンプレート|-- src | |-- App.vue # エントリ ページ| |-- main.ts # コンポーネントの初期化などを読み込むエントリ ファイル| |-- shims-tsx.d.ts | |-- shims-vue.d.ts | |-- アセット # テーマフォントとその他の静的リソース(webpack によって読み込まれる) | |-- components # グローバル コンポーネント| |-- router # ルーティング| |-- store # グローバル vuex ストア | |-- style # グローバル スタイル| |-- views # すべてのページ|-- tests # テスト 実は、ざっくり言うと、以前
使用始める前に、VueでTypeScriptを使用するための非常に便利なライブラリをいくつか見てみましょう。 'vue-property-decorator' から { Vue、Component、Inject、Provide、Prop、Model、Watch、Emit、Mixins } をインポートします。 'vuex-module-decorators' から { Module、VuexModule、Mutation、Action、MutationAction、getModule } をインポートします。 コンポーネント宣言コンポーネントの作成方法は次のようになります 'vue-property-decorator' から { Component、Prop、Vue、Watch } をインポートします。 @成分 デフォルトのクラスTestをエクスポートし、Vueを拡張します。 } データオブジェクト 'vue-property-decorator' から { Component、Prop、Vue、Watch } をインポートします。 @成分 デフォルトのクラスTestをエクスポートし、Vueを拡張します。 プライベート名: 文字列; } プロップ宣言 @Prop({ デフォルト: false }) プライベート isCollapse!: boolean; @Prop({ デフォルト: true }) プライベート isFirstLevel!: boolean; @Prop({ デフォルト: "" }) プライベート basePath!: 文字列; !: は必ず存在することを意味します。?: は存在しない可能性があることを意味します。これら2つは文法的には代入アサーションと呼ばれる @Prop(オプション: (PropOptions | コンストラクター[] | コンストラクター) = {})
方法 jsでは、メソッドはメソッドオブジェクトで宣言する必要があり、次のようになります。 パブリッククリック関数(): void { console.log(この名前) コンソールログ(このメッセージ) } 監視プロパティを見る @Watch("$route", { 即時: true }) プライベート onRouteChange(ルート: ルート) { const query = route.query を Dictionary<string> として返します。 if (クエリ) { this.redirect = クエリ.redirect; this.otherQuery = this.getOtherQuery(クエリ); } } @Watch(パス: 文字列、オプション: WatchOptions = {}) オプションには2つのプロパティが含まれます:immediate?:boolean: リスニング開始直後にコールバック関数を呼び出すかどうか / deep?:boolean: 監視対象オブジェクトのプロパティが変更されたときにコールバック関数を呼び出すかどうか @Watch('arr', { 即時: true, ディープ: true }) 計算された パブリック get allname() { 'computed ' + this.name を返します。 } allnameは計算値、nameは監視値です ライフサイクル関数 パブリック作成(): void { console.log('作成されました'); } パブリックマウント():void{ console.log('マウント済み') } イベントを発行する 'vue-property-decorator' から { Vue, Component, Emit } をインポートします。 @成分 デフォルトのクラスMyComponentをエクスポートし、Vueを拡張します。 カウント = 0 @エミット() addToCount(n: 数値) { this.count += n } @Emit('リセット') リセットカウント() { このカウント = 0 } @エミット() 戻り値() { 10を返す } @エミット() 入力変更(e) { e.target.value を返す } @エミット() 約束() { 新しいPromiseを返します(resolve => { タイムアウトを設定する(() => { 解決する(20) }, 0) }) } } js ライティングを使用する エクスポートデフォルト{ データ() { 戻る { カウント: 0 } }, メソッド: { カウントを追加(n) { this.count += n this.$emit('add-to-count', n) }, リセットカウント() { このカウント = 0 this.$emit('リセット') }, 戻り値() { this.$emit('戻り値', 10) }, 入力変更(e) { this.$emit('on-input-change', e.target.value, e) }, 約束() { const promise = 新しい Promise(resolve => { タイムアウトを設定する(() => { 解決する(20) }, 0) }) promise.then(値 => { this.$emit('promise', 値) }) } } }
ヴュークス ストア デコレータを使用する前に、従来のストアの使用方法を確認しましょう。 エクスポートデフォルト{ 名前空間:true、 州:{ :"" }, ゲッター:{ getFoo(state) { state.foo を返す} }, 突然変異: setFooSync(状態、ペイロード){ state.foo = ペイロード } }, アクション:{ setFoo({コミット},ペイロード){ commot("getFoo",ペイロード) } } } 次に 輸入 { Vuexモジュール、 突然変異、 アクション、 モジュールを取得、 モジュール } から "vuex-module-decorators" へ; 基本的なプロパティの デフォルトクラス TestModule をエクスポートし、VuexModule を拡張します { } VuexModuleは、名前空間、状態、ゲッター、モジュール、ミューテーション、アクション、コンテキストなどの基本的なプロパティを提供します。 @Module({ dynamic: true, store, name: "settings" }) クラス Settings は VuexModule を拡張し、ISettingsState を実装します { } モジュール自体には、いくつかの構成可能なプロパティがあります。
@突然変異 プライベートSET_NAME(名前: 文字列) { // ユーザー名を設定します this.name = name; } @アクション パブリック非同期ログイン(userInfo: { ユーザー名: 文字列; パスワード: 文字列 }) { // ログインインターフェースとトークンの取得 { ユーザー名、パスワード } = userInfo とします。 ユーザー名 = ユーザー名.trim(); const { data } = ログインを待機します({ ユーザー名、パスワード }); setToken(data.accessToken); this.SET_TOKEN(data.accessToken); } エクスポート const UserModule = getModule(User); Vue で TypeScript を使用する方法についての記事はこれで終わりです。Vue で TypeScript を使用する方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows での MySQL 8.X インストール チュートリアル
>>: Linux または Android でファイル システムを追加する属性インターフェイスを解析する方法
springmvc による Spring の統合Spring 統合 springmvc の web....
ベクトル波 <svg viewBox="0 0 560 20" class...
最近、MySQL の起動中にエラーが発生しました。エラー メッセージは次のとおりです。 エラー 20...
ユーザーが登録すると、ラベルをクリックして確認コードを変更します。クリックするとラベルに影の部分がで...
目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...
この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...
JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...
目次1. プロトタイプとは何ですか? 1.1 関数プロトタイプオブジェクト1.2 コンストラクタを使...
このキー属性の機能は何ですか?まずは公式の説明を見てみましょう。 kekey 属性は主に、新しいノー...
この記事では、主に js を使用して画像をモザイク化する方法の例を紹介し、次のように共有します。効果...
1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...
一般的に ELK スタックとして知られる Elastic スタックは、Elasticsearch、L...
HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...
1. 対照的な色を使用します。ここでのコントラストとは、テキストの色と背景色のコントラストを指します...