TypeScript學習起步

TypeScript是一種由微軟開發的支持ES6標準的編程語言,它是Angular2的開發語言,是javascript的超集。TypeScript擴展了Javascript的語法,任何已

經存在的Javascript程序可以不加任何改動的在TypeScript的環境下運行。TypeScript只是向Javascript添加了一些新的遵循ES6規範的語法以及基於類

的面向對象編程的特性。它可以編譯成純Javascript,可以在任何瀏器,任何計算機和任何操作系統上運行,並且是開源的。

ES5  ES6  JavaScript  TypeScript間的關係

ES是客戶端腳本語言的規範,ES5、ES6是這個規範不同的版本,JavaScript和TypeScript是兩種客戶端腳本語言,JavaScript實現了ES5規範, 

TypeScript實現了ES6規範。

TypeScript相對於JavaScript的優勢

1. TypeScript支持ES6規範

ES6規範在2015年發佈,它指出了未來一段時間內客戶端腳本語言的發展方向。也就是說TypeScript語法在未來一段時間內將成爲客戶端腳本語言的主流語法。

2. 強大的IDE支持

強大的IDE支持主要體現在三個特性上:

<1>. 類型檢查:在TypeScript裏面是允許你爲變量指定類型的,比如聲明瞭一個字符串變量,那麼當我爲變量制定一個數字類型的值的時候,IDE會做出類型檢查,會告訴你這

裏可能有錯誤。這個特性會減少在開發階段犯錯誤的機率。

<2>. 語法提示:在IDE裏編寫TypeScript的代碼時,IDE會根據你當前所處的上下文把你能用的類、變量、方法和關鍵字都提示出來,我們只要直接去選就可以了。這個特性會

大大提高開發效率。

<3>. 重構:可以很方便的去修改你的變量、方法的名字或者是文件的名字。當我們做了這些修改的時候,IDE會自動幫你吧引用的變量或者調用這個方法的代碼自動幫你修改

掉。這個特性可以提高開發效率,提高代碼質量。

推薦WebStorm開發TypeScript程序,查看《使用WebSorm開發TypeScript的設置》

3. Angular2的開發語言

最新的Angular2就是由TypeScript寫成的,所以熟悉TypeScript對學習Angular有很大幫助。

搭建TypeScript開發環境

有兩種主要的方式安裝TypeScript工具

  • 通過npm(Node.js包管理器)
  • 安裝TypeScript的Visual Studio插件

這裏只講述通過npm的方式安裝TypeScript:

1.安裝npm

$ curl http://npmjs.org/install.sh | sh
$  npm --v
4.4.1

2.安裝TypeScript npm包

$ npm install -g typescript

安裝完成後我們就可以使用 TypeScript 編譯器,名稱叫 tsc,可將編譯結果生成 js 文件。

要編譯 TypeScript 文件,可使用如下命令:

tsc  filename.ts

一旦編譯成功,就會在相同目錄下生成一個同名 js 文件,你也可以通過命令參數來修改默認的輸出名稱。默認情況下編譯器以ECMAScript 3(ES3)

爲目標但ES5也是受支持的一個選項。TypeScript增加了對ECMAScript 6標準所建議的特性的支持。

創建Hello World示例

首先,創建一個index.html文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Learning TypeScript</title>
	</head>
	<body>
		<script src="js/hello.js"></script>
	</body>
</html>

創建hello.ts文件,*.ts是TypeScript文件的後綴,向hello.ts文件添加如下代碼:

alert('hello world in TypeScript!');

接下來,打開命令行,使用tsc命令編譯hello.ts文件:

$ tsc hello.ts

此時,在相同目錄下就會生成一個hello.js文件,然後在瀏覽器中打開index.html輸出結果如下:


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