序文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 初期パスワード変更
他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更...
Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例動作フレームワーク...
1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...
主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 1) ...
今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...
フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...
VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...
目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...
【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...
Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...
目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...
どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンス...
目次文字セット比較ルール4つのレベルの文字セットと比較規則3つのシステム変数このノートは主にMySQ...
1. 背景Docker サービスが開始されると、デフォルトで docker0 ブリッジが作成され (...
Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...