序文JS の型付けが弱く、記述基準が緩く、開発ツールのサポートが弱いため、前任者のコードをメンテナンスするときに、メソッド名やフィールド名がどこから来たのかわからないことがよくあります。グローバルに検索してから、ゆっくりとスクリーニングして見つける必要があります。 同様に、インターフェースによって返されるオブジェクト フィールドを使用する場合、その型や意味はわかりません。 vue グローバル オブジェクトにマウントされたメソッドを使用する場合でも、特に関数が複数の型を受け取ることができる場合は、完全に推測作業となり、面倒です。 まず目的についてお話ししましょう。すべてのリソースがコード補完を使用して定義またはソースにインデックスされ、vscode で CTR + 左マウス ボタンを押すことで移動できるようになり、効率が向上して使いやすくなることを願っています。 具体的な構成情報グローバルjsconfig.jsonを構成する 私たちはwepbackで関連パスエイリアスを設定することに慣れています。vscodeに認識させるには、次の設定を行う必要があります。 { "コンパイラオプション": { "ターゲット": "ES6", "モジュール": "commonjs", "allowSyntheticDefaultImports": true、 "ベースURL": "./", 「パス」: { "@/*": ["src/*"] } }, "除外": ["node_modules", "dist"], "include": ["src/**/*", "global.d.ts"] } プラグインvue-helperをインストールするこのプラグインは、vscode-intelligenceが.vueファイルを認識せずナビゲートできない問題を解決するためにインストールされます。 ただし、まだバグがあります。インポート x 変数名がファイル名と同じでない場合、認識されません。 究極の解決策は、.vueファイルをjsでホストすることです './index.vue' から { default } をエクスポートします。 vscodeはワンステップで特定のページに完璧に移動できます 繰り返しコードを書くのは嫌いですか?スニペットを定義する 「エクスポートデフォルト」: { "スコープ": "javascript、typescript", 「プレフィックス」: 「expd」、 "body": ["'./index.vue${1}' から {default} をエクスポートします。"] }, 「デフォルトとしてエクスポート」: { "スコープ": "javascript、typescript", 「プレフィックス」: 「expdas」、 "body": ["'./index.vue${1}' から {default を ${2}} としてエクスポートします。"] }, Vueにアタッチされたメソッドまたはプロパティに型宣言を追加するルートディレクトリに新しいglobal.d.tsを作成し、 // グローバル.d.ts 'vue' から Vue をインポートします 型 FnVoid = (...ags: any[]) => void モジュール '*.vue' を宣言します。 デフォルトのVueをエクスポート } モジュール 'vue/types/vue' を宣言します { インターフェースVue { $$title: (タイトル: 文字列) => void $$ログイン: FnVoid // ...... } } 適切なコメントを書くVSCode では、jsdoc 構文のサポートがさらに強化され、コード作成段階で強力なコード プロンプト、コード補完、コード チェックを利用できるようになりました。 たとえば、コメントで変数を定義できます。リストから返されるインターフェースの場合、データを受信するためにモデル オブジェクトを定義する必要がない場合は、カスタム変数が非常に便利です。 インポート構文もサポートしています ただし、メソッドにアタッチされていないアノテーション変数は使用できません。 たとえば、新しいファイルを作成し、次のコメントを記述します。 /** * @typedef {Object} 人 * @property {文字列} 名前 * @property {数値} 年齢 */ コード内で参照することはできません。 /**@type import('./test').person */ 抽象オブジェクトが多くの場所で再利用される段階に到達したと思います。モデル レイヤーの下に新しいオブジェクトを作成しないのはなぜでしょうか? vscode もこの考慮に基づいていると思います。 また、オブジェクトが計算によって取得された場合、vscode コードプロンプト機能はそれを認識できません。 次のコードはオブジェクトのプロパティを要求できません コードを書くときはこのような書き方を避けるようにしています 定数関数 = () => { ['a', 'b', 'c'] を返します。reduce((pre, cur) => { pre[cur] = 'hello' + cur 戻る前 }, {}) } obj = func() とします。 高度なコード内のイベント定義にヒントを追加したい場合はどうすればよいでしょうか? テスト: 残念ながら、これは jsdoc ではまだ不可能です。 幸いなことに、型テンプレート文字列のサポートはts4.1.betaの最新リリースで追加されました。 これに基づいて、vuexのサポートも実装できます。 具体的なドキュメントについては、TypeScript 4.1 Type Template String を参照して、Vuex の store.commit と store.dispatch の型判定を実装してください。 著者:Xiaoyuncai: http://www.cnblogs.com/phillyx/ github:http://github.com/phillyx 要約するこれで、typsescript を使用せずにタイプ拡張を使用する方法についての記事は終了です。typsescript タイプ拡張の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Mysql の追加、削除、変更、クエリステートメントのシンプルな実装
>>: mysql 5.7.11 winx64 初期パスワード変更
まずdockerコンテナを実行しますルートユーザーとしてコマンドを実行する sudo docker ...
この記事で説明する等高レイアウトでは、純粋な CSS を使用して、要素の高さを手動で設定することなく...
目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...
テキスト非表示コード、HTML 内の特定のテキストを非表示にするコードをコピーコードは次のとおりです...
HTMLコード:コードをコピーコードは次のとおりです。 <td align="cen...
このデータベースをダウンロードするには、多くの時間とトラフィックがかかります。踏み込んだ落とし穴で時...
Navicat を使用して IP 経由で直接接続すると、次のようなさまざまなエラーが報告されます: ...
1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...
VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...
目次1. 親が子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに値を渡す3. 子コ...
memcachedをインストールする yum インストール -y memcached #memcac...
序文この記事は、最も人気のある言語で最も退屈な基礎知識を説明することを目的としていますこのトピックは...
1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...
全文インデックスには特別なクエリ構文が必要です。全文検索はインデックスの有無にかかわらず実行できます...
目次バージョンノートプロジェクトを作成する依存関係をインストールするコンテンツの記入src/serv...