四兩撥千斤——你不知道的VScode編碼TypeScript的技巧

若是你體驗過JAVA這種強類型語言帶來的便利，包括其豐富的類型變量、抽象與接口，轉而使用JavaScript時，必定會以爲不夠滿意。尤爲是JavaScript聲明的變量Number能夠垂手可得的分配給String，IDE如何執行任何類型的IntelliSense都讓人十分困擾。

面對這個技術障礙，咱們就沒法忽視TypeScript帶來的便利。相比較於JavaScript，最爲明顯的一點就是咱們能夠賦予IDE實際使用的能力， 本文將要介紹一些TypeScript的編碼技巧，幫助您更加快速高效的進行工做。

建立自定義代碼段

獲取默認的代碼段以及自定義代碼段是VScode的IntelliSense功能的重要部分，代碼片能夠大幅縮減編寫代碼的時間，只須要記住使用前綴，用什麼觸發就能夠。

經過從命令菜單中選擇「插入代碼段」，便可查看，該列表內容豐富，能在平常工做提供很大幫助。

另外一個重要內容是添加自定義代碼段。

使用方法：選擇「文件」 > 「首選項」下的「用戶代碼段」（在macOS上爲「代碼」 > 「首選項」），選擇代碼段可訪問的語言，或是全局語言。

添加自定義代碼段，只須要在文件內添加一個JSON定義。

新的snippets文件就新建在了項目文件夾中，具備自定義擴展名，支持JSON的內聯註釋。

須要定義的內容包括：

• 名稱，若是沒有描述將做爲IntelliSense下拉列表的一部分
• 範圍，默認爲全句代碼段
• 前綴，做爲觸發片斷的單詞，能夠定義爲字符串組或值
• 主體，包含代碼行列表，能夠添加VScode標記，使用TAB移動
• 描述，此項爲可選內容，若是不使用則在IntelliSense下拉菜單中列出的項目出現時顯示其名稱

上面的示例中咱們建立了一個自定義代碼段，當開始編寫「 mylog」就會觸發該代碼段。有人可能對代碼中console.log有疑問，但要注意還有一個預約義的變量：TM_SELECTED_TEXT，它引用當前選定的文本。所以，若是咱們在選擇代碼時手動觸發此代碼段，它將將該選擇封裝在一條console.log語句中。

這裏整理了一些開發中經常使用代碼段的預約義變量：

• TM_SELECTED_TEXT 當前選擇的文本或空字符串
• TM_CURRENT_LINE 當前行的內容
• TM_CURRENT_WORD 光標下的單詞內容或空字符串
• TM_LINE_INDEX 基於零索引的行號
• TM_LINE_NUMBER 基於一索引的行號
• TM_FILENAME 當前文檔的文件名
• TM_FILENAME_BASE 當前文檔的文件名，不帶擴展名
• TM_DIRECTORY 當前文件的目錄
• TM_FILEPATH 當前文檔的完整文件路徑
• CLIPBOARD 剪貼板中的內容
• WORKSPACE_NAME 打開的工做空間或文件夾的名稱

日期和時間的引用：

• CURRENT_YEAR 本年度
• CURRENT_YEAR_SHORT 本年度的最後兩位數字
• CURRENT_MONTH 以兩位數表示的月份（例如「 02」）
• CURRENT_MONTH_NAME 月的全名（例如「七月」）
• CURRENT_MONTH_NAME_SHORT 該月的簡稱（例如「 Jul」）
• CURRENT_DATE 一個月中的某天
• CURRENT_DAY_NAME 一天的名稱（例如「週一」）
• CURRENT_DAY_NAME_SHORT 一天的簡稱（例如「 Mon」）
• CURRENT_HOUR 當前小時（24小時制）
• CURRENT_MINUTE 當前分鐘
• CURRENT_SECOND 當前秒
• CURRENT_SECONDS_UNIX 自Unix時代以來的秒數

動態添加有效的註釋標籤：

• BLOCK_COMMENT_START輸出示例：JavaScript/*或HTML<!--
• BLOCK_COMMENT_END輸出示例：JavaScript*/或HTML-->
• LINE_COMMENT 示例輸出：在JavaScript中 //

舉一些例子加以說明：

經過「 doc」，觸發建立註釋塊，光標定位在的$1位置，若是在其中寫內容並按TAB鍵，將跳轉到position $2。

最終結果以下所示：

自定義TypeScript格式

根據我的風格和編碼習慣自定義本身的編碼格式

在設置窗口中，鍵入「 typescript.formatting 」， TypeScript提供了24種格式化選項。

可選擇的範圍包括：在打開和關閉字符串括號後添加空格，在函數的新行添加括號，處理分號（可選擇忽略，添加缺失的括號或自動將其所有刪除）。

經過此列表，咱們能夠自定義VSCode，使代碼風格更符合我的編碼習慣。完成後，經過選擇命令面板上的「設置文檔格式」選項生效。

易重構性強

在大型代碼庫上進行重構尤爲麻煩，進行簡單的更改（例如，將類定義從一個文件夾移動到另外一個文件夾）會影響不少文件。

而VSCode提供了一組很是好用且無需進行任何額外的擴展的功能。

1.重命名現有符號

經過簡單的Search＆Replace能夠在代碼中重命名變量或類名，除非名稱是其餘實體的一部分，例如命名類Car，而後將其oCar做爲實例的變量。若是僅打算重命名實際的類，則會致使一些問題。

VSCode簡化了不少工做，咱們要作的只是選中要重命名的實體之一，而後按F2（或右鍵單擊它並選擇「重命名符號」，mac的操做有些不一樣）。選擇新名稱，該過程當中使用的任何地方（包括定義，若是最初未單擊它的話）都將被正確重命名。

2.抽象的構建

若是不止一次使用，須要對其進行抽象。常見的重構技術是提取邏輯成爲如一個函數或一個方法。

經過選擇要重複使用的代碼並單擊其旁邊的燈泡進行抽象。例如如下代碼，須要提取最後兩行：

選擇提取在全局範圍生效，輸入新的函數名，將得到如下內容：

同時countCharacters功能須要一些修飾，在更復雜的用例下好處也很明顯。

燈泡的菜單選項是上下文感知的，若是咱們正在使用類，則還能夠選擇將代碼提取爲新方法，或將類型轉換爲接口，以及將單個值轉換爲常量。

3.簡化功能簽名

將過多參數經過將對象分解添加到混合中進行簡化：

選擇全部參數，而後單擊燈泡，選擇「將參數轉換爲變形的對象」

進一步優化，打開類型聲明，而後將其轉換爲外部類型，能夠再次選擇類型定義

點擊「提取到類型別名」將詢問新的類型名稱，它將建立該名稱並將其放置在函數的簽名上

進一步簡化此代碼

保存文件後自動操做

咱們都經歷過在將代碼提交到存儲庫以前，忘記格式化文件或運行linter的尷尬狀況，而在使用VSCode時，咱們定義在文件保存後當即執行的預設操做，這樣就避免了開發的的疏漏。

設置過程是編輯settings.json器編輯文件，添加editor.codeActionsOnSave就能夠在保存文件後設置要執行的操做列表，包括運行ESLint或添加缺乏的導入等操做。

能夠將其設置爲以下數組：

「 editor.codeActionsOnSave」：[「 source.fixAll.eslint」，「 source.addMissingImports」]

同時，若是咱們但願在保存文件時自動添加前面提到的格式化選項（而不是手動格式化文檔），則能夠將如下條目添加到咱們的settings.json：

"editor.formatOnSave": true

例如，實現將分號設置爲自動插入。

CodeLens計數器

VSL默認狀況下不會激活CodeLens，對於大型代碼庫這將很是不便，這裏將提供一些重構思路：

經過啓用列出類，函數，類型和其餘構造的實現和引用的計數器的功能，有小標記。

要啓用此功能，只需在設置屏幕上查找單詞「 CodeLens」。啓用全部計數器。

將獲得如下內容：

「3 references」 和「1 reference」是由VSCode直接添加的，一旦單擊它們，將得到引用構造的代碼的擴展視圖（在此示例中爲定義的類型）：

擴展閱讀

若是您已熟練掌握TypeScript的編碼開發技巧，並但願在您的 Web 項目中實現 Excel 報表在線設計和數據填報，那麼歡迎您下載試用這款純前端表格控件 SpreadJS，您可經過QQ羣（720389894）向咱們反饋你的產品使用建議。

總結

本文總結的這些TypeScript的編碼技巧能夠有效的提高您的編碼效率，從此咱們將會爲您帶來更多相關技巧，助力開發者。