Java開發(fā)平臺IntelliJ IDEA教程：開發(fā)，運行和調(diào)試TypeScript源代碼

IntelliJ IDEA是Java語言開發(fā)的集成環(huán)境，IntelliJ在業(yè)界被公認為優(yōu)秀的Java開發(fā)工具之一，尤其在智能代碼助手、代碼自動提示、重構(gòu)、J2EE支持、Ant、JUnit、CVS整合、代碼審查、 創(chuàng)新的GUI設(shè)計等方面的功能可以說是超常的。

本系列教程內(nèi)容為如何將IntelliJ IDEA與您喜歡的語言，平臺或框架結(jié)合使用。本教程將介紹如何開發(fā)，運行和調(diào)試TypeScript 源代碼 。

點擊下載IntelliJ IDEA最新試用版

TypeScript

請注意：此功能僅在Ultimate版本中受支持。

IntelliJ IDEA支持開發(fā)，運行和調(diào)試TypeScript 源代碼。IntelliJ IDEA可識別.ts文件，并提供全方位的編碼幫助，無需任何額外步驟即可對其進行編輯。TypeScript文件標(biāo)有圖標(biāo)。

TypeScript感知編碼輔助包括完成關(guān)鍵字，標(biāo)簽，變量，參數(shù)和函數(shù)，錯誤和語法突出顯示，格式化，大量代碼檢查和快速修復(fù)，以及常見和特定于TypeScript的重構(gòu)。IntelliJ IDEA還可以動態(tài)地驗證TypeScript并將其編譯為JavaScript。

驗證TypeScript并將其編譯為JavaScript 

IntelliJ IDEA主要基于TypeScript語言服務(wù)中的數(shù)據(jù)驗證TypeScript代碼，該服務(wù)還將TypeScript編譯為JavaScript。

在TypeScript工具窗口的“ 錯誤和編譯錯誤”選項卡中報告所有檢測到的語法和編譯錯誤。對于每個錯誤，IntelliJ IDEA提供簡要描述以及有關(guān)其發(fā)生的行數(shù)的信息。

“ 控制臺”選項卡顯示自打開工具窗口以來TypeScript語言服務(wù)的日志。

配置與TypeScript語言服務(wù)的集成

1. 在“ 設(shè)置/首選項”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 語言和框架”| TypeScript。將打開TypeScript頁面。

2. 指定要使用的Node.js解釋器。這可能是一個本地Node.js的解釋或適用于Linux在Windows子系統(tǒng)Node.js的。

3. 從TypeScript列表中 

   打開TypeScript工具窗口（View | Tool Windows | TypeScript）并切換到Errors選項卡。
   

   打開TypeScript工具窗口（View | Tool Windows | TypeScript）并切換到Compile errors選項卡。
   

   要查看對象的推斷類型，請按住Ctrl鼠標(biāo)指針并將其懸停在其上。

   

   在TypeScript中使用JavaScript庫
   

   在TypeScript中使用JavaScript庫時，需要為它們安裝類型聲明。IntelliJ IDEA提醒您通過npm安裝它們并相應(yīng)地更新您的package.json文件。

   安裝類型聲明

   1. 將插入符號置于警告位置并按Alt+Enter。

   2. 選擇建議，然后按Enter。

   

   文檔查找

   IntelliJ IDEA允許您從項目及其依賴項中獲取符號，在外部庫中定義符號以及標(biāo)準(zhǔn)JavaScript API，因為TypeScript實現(xiàn)了所有這些符號。

   文檔顯示在“ 文檔”彈出窗口中，該彈出窗口有助于通過超鏈接導(dǎo)航到相關(guān)符號，并提供用于在已導(dǎo)航頁面中來回移動的工具欄。

   查看插入符號的文檔

   按Ctrl+Q或選擇查看| 主菜單中的快速文檔查找。符號的引用顯示在“ 文檔”彈出窗口中。
   

   對于TypeScript中可用的標(biāo)準(zhǔn)JavaScript方法，IntelliJ IDEA還顯示指向相應(yīng)MDN文章的鏈接。

   

   查看插入符號的MDN文檔

   • 在“ 文檔”窗口中Ctrl+Q，單擊“MDN”鏈接。

   • 或者，按Shift+F1或選擇 查看| 主菜單中的外部文檔。

   IntelliJ IDEA在默認的IntelliJ IDEA瀏覽器中打開MDN文章 。

   重構(gòu)代碼

   IntelliJ IDEA提供常見的重構(gòu)過程，例如重命名/移動等，以及TypeScript特定的重構(gòu)過程，例如更改簽名，提取參數(shù)， 提取變量。

   在TypeScript中自動導(dǎo)入 

   IntelliJ IDEA可以為模塊，類，組件以及導(dǎo)出的任何其他TypeScript符號生成import語句。默認情況下，IntelliJ IDEA會在您完成TypeScript符號時添加import語句。

   當(dāng)您鍵入代碼或粘貼帶有尚未導(dǎo)入的符號的片段時，IntelliJ IDEA還可以為此符號生成導(dǎo)入語句。如果只有一個源從中導(dǎo)入符號，IntelliJ IDEA將以靜默方式插入導(dǎo)入語句。否則，請使用導(dǎo)入彈出窗口或?qū)Ｓ脤?dǎo)入快速修復(fù)。

   在代碼完成時添加import語句 

   1. 在“ 設(shè)置/首選項”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 編輯器”| 一般| 自動導(dǎo)入。將打開“ 自動導(dǎo)入”頁面。

   2. 在TypeScript / JavaScript區(qū)域中，選擇自動添加TypeScript導(dǎo)入和On代碼完成復(fù)選框。

   要更改導(dǎo)入彈出窗口的背景顏色，請按，然后Ctrl+Alt+S轉(zhuǎn)到 編輯器| 配色方案| 一般| 彈出窗口和提示| 問題提示。

   在鍵入或粘貼代碼時添加import語句

   1. 在“ 設(shè)置/首選項”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 編輯器”| 一般| 自動導(dǎo)入。將打開“ 自動導(dǎo)入”頁面。

   2. 在TypeScript / JavaScript區(qū)域中，選擇自動添加TypeScript導(dǎo)入 和動態(tài)明確導(dǎo)入復(fù)選框。

   使用導(dǎo)入彈出窗口

   如果由于某種原因在完成或編輯時未添加TypeScript符號的import語句，IntelliJ IDEA會顯示一個建議導(dǎo)入符號的彈出窗口。要接受該建議，請按Alt+Enter：

   

   如果有多個可能的導(dǎo)入源，IntelliJ IDEA會通知您：

   

   Alt+Enter 在這種情況下按下會打開一個建議列表：

   

   隱藏導(dǎo)入彈出窗口

   1. 在“ 設(shè)置/首選項”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 編輯器”| 一般| 自動導(dǎo)入。將打開“ 自動導(dǎo)入”頁面。

   2. 清除導(dǎo)入彈出復(fù)選框。

   使用導(dǎo)入快速修復(fù)

   您始終可以通過專用的快速修復(fù)添加導(dǎo)入語句：

   

   當(dāng)您選擇添加導(dǎo)入語句時， IntelliJ IDEA會添加導(dǎo)入：

   

   如果有多個來源導(dǎo)入符號，IntelliJ IDEA會顯示一個建議列表：

   

   如果在項目中啟用了TypeScript語言服務(wù)，您還可以使用其建議：

   

   如果要從中導(dǎo)入符號有多個源，則TypeScript語言服務(wù)會顯示以下幾個建議：

   

   相關(guān)閱讀推薦：

   IntelliJ IDEA最新版本2019.2全面解析，Java 13預(yù)覽等多項新功能上線 （上）

   IntelliJ IDEA最新版本2019.2全面解析，Java 13預(yù)覽等多項新功能上線 （下）

   =====================================================

   想要購買IntelliJ IDEA正版授權(quán)的朋友可以。

   更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼