TypeScript基礎教程(筆記+應用快速上手)

什麼是 TypeScript?
TypeScript 是一種由微軟開發的自由和開源的編程語言,它是JavaScript的一個超集,擴展了JavaScript的語法。
它不是JavaScript的替代品,也不會爲JavaScript代碼添加任何新功能。相反,TypeScript允許程序員在其代碼中使用面向對象的構造,然後將其轉換爲JavaScript。
TypeScript的優點:
**1.**靜態類型,TypeScript代碼比JavaScript 更容易預測且更容易調試。
2. 面向對象的功能(如模塊和命名空間)使組織大型代碼庫更易於管理。
3. 編譯步驟在到達運行時之前捕獲錯誤。
4. 流行的框架Angular是用TypeScript編寫的。雖然也可以在Angular中使用常規JavaScript,但您在框架中找到的大多數教程都是用TypeScript編寫的。任何想要充分利用Angular和類似開發平臺的人都會更好地瞭解TypeScript。
5. TypeScript類似於CoffeeScript,另一種編譯爲JavaScript的語言,但由於靜態類型,前者比後者更靈活。

JavaScript、TypeScript、ES6三者之間的聯繫和區別
ES6是什麼
ECMAScript 6.0(以下簡稱ES6)是JavaScript語言(現在是遵循ES5標準)的下一代標準,已經在2015年6月正式發佈了。它的目標,是使得JavaScript語言可以用來編寫複雜的大型應用程序,成爲企業級開發語言。

ECMAScript和JavaScript的關係
由於JavaScript的創造者Netscae公司的版權問題,ECMAScript不能叫Javascript。總之,ECMAScript和JavaScript的關係是,前者是後者的規格(語言規範),後者是前者的一種實現。

JavaScript 與 TypeScript 的關係
TypeScript是Javascript的超集,實現以面向對象編程的方式使用Javascript。當然最後代碼還是編譯爲Javascript。

TypeScript和ES6的關係
TypeScript是ES6的超集。至於需不需要使用,在於你所需要的場景。比如在Angular2中,用TypeScript明顯好於ES6。

總結一下:
ES6是Javascript語言的標準,typescript是ES6的超集,Angular2是基於typescript來開發的JS框架。

快速上手TypeScript

有兩種主要的方式來獲取TypeScript工具:
通過npm(Node.js包管理器)
安裝Visual Studio的TypeScript插件
Visual Studio 2017和Visual Studio 2015 Update 3默認包含了TypeScript。
使用npm安裝:

npm install -g typescript

在編輯器,將下面的代碼輸入到greeter.ts文件裏:
function greeter(person) {
return "Hello, " + person;
}
let user = “Jane User”;
document.body.innerHTML = greeter(user);
編譯代碼
使用了.ts擴展名,但是這段代碼僅僅是JavaScript而已。 可以直接從現有的JavaScript應用裏複製/粘貼這段代碼。
在命令行上,運行TypeScript編譯器
tsc greeter.ts

輸出結果爲一個greeter.js文件,它包含了和輸入文件中相同的JavsScript代碼。 接下來可以運行這個使用TypeScript寫的JavaScript應用了。

接下來是TypeScript工具帶來的高級功能。 給 person函數的參數添加: string類型註解,如下:
function greeter(person: string) {
return "Hello, " + person;
}
let user = “Jane User”;
document.body.innerHTML = greeter(user);

類型註解
TypeScript裏的類型註解是一種輕量級的爲函數或變量添加約束的方式。 在這個例子裏,讓greeter函數接收一個字符串參數。 然後嘗試把 greeter的調用改成傳入一個數組:
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);

類似地,嘗試刪除greeter調用的所有參數。 TypeScript會告訴使用了非期望個數的參數調用了這個函數。 在這兩種情況中,TypeScript提供了靜態的代碼分析,它可以分析代碼結構和提供的類型註解。
接口
開發一個示例應用。這裏用接口來描述一個擁有firstName和lastName字段的對象。 在TypeScript裏,只在兩個類型內部的結構兼容那麼這兩個類型就是兼容的。 這就允許我們在實現接口時候只要保證包含了接口要求的結構就可以,而不必明確地使用 implements語句。
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: “Jane”, lastName: “User” };
document.body.innerHTML = greeter(user);


最後,使用類來改寫這個例子。 TypeScript支持JavaScript的新特性,比如支持基於類的面向對象編程。
創建一個Student類,它帶有一個構造函數和一些公共字段。
要注意的是,在構造函數的參數上使用public等同於創建了同名的成員變量。
class Student {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student(“Jane”, “M.”, “User”);
document.body.innerHTML = greeter(user);

重新運行tsc greeter.ts,會看到生成的JavaScript代碼和原先的一樣。 TypeScript裏的類只是JavaScript裏常用的基於原型面向對象編程的簡寫。
運行TypeScript Web應用
在greeter.html裏輸入如下內容:

TypeScript Greeter

在瀏覽器裏即可打開greeter.html運行這個應用!

這就是TypeScript的簡單應用

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章