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

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

序文

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 初期パスワード変更

推薦する

面白いウェブサイトをデザインするための方法とテクニック(写真)

他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更...

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例動作フレームワーク...

HTML いくつかの特別な分割線効果

1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...

HTML テーブルタグについての簡単な説明

主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 1) ...

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

JavaScriptはブラウザがIEかどうかを判定します

フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...

MySQL マスタースレーブスイッチチャネルの問題の解決策

VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...

Windows 8.1 で MySQL5.7 のルート パスワードを忘れた場合の解決方法

【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...

Centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar の簡単な分析

Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

JavaScript で最も高速なループはどれですか?

どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンス...

MySQL 文字セットの概要

目次文字セット比較ルール4つのレベルの文字セットと比較規則3つのシステム変数このノートは主にMySQ...

Docker で Docker0 ブリッジのデフォルトのネットワーク セグメントを変更する方法

1. 背景Docker サービスが開始されると、デフォルトで docker0 ブリッジが作成され (...

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...