TypeScript入門

langyahappy發表於2015-08-13
TypeScript

一、TypeScript

　　 TypeScript是一種由微軟開發的自由和開源的程式語言。它是JavaScript的一個超集，相容JavaScript，可以載入JS程式碼然後執行。它與JavaScript相比進步的地方包括：加入註釋，讓編譯器理解所支援的物件和函式，編譯器會移除註釋，不會增加開銷。 而JavaScript只是一個指令碼語言，並非設計用於開發大型 Web 應用，JavaScript 沒有提供類和模組的概念，而TypeScript擴充套件實現了這些特性。

　　它擴充套件了 JavaScript 的語法，因此現有的JavaScript程式碼可與其程式碼一起工作無需任何修改，它通過型別註解提供編譯時的靜態型別檢查。TypeScript可處理已有的JavaScript程式碼，並只對其中的TypeScript程式碼進行編譯。

　　TypeScript 最大的特點就是型別化，因此才叫做TypeScript。比起弱型別的JavaScript，型別化的TypeScript顯得更加容易維護。

　　要在應用中使用 TypeScript 必須先編譯，編譯的結果是生成 js 檔案，你可通過 TypeScript 編譯器 tsc 命令來完成這個過程。如要編譯test.ts(TypeScript檔案的副檔名為.ts)，可用如下命令：

tsc test.ts

　　編譯完成後就會在當前目錄生成名為test.js的檔案。

　　注：不要將TypeScript看作是一門新的語言，它只是為了提升JavaScript程式碼質量的一個工具，最終TypeScript仍然要編譯成JavaScript。

二、Hello World

　　前面我們介紹了什麼是TypeScript，那我們就先來看一個經典的程式Hello World。程式碼如下：

<script type="text/typescript">
  var hw:string="Hello World!";     //定義一個字串變數
  document.write(<h1>"+hw+"</h1>);  //將結果顯示在頁面上，這句話是不是很熟悉呢。

　　看到這裡同學們是不是感覺很熟悉，沒有錯，就是這樣，我們可以把javascript的程式碼用到TypeScript裡面執行。同學們也看到上面的程式碼是寫在script標籤中，注意其中的型別是typescript。如果想在頁面上直接編譯看到結果，還需要引用typescript.min.js與typescript.compile.min.js。如下程式碼：

<html>
<head>
  <title>demo</title>
</head>
<body>
  <script type="text/typescript">
     // TypeScript程式碼
  </script>
  <script src="lib/typescript.min.js"></script>
  <script src="lib/typescript.compile.min.js"></script>
</body>
</html>

三、對比

　　我們先寫一個TypeScript的例子，如下程式碼，定義一個學生類(在後面的內容中介紹）,然後呼叫：

class Student{
   name:string;
   age:number;
}
var s1=new Student();
s1.name="Jim";
s1.age=20;

document.write("name:"+s1.name+" age:"+s1.age);

　　 我們再來看用TypeScript編譯以後的JavaScript程式碼：

var Student = (function () {
    function Student() {
    }
    return Student;
})();
var s1 = new Student();
s1.name = "Jim";
s1.age = 20;

document.write("name:" + s1.name + " age:" + s1.age);

　　通過對程式碼的對比，是不是感覺TypeScript程式碼更簡潔，更好理解，更易於維護。是不是感覺與C#,Java,C++類似。

四、型別

　　TypeScript 的基本資料型別 有boolean、number 、string 、 array 、 enum 、any 、void。首先我們要講的是boolen。

　　最基本的資料型別是簡單的真/假值，其中JavaScript和TypeScript（以及其他語言）稱之為“布林值”。在JavaScript中變數的定義是通過var關鍵字來完成，而在TypeScript中變數的定義格式為：

　　通過var關鍵字 變數名後面+冒號 + 資料型別來指定

　　1.如定義一個boolen的變數:

var isDone: boolean = false;

　　2.用在JS與TS中的所有數值都是浮點型，而在TS中我們定義他們為“number”型。例如：宣告一個number型別的變數如下程式碼：

var isNumber:number=6;

var isfloat:number=6.01;

　　3.string代表字串，跟 JavaScript 一樣，可以使用一對雙引號(")或一對單引號(')來表示字串。例如：

var name: string = "bob";

var family_name: string = 'Green';

　　4.TypeScript 中陣列使用“[]”來宣告，程式碼如下:

var list: number[] = [1, 2, 3];
var name: string[] = ["阿龍","阿貓","阿狗"];

alert(list[0]));


var arr:Array = [1,2,3,"a","b","c"]; // 任意型別陣列關鍵字Array

alert(arr1);

　　5.列舉型別是 TypeScript 中新新增的，而 JavaScript 中是沒有這個型別的。用關鍵字enum來宣告。程式碼示例如下：

enum Color {
  Red,　　　//列舉元素列表
  Green,
  Blue
};

var c: Color = Color.Green;

　6.任意型別，和 JavaScript 中變數的預設型別一樣，指代是動態的，能夠賦予任意型別。例如：

var notSure: any = 4;
notSure = "maybe a string instead";

notSure = false; // 定義為boolen型

　　7.void，這個型別僅能在函式中使用，可以將函式的返回型別指定為 void，表示該函式不返回任何值。程式碼如下:

function warnUser(): void {
  alert("This is my warning message");

}

　　免費的互動練習和更多的入門學習內容放在這個頁面上：
　　 http://www.hubwiz.com/course/55b724ab3ad79a1b05dcc26c/

相關文章