理解TypeScript

一、什麼是typescript？

TypeScript是JavaScript的一個超集，擴展了JavaScript的語法，本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。任何現有的JavaScript程序能夠不加改變的在TypeScript下工做,等同於ES時代的JS。TypeScript是爲大型應用開發而設計，而編譯時它產生 JavaScript 以確保兼容性。

二、JavaScript和typescript的區別？

TypeScript 可使用 JavaScript 中的全部代碼和編碼概念，TypeScript 是爲了使 JavaScript 的開發變得更加容易而建立的。例如，TypeScript 使用類型和接口等概念來描述正在使用的數據，這使開發人員可以快速檢測錯誤並調試應用程序。

• TypeScript 從核心語言方面和類概念的模塑方面對 JavaScript 對象模型進行擴展。
• JavaScript 代碼能夠在無需任何修改的狀況下與 TypeScript 一同工做，同時可使用編譯器將 TypeScript 代碼轉換爲 JavaScript。
• TypeScript 經過類型註解提供編譯時的靜態類型檢查。
• TypeScript 中的數據要求帶有明確的類型，JavaScript不要求。
• TypeScript 爲函數提供了缺省參數值。
• TypeScript 引入了 JavaScript 中沒有的「類」概念。
• TypeScript 中引入了模塊的概念，能夠把聲明、數據、函數和類封裝在模塊中。

三、爲何使用TypeScript？

代碼約束、提示能力
複製代碼

3.1代碼約束

TypeScript 的類型機制能夠有效杜絕由變量類型引發的誤用問題，並且開發者能夠控制對類型的監控程度，是嚴格限制變量類型仍是寬鬆限制變量類型，都取決於開發者的開發需求。

3.2代碼提示

3.2.1代碼的自動補全

TypeScript代碼的提示功能會在您輸入字符的同時自動在光標的相應位置彈出。其提示列表是基於必定的順序排列，並不是按照字母排列，如您在方法內部，觸發的提示，那形參會優先排列到前端。

3.2.2代碼的着色

3.2.3代碼的懸浮提示

您能夠經過鼠標觸碰某個方法、變量或類名等以快速得到doc中對該目標的描述。

3.2.4方法參數和方法重載的提示

當您在輸入完一個方法的調用的時候，能夠提示出該方法的參數，以及您當前立刻要輸入第幾個參數和相關參數的註釋信息。同時，若是該方法被重載過，能夠提示出每一次重載的提示。您能夠經過鍵盤的上下方向鍵來進行切換查看。

3.2.5 代碼的格式化

格式化的相關配置，如方法明後是否換行等，您能夠經過以下途徑進行設置。

打開菜單：窗口->首選項（偏好設置->首選項）。

3.2.6 代碼的引用高亮

當您選擇一個變量或者方法的時候，編輯器能夠即時的提示您在當前的TypeScript文件中全部對當前選擇內容的引用。

3.2.7即時錯誤提示

在您正在輸入TypeScript代碼的同時，能夠幫助您及時發現代碼中的語法語義等錯誤部分，並有效提示出所在行，以便可以快速對書寫問題進行修改。

3.2.8查找引用和聲明

此功能能夠方便的查詢某一個類、方法或變量在整個項目中的引用，而且能夠經過搜索面板直接打開相關的TypeScript文件並選中相應代碼。您能夠經過 以下方式進行引用和聲明的查找：右鍵點擊某一段代碼，在彈出菜單中選擇查找引用或查找定義。

四、添加特性的語言擴展

4.1 類（Classes）

類是TypeScript的核心，使用TypeScript開發時，大部分代碼都是寫中類裏面的。

4.2接口 Interfaces

提供的 interface 接口這個功能在開發項目的時候會頗有幫助，用來創建某種代碼約定，TypeScript的核心原則之一是對值所具備的結構進行類型檢查。在TypeScript裏，接口的做用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。

IPerson 接口就比如一個名字，它表明了有 name 屬性且類型爲 string 和age屬性且類型爲number的對象。只要傳入的對象知足上述必要條件，那麼它就是被容許的。

帶有可選屬性的接口與普通的接口定義差很少，只是在可選屬性名字定義的後面加一個 ? 符號。可選屬性的好處之一是能夠對可能存在的屬性進行預約義，好處之二是能夠捕獲引用了不存在的屬性時的錯誤。

要注意可選參數沒傳的狀況，必選參數不能放在可選參數後面。

4.3模塊 Modules

模塊能夠幫助開發者將代碼分割爲可重用的單元。開發者能夠本身決定將模塊中的哪些資源（類、方法、變量）暴露出去供外部使用，哪些 資源只在模塊內使用。 在TS中一個文件就是一個模塊，中模塊的內部有兩個關鍵字（export、import）支撐模塊的特性。這兩個關鍵字來控制模塊對外暴露什麼、須要別的模塊對你提供什麼。

4.4類型註解 Type annotations

對於基本類型的批註是 number, bool 和 tring。而弱或動態類型的結構則是 any 類型。當類型沒有給出時，TypeScript編譯器利用類型推斷以推斷類型。若是因爲缺少聲明，沒有類型能夠被推斷出，那麼它就會默認爲是動態的any類型。

4.5編譯時類型檢查 Compile time type checking

編譯時對變量的類型進行檢查，符合要求的繼續編譯，不符合要求的報錯。

4.6箭頭表達式

表達式 ()=>{something}或()=>something 至關於js中的函數,它的好處是能夠自動將函數中的this附加到上下文中，消除this的指向問題。

五、常見問題

五、1基礎類型any

有時候，咱們會想要爲那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自於動態的內容，好比來自用戶輸入或第三方代碼庫。 這種狀況下，咱們不但願類型檢查器對這些值進行檢查而是直接讓它們經過編譯階段的檢查。 那麼咱們可使用 any類型來標記這些變量。

5.2 var let const 區別

var：使用var聲明的變量，其做用域爲該語句所在的函數內，且存在變量提高現象（函數及變量的聲明都將被提高到函數的最頂部）

let：用let聲明的變量，其做用域爲該語句所在的代碼塊內，不存在變量提高；

const: 使用const聲明的是常量，與let聲明類似，可是就像它的名字所表達的，它們被賦值後不能再改變。 換句話說，它們擁有與 let相同的做用域規則，可是不能對它們從新賦值。

5.3剩餘參數

必要參數，默認參數和可選參數有個共同點：它們表示某一個參數。 有時，你想同時操做多個參數，或者你並不知道會有多少參數傳遞進來。能夠把全部參數收集到一個變量裏，剩餘參數會被當作個數不限的可選參數。 能夠一個都沒有，一樣也能夠有任意個。編譯器建立參數數組，名字是你在省略號（ ...）後面給定的名字。

5.4 for . . of 與 for . . in

for . . of和for..in都可迭代一個列表；可是用於迭代的值卻不一樣，for..in迭代的是對象的 鍵 的列表，而for..of則迭代對象的鍵對應的值。

六、React項目中tsconfig.json詳解

若是一個目錄下存在一個tsconfig.json文件，那麼它意味着這個目錄是TypeScript項目的根目錄。tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。

`{ "compilerOptions": { "outDir": "./dist/「, //重定向輸出，打包輸出路徑

"sourceMap": true,   //生成相應的 .map文件

"allowSyntheticDefaultImports": true,  //容許從沒有設置默認導出的模塊中默認導入

"experimentalDecorators": true,     //修飾符

"moduleResolution": "node」,    //決定如何處理模塊

"declaration": false, //生成相應的 .d.ts文件

"target": "es6」,      //指定ES的目標版本
"jsx": 「react」    //在 .tsx文件裏支持JSX
複製代碼

},

"exclude": [ "node_modules" ],

"include": [ "src/**/*" ] }` "exclude"和"include"屬性指定一個文件glob匹配模式列表。

支持的glob通配符有：

匹配0或多個字符（不包括目錄分隔符）

  ? 匹配一個任意字符（不包括目錄分隔符）

   **/ 遞歸匹配任意子目錄
複製代碼

參考文檔： https://baike.baidu.com/item/typescript/4314718?fr=aladdin 簡書 https://www.jianshu.com/p/c5005fad4274

菜鳥教程 https://www.runoob.com/w3cnote/getting-started-with-typescript.html

提示能力 http://edn.egret.com/cn/docs/page/941

https://www.cnblogs.com/langzianan/p/8403332.html