四兩撥千斤——你不知道的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–>

• 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的編碼技巧可以有效的提升您的編碼效率，今後我們將會為您帶來更多相關技巧，助力開發者。