如果你體驗過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時代以來的秒數
動態添加有效的註釋標籤：
- LINE_COMMENT 示例輸出：在JavaScript中 //
舉一些例子加以說明：
通過“ doc”，觸發創建註釋塊，光標定位在的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。
總結
本文總結的這些TypeScript的編碼技巧可以有效的提升您的編碼效率，今後我們將會爲您帶來更多相關技巧，助力開發者。