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

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

序文

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 をよろしくお願いいたします。

<<:  Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

>>:  mysql 5.7.11 winx64 初期パスワード変更

推薦する

Dockerはコンテナに入るためにルートを使用する

まずdockerコンテナを実行しますルートユーザーとしてコマンドを実行する sudo docker ...

CSS を使用して複数の方法で等高レイアウトを実装するサンプル コード

この記事で説明する等高レイアウトでは、純粋な CSS を使用して、要素の高さを手動で設定することなく...

Linux での UDP について学ぶ

目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...

HTML で特定のテキストを非表示にするにはどうすればよいでしょうか?

テキスト非表示コード、HTML 内の特定のテキストを非表示にするコードをコピーコードは次のとおりです...

表 td 画像水平および垂直中央揃えコード

HTMLコード:コードをコピーコードは次のとおりです。 <td align="cen...

win10 での mysql 8.0.16 winx64 インストールの最新グラフィック チュートリアル

このデータベースをダウンロードするには、多くの時間とトラフィックがかかります。踏み込んだ落とし穴で時...

Navicat 経由で MySQL にリモート接続する方法

Navicat を使用して IP 経由で直接接続すると、次のようなさまざまなエラーが報告されます: ...

例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます

1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...

vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する

VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...

Vue 親子コンポーネントの相互値の転送と呼び出し

目次1. 親が子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに値を渡す3. 子コ...

NginxとLuaによるグレースケールリリースの実装

memcachedをインストールする yum インストール -y memcached #memcac...

「いいね!」文がインデックスに登録されないのはなぜですか?

序文この記事は、最も人気のある言語で最も退屈な基礎知識を説明することを目的としていますこのトピックは...

Windows に異なる (2 つの) バージョンの MySQL データベースをインストールする詳細なチュートリアル

1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...

MySQL 全文インデックスガイド

全文インデックスには特別なクエリ構文が必要です。全文検索はインデックスの有無にかかわらず実行できます...

nodejs + koa + typescript の統合と自動再起動に関する問題

目次バージョンノートプロジェクトを作成する依存関係をインストールするコンテンツの記入src/serv...