typspcriptを使わないで、どのようにタイプを使って機能を強めますか？

前言
JSの弱いタイプ、ゆったりとした編纂規範、及び開発ツールの弱鶏サポートのために、私達は前人のコードを守る時、いつもある一つの方法やフィールドの名前がどこから来るか分からないことがあります。必ずグローバル検索後にゆっくりとふるい調べてから、見つけられます。
同じように、私たちはインタフェースを使って返したオブジェクトフィールドの種類も分かりません。
vue全体のオブジェクトにマウントされた方法を使っても、純粋に推測します。特に関数が複数のタイプを受信できる時は、とても辛いです。
まず目的を言います。すべての資源はその定義やソースに索引できます。コード補完ができます。vscode内のctr+マウスの左ボタンでナビゲーションできます。効率を高めます。
詳細設定情報
グローバルjsconfig.jsonを設定します。
私たちはwepback内に関連経路の別名を配置することに慣れています。vscodeを識別するためには、次のような構成が必要です。

{
 "compilerOptions": {
 "target": "ES6",
 "module": "commonjs",
 "allowSyntheticDefaultImports": true,
 "baseUrl": "./",
 "paths": {
  "@/*": ["src/*"]
 }
 },
 "exclude": ["node_modules", "dist"],
 "include": ["src/**/*", "global.d.ts"]
}

プラグインvue-helperをインストールします。
このプラグインをインストールするのは、vscode-inntrongenceが認識されていないことを解決するためです。
しかし、まだバグがあります。import x変数名がfile-nameと同じでないと識別できません。
最終的な解決策は.vueファイルに対してjs委託管理を行うことです。

export { default } from './index.vue'

v scodeは一歩完璧に具体的なページにナビゲートできます。
重複コードを書くのが嫌ですか？snippetを定義します

 "export default": {
 "scope": "javascript,typescript",
 "prefix": "expd",

 "body": ["export {default} from './index.vue${1}';"]
 },
 "export default as": {
 "scope": "javascript,typescript",
 "prefix": "expdas",

 "body": ["export {default as ${2}} from './index.vue${1}';"]
 },

Vueにかける方法または属性のためにタイプ宣言を追加します。
ルートディレクトリの下にglobal.d.tsを新規作成し、jsconfig.json: includeに追加します。

// global.d.ts
import Vue from 'vue'
type FnVoid = (...ags: any[]) => void

declare module '*.vue' {
 export default Vue
}
declare module 'vue/types/vue' {
 interface Vue {
 $$title: (title: string) => void
 $$login: FnVoid
 // ......
 }
}

正しい注釈を書く
vscodeは今jsdoc文法に対するサポートがますます完備されています。コードの作成段階において、コードの提示、コードの補完及びコードの検査ができます。
例えば、コメント内で変数を定義できます。リストに戻ってくるインターフェースに対して、modelオブジェクトを定義してデータを受ける必要がないなら、カスタム変数が役に立ちます。

さらに、import文法にも対応しています。

ただし、方法に依存しないコメント変数は使用できません。
例えば私は新しいファイルを作成して、次のコメントを書き込みます。

/**
 * @typedef {Object} person
 * @property {string} name
 * @property {number} age
 */

コード内では引用できません。

/**@type import('./test').person */

抽象的な対象が多くなると思いますが、なぜ直接モデル層の下にオブジェクトを作らないですか？
vscodeもこの考えに基づいていると推定される。
また、オブジェクトが計算によって得られるものであれば、vscodeコード提示機能も認識できません。
次のコードはオブジェクト属性に対してヒントを与えることができません。
私たちはコード作成中にこのような書き方をできるだけ避けます。

const func = () => {
 return ['a', 'b', 'c'].reduce((pre, cur) => {
 pre[cur] = 'hello ' + cur
 return pre
 }, {})
}

let obj = func()

A dvdアドバンス
コードの中にイベントの定義にヒントを追加したいですが、どうすればいいですか？
例えば私はイベントを登録しました。

test.on('handleInputClicked', () => {})

残念ですが、jsdocではまだできません。
嬉しいことに、最新のts 4.1.betaには、タイプテンプレート文字列へのサポートが追加されている。
これによって、私達はvuexに対する支持さえ実現できます。

具体的な文書はType Script 4.1タイプのテンプレート文字列はVuexのstore.com itとstore.dispachタイプの判断を実現します。を参照してください。
By小雲菜：http://www.cnblogs.com/phillyx/
github:http://github.com/phillyx
締め括りをつける
このページでは、typspcriptを使わないタイプの拡張機能についての記事を紹介します。typspcriptタイプの拡張機能については、以前の記事を検索したり、次の関連記事を見たりしてください。これからもよろしくお願いします。