前言

由于 JS 的弱類型、寬松的編寫規(guī)范、以及開發(fā)工具的弱雞支持，我們?cè)诰S護(hù)前人的代碼時(shí)，經(jīng)常會(huì)出現(xiàn)不知道某一個(gè)方法或字段命名來(lái)自于哪里，一定要在全局搜索以后慢慢篩查才能找到

同樣我們?cè)谑褂媒涌诜祷氐膶?duì)象字段時(shí)，也不知其類型幾何，意思幾何

甚至在我們使用掛載到 vue 全局對(duì)象上的方法時(shí)，純粹靠猜，尤其是當(dāng)函數(shù)可以接收多種類型的時(shí)候，很痛苦

先說(shuō)目的：我們希望一切資源皆可索引到其定義或來(lái)源，可以有代碼補(bǔ)全，在vscode內(nèi)ctr+鼠標(biāo)左鍵皆可導(dǎo)航到，提高效率，用的爽

具體配置信息

配置全局jsconfig.json

我們習(xí)慣在wepback內(nèi)配置相關(guān)路徑別名，為了讓vscode識(shí)別，我們需要做如下配置

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

安裝插件vue-helper

安裝該插件是為了解決vscode-intelligence不識(shí)別.vue文件,進(jìn)而無(wú)法導(dǎo)航的問題

不過依然存在bug,如果import x變量名不和file-name相同，則無(wú)法識(shí)別。

終極解決方案是對(duì) .vue文件進(jìn)行js托管

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

vscode可以一步完美導(dǎo)航到具體頁(yè)面

討厭寫重復(fù)代碼？定義個(gè) 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上的方法或?qū)傩蕴砑宇愋吐暶?/h3>

根目錄下新建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現(xiàn)今對(duì) jsdoc語(yǔ)法的支持愈發(fā)完善，在代碼編寫代碼階段可以給我們強(qiáng)大的代碼提示、代碼補(bǔ)全以及代碼檢查

比如我們可以在注釋內(nèi)定義變量，針對(duì)列表返回的接口，且不需要定義 model 對(duì)象來(lái)承接數(shù)據(jù)的話，自定義變量就很有用了

甚至于還支持import語(yǔ)法

不過，不依附于方法之上的注釋變量是不可用的

比如我新建一個(gè)文件，并寫入以下注釋

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

在代碼內(nèi)是無(wú)法引用的

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

我覺得都已經(jīng)到了抽象對(duì)象多處復(fù)用的地步了，為什么不直接在model層下新建對(duì)象呢

估計(jì)vscode也是基于此考慮的

另外對(duì)象如果是通過計(jì)算得來(lái)的，vscode 代碼提示功能也無(wú)法識(shí)別

如下代碼是不能針對(duì)對(duì)象屬性進(jìn)行提示的

我們?cè)诰帉懘a中盡量避免這種寫法

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

let obj = func()

Advanced

如果我們想在代碼中對(duì)事件定義添加提示怎么辦呢？
比如我注冊(cè)了一個(gè)事件

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

很遺憾，目前在jsdoc上還做不到

可喜的是，在最新發(fā)布的ts4.1.beta上增加了對(duì)類型模板字符串的支持

基于此，我們甚至可以實(shí)現(xiàn)對(duì) vuex 的支持

具體的文檔參見TypeScript 4.1 類型模板字符串實(shí)現(xiàn) Vuex 的 store.commit 和 store.dispatch 類型判斷

By小云菜:http://www.cnblogs.com/phillyx/

github:http://github.com/phillyx

總結(jié)

到此這篇關(guān)于不用typsescript如何使用類型增強(qiáng)功能的文章就介紹到這了,更多相關(guān)typsescript類型增強(qiáng)功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論