入力スクリプトなしでタイプ拡張を使用する方法

序文

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を作成し、 jsconfig.json: include

// グローバル.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 をよろしくお願いいたします。