TypeScript教程

 

 

由於工做中用TypeScript，抽個時間，先大體的介紹一些基本知識，完整的學習仍是建議從官網教程出發，玩兒的愉快

JavaScript的通用瀏覽器支持和動態類型特性使其成爲理想的通用Web語言。可是，任何來自面向對象背景的開發人員都知道，隨着應用程序變得愈來愈大，JavaScript的靈活性可能成爲一種負擔。這就是微軟建立TypeScript以幫助開發人員利用面向對象編程原理生成更好的JavaScript 的緣由。

在本文中，咱們將詳細介紹TypeScript的內容，並向您展現如何開始使用它。

什麼是TypeScript？
TypeScript的好處
第1部分）安裝和設置
第2部分）編譯爲JavaScript
第3部分）靜態打字
第4部分）數組
第5部分）接口
第6部分）課程
第7部分）泛型
第8部分）模塊和命名空間
第9部分）第三方聲明文件

什麼是TypeScript？

TypeScript就是所謂的JavaScript超集。它不是JavaScript的替代品，也不會爲JavaScript代碼添加任何新功能。相反，TypeScript容許程序員在其代碼中使用面向對象的構造，而後將其轉換爲JavaScript。它還包括類型安全和編譯時類型檢查等便利功能。最重要的是，它是徹底免費和開源的。

TypeScript 2.3是截至2017年中期的該語言的最新版本。若是您已經熟悉超集但已經不在循環中，TypeScript 2.0引入了一些重大改進，包括更全面的錯誤捕獲以及直接經過npm install獲取聲明文件。

雖然TypeScript是由Microsoft開發的，而且是Visual Studio（IDE軟件）的標準配置 ，但它能夠在任何環境中使用。這個TypeScript教程將爲您提供開發Web項目，生成JavaScript代碼所需的工具。

使用TypeScript有各類好處，其中一些包括：

1.靜態類型，TypeScript代碼比JavaScript 更容易預測且更容易調試。
2. 面向對象的功能（如模塊和命名空間）使組織大型代碼庫更易於管理。
3. 編譯步驟在到達運行時以前捕獲錯誤。
4. 流行的框架Angular是用TypeScript編寫的。雖然您也能夠在Angular中使用常規JavaScript，但您在框架中找到的大多數教程都是用TypeScript編寫的。任何想要充分利用Angular和相似開發平臺的人都會更好地瞭解TypeScript。
5. TypeScript相似於CoffeeScript，另外一種編譯爲JavaScript的語言，但因爲靜態類型，前者比後者更靈活。

第1部分）安裝和設置

Visual Studio 2017已經配備了TypeScript插件，它包含在Visual Studio 2015的更新3中。若是您使用的是舊版本的Visual Studio或其餘環境，則能夠獲取TypeScript源代碼並將其安裝爲一個Node.js包：

npm install -g typescript

安裝後，您能夠開始製做TypeScript文件並將其添加到現有應用程序中。能夠經過*.ts擴展名識別TypeScript文件。每當您保存TypeScript文件時，Visual Studio插件會自動生成一個具備相同名稱的相應JavaScript文件，以供使用。每次建立新的TypeScript項目時，您都會注意到app.ts還生成了包含默認代碼實現的文件。

Visual Studio爲相應的TypeScript和JavaScript文件提供了精彩的並排視圖。每當您保存TypeScript時，您均可以當即看到JavaScript中的更改。

這與您使用codepen.io時相似。使用CodePen，您能夠編寫TypeScript代碼，而後查看已編譯的JavaScript。下面是CodePen中一些未編譯的TypeScript和已編譯的JavaScript代碼的並排比較。

 

image.png

此TypeScript教程中的示例假定您使用的是Visual Studio，但其餘幾個IDE和文本編輯器也提供TypeScript支持，包括自動完成建議，錯誤捕獲和內置編譯器。WebStorm，Vim，Atom，Emacs和Sublime Text都有TypeScript的內置支持或插件。

第2部分）編譯爲JavaScript

因爲.ts文件沒法直接在瀏覽器中使用，所以必須將它們編譯爲常規JavaScript，這能夠經過幾種方式實現。除了使用IDE或像Gulp這樣的自動任務運行器以外，最簡單的方法是使用命令行工具tsc，以下所示：

tsc index.ts 

上面的命令會給你一個名爲的文件index.js。若是.js已存在具備該名稱的文件，則將覆蓋該文件。

也能夠經過簡單地列出它們來一次編譯多個文件：

tsc index.ts main.ts 

您能夠.ts使用如下命令編譯當前文件夾中的全部文件，但請記住它不能遞歸地工做：

tsc * .ts 

要在對文件進行更改時自動編譯，您能夠設置觀察程序進程：

tsc index.ts - watch 

若是你在與許多大型項目的工做.ts文件，它可能有助於建立一個tsconfig.json文件。您能夠在TypeScript文檔中閱讀有關配置文件的更多信息。

第3部分）靜態類型

TypeScript的定義功能是將它與JavaScript和CoffeeScript分開，它是靜態類型，它容許您聲明變量類型。編譯器確保爲變量分配正確的值類型，而且若是省略類型聲明，它甚至能夠進行推斷。

除了「數字」，「布爾」和「字符串」等幾種原始類型以外，您還可使用名爲「any」的動態類型。「Any」相似於C＃中的「dynamic」關鍵字，由於它容許您爲變量分配任何類型的值。所以，TypeScript不會標記「任何」變量的類型錯誤。

變量在TypeScript中聲明的方式與它們在JavaScript中的方式相同。您能夠經過添加冒號和類型名稱來聲明類型：

var num：number = 45; 

在上面的示例中，變量num已分配類型「number」。您能夠閱讀TypeScript文檔中的全部可用數據類型。

第4部分）數組

使用TypeScript，您可使用括號建立數組：

var array：string [] = ['dog'，'cat']; var first：string = array [0]; 

上面的TypeScript會給你如下JavaScript：

var array = ['dog'，'cat']; var first = array [0]; 

如您所見，使用從零開始的索引訪問TypeScript中的數組。您還可使用基本類型構建複雜變量：

var name = {firstName：'Steve'，lastName：'Jobs'}; 

即便您沒有像上例中那樣明確地爲變量指定類型，TypeScript也會推斷出「name」是一個帶有字符串變量的複雜對象。若是您稍後將任何字符串之外的任何內容分配給這些變量中的任何一個，則會出現設計時錯誤。

第5部分）接口

定義接口容許您檢查變量組合以確保它們使用一致。接口不會轉換爲JavaScript; 他們惟一的目的是幫助開發者。例如，您可使用如下屬性和類型定義接口：

interface Food { name: string; calories: number; } 

而後，您能夠告訴函數指望適合「Food」界面的對象，以確保始終可使用正確的屬性：

function speak(food: Food): void { console.log("This " + food.name + " contains " + food.calories + " calories."); } 

如今，當您定義一個具備「Food」接口所需的全部屬性的對象時，將自動推斷出類型。若是TypeScript懷疑您犯了錯誤，編譯器會通知您。例如，請使用如下代碼：

var cherry_pie = { name: "cherry pie", caloreis: 500 } 

在上面的示例中，咱們的某個屬性拼寫錯誤，所以您應該會收到以下錯誤消息：

main.ts(16,7): error TS2345: Argument of type '{ name: string; caloreis: number; } is not assignable to parameter of type 'Food'. Property 'calories' is missing in type '{ name: string; caloreis: number; }'. 

只要存在所需屬性且類型正確，屬性順序可有可無; 若是不是這種狀況，您將收到編譯器的警告，如上所述。

第6部分）類

TypeScript中的類與其餘面嚮對象語言中的類大體相同。自ECMAScript 2015更新發布以來，類如今也是JavaScript的原生類，但類的規則在TypeScript中更嚴格一些。

您能夠建立一個簡單的TypeScript類，以下所示：

class Menu { items: Array<string> pages: number; } 

默認狀況下，屬性是公共的，但能夠將它們設爲私有。一旦創建了一些類，就能夠設置構造函數來簡化建立新對象的過程。

您也能夠將一塊兒使用的小的類（如Point，Size和Rectangle）組合到一個文件中，而不是爲每一個類提供本身的文件。嘗試將這些組合類保留在150行代碼下以免任何問題。

第7部分）泛型

使用不一樣類型的變量時，設置泛型可能會有所幫助。泛型是可重用的模板，容許單個函數接受不一樣類型的參數。因爲泛型保留類型，所以該技術優於過分使用「任何」類型變量。

看一下下面的腳本，它接收一個參數並返回一個包含相同參數的數組。函數名後面的「T」表示通用名稱。調用該函數時，全部「T」實例將被提供的類型替換：

function genericFunc<T>(argument: T): T[] {
    var arrayOfT: T[] = [];
    arrayOfT.push(argument);
    return arrayOfT; } var arrayFromString = genericFunc<string>("beep"); console.log(arrayFromString[0]); console.log(typeof arrayFromString[0]) var arrayFromNumber = genericFunc(45); console.log(arrayFromNumber[0]); console.log(typeof arrayFromNumber[0]) 

在上面的示例中，當咱們第一次調用函數時，手動將類型設置爲字符串。此步驟不是必需的，由於編譯器知道哪一個參數已被傳遞，而且能夠在下次調用函數時推斷出哪一種類型是合適的。

即便它不是必需的，可是養成在編譯器出錯時始終提供類型的習慣是很好的，這可能會隨着代碼變得更復雜而發生。將泛型與接口相結合實際上能夠保證生成的JavaScript完美無瑕。

第8部分）模塊和命名空間

模塊提供了另外一種組織和合並代碼的方法。若是有效使用，將代碼拆分爲可重用組件能夠減小項目的文件數量，從而使維護更加容易。在TypeScript中，內部模塊稱爲「名稱空間」，而外部模塊稱爲模塊。

TypeScript具備導出和導入模塊的特殊語法; 可是，語言不能直接處理文件之間的連線，因此咱們須要一些第三方庫來方便外部模塊的使用。具體來講，咱們請使用RequireJS爲瀏覽器的應用程序或CommonJS的對Node.js的。

想象一下，您正在使用瀏覽器應用程序，而且您有兩個.ts文件：一個用於導出功能; 另外一個用於導入和調用該函數。它們看起來以下：

exporter.ts

var sayHi = function(): void { console.log("Hello!"); } export = sayHi; importer.ts import sayHi = require('./exporter'); sayHi(); 

如今，要實現您的模塊，首先須要下載require.js並將其粘貼到腳本標記上。而後，您必須設置一個額外的參數，讓TypeScript知道您正在使用require.js，其操做以下：

tsc --module amd * .ts 

學習如何在TypeScript中使用模塊須要時間，但收益是巨大的。您能夠在模塊上的TypeScript文檔中閱讀有關它們的更多信息。

第9部分）第三方聲明文件

當您須要使用最初用於常規JavaScript的庫時，必須應用聲明文件以使其與TypeScript兼容。具備擴展名的聲明文件包含.d.ts有關庫及其API的信息。您能夠手動製做本身的聲明文件，但您能夠輕鬆找到.d.ts其餘人已經建立的任何庫的文件。

最好看的地方是DefinitelyTyped，這是一個龐大的公共存儲庫，擁有數千個庫。當你在那裏時，你也能夠選擇Typings，一個方便的Node.js模塊來管理你的TypeScript定義。

TypeScript教程摘要

使用TypeScript幾乎老是比直接編寫JavaScript更好。即便您對JavaScript徹底熟悉，花些時間學習TypeScript也會讓您成爲更快，更高效的Web開發人員。可是，TypeScript並非惟一的「替代」JavaScript語言。其餘受歡迎的選擇包括CoffeeScript（如前所述），Babel、Elm。

做者：HowardHuang連接：https://www.jianshu.com/p/70a03e21936c來源：簡書簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。