TypeScript學習筆記

與JS對比

優勢：

1 ts是js的一個超集，兼容js，能夠載入JS代碼而後運行。

2 加入註釋，讓編譯器理解所支持的對象和函數，編譯器會移除註釋，不會增長開銷。

3 經過類型註解提供編譯時的靜態類型檢查。

4 ts 最大的特色就是類型化，所以才叫作TypeScript。比起弱類型的js，類型化的TypeScript顯得更加容易維護

 

語法特色：

1.聲明變量類型

經過var關鍵字 變量名後面+冒號 + 數據類型來指定

var name: string = "bob";

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

var arr:Array = [1,2,3,"a","b","c"]; // 任意類型數組

var list: any[] = [1, true, "free"];

2.enum

enum Color {
  Red,　　　//枚舉元素列表
  Green,
  Blue
};
var c: Color = Color.Green;

3.函數

可選參數：在參數名後面，冒號前面添加一個問號，則代表該參數是可選的。
function buildName(firstName: string, lastName?: string) {}//lastName爲可選參數

默認參數：在參數名後直接給定一個值，若是這個值沒有被傳入，那麼將會被賦值爲默認值。
function buildName(firstName: string, lastName = "Smith") {}

4.類

class 類名{
  name:string;  //定義類的屬性
 
  fun(){ //定義了一個無返回值的方法
           //定義該方法所要實現的功能
  }
  say():string{ //定義返回值類型爲string的方法
           //定義該方法所要實現的功能
         return "返回值"; // 用return關鍵字返回函數值
  }
}

5.接口

在TypeScript中，接口是用做約束做用的，在編譯成JavaScript的時候，全部的接口都會被擦除掉，由於 JavaScript中並無接口這一律念。TypeScript中接口是用關鍵字interface進行聲明

interface LabelledValue { //定義接口
  label: string;          //定義屬性
}

//在 TypeScript 中，咱們可使用接口來約束方法的簽名。
interface SearchFunc {  
  (source: string, subString: string): boolean; //定義一個匿名方法
}
 
var mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {  //實現接口
  var result = source.search(subString);  //調用系統方法search查找字符串的位置
  if (result == -1) {
    return false;
  }
  else {
    return true;
  }
}

//約束數組類型
interface StringArray { //定義數組接口
  [index: number]: string;  //每一個數組元素的類型
}
 
var myArray: StringArray; 
myArray = ["Bob", "Fred"];

//約束class類型
interface IPrint{
  print();
}
 
class A implements IPrint  { //實現接口
  print(){  //實現接口中的方法
      document.write("實現接口");
  }
}
 
var B=new A();  
B.print();

//接口繼承
interface Shape {
    color: string;
}
 
interface PenStroke {
    penWidth: number;
}
 
interface Square extends Shape, PenStroke {
    sideLength: number;
}
//須要注意的是，儘管支持繼承多個接口，可是若是繼承的接口中，定義的同名屬性的類型不一樣的話，是不能編譯經過的。以下代碼：
interface Shape {
    color: string;
    test: number;
}
 
interface PenStroke extends Shape{
    penWidth: number;
    test: string;
}

備註：

1 使用 ts 必須先編譯，編譯的結果是生成 js 文件，你可經過 TypeScript編譯器 tsc 命令來完成這個過程。

2：不要將TypeScript看做是一門新的語言，它只是爲了提高JavaScript代碼質量的一個工具，最終TypeScript仍然要編譯成JavaScript。

在線編譯連接：http://www.typescriptlang.org/play/index.html