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

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

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

點(diǎn)擊下載IntelliJ IDEA最新試用版

TypeScript

請(qǐng)注意：此功能僅在Ultimate版本中受支持。

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

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

驗(yàn)證TypeScript并將其編譯為JavaScript 

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

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

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

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

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

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

3. 從TypeScript列表中 

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

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

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

   

   在TypeScript中使用JavaScript庫
   

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

   安裝類型聲明

   1. 將插入符號(hào)置于警告位置并按Alt+Enter。

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

   

   文檔查找

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

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

   查看插入符號(hào)的文檔

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

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

   

   查看插入符號(hào)的MDN文檔

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

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

   IntelliJ IDEA在默認(rèn)的IntelliJ IDEA瀏覽器中打開MDN文章 。

   重構(gòu)代碼

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

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

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

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

   在代碼完成時(shí)添加import語句 

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

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

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

   在鍵入或粘貼代碼時(shí)添加import語句

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

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

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

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

   

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

   

   Alt+Enter 在這種情況下按下會(huì)打開一個(gè)建議列表：

   

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

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

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

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

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

   

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

   

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

   

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

   

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

   

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

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

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

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

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

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