TypeScript檔案程式碼

一、最簡單介面使用

JavaScript檔案程式碼

/*********獲取使用者資訊*******/

function getUserInfo(user) {

    return user.age + "======" + user.userName;

}

//用一個數組物件作為一個user物件傳值過getUserInfo函式方法..引數必須要以介面IUserInfo對應上.

//少傳一個引數，typescript會自動幫你檢測報錯,如果用純javascript去寫的話，不會報錯，ts大大減少檢查js問題

//如：var userObj={userName:'周伯通'};//error

var userObj = { userName: '周伯通', age: 100 };

$(function () {

    //定義變數接收值..

    var userInfo = getUserInfo(userObj);

    console.log(userInfo);

});

2自選屬性Optional Properties

Ts檔案程式碼

Ts編譯生成的js檔案程式碼
/**
 * Not all properties of an interface may be required.
 * Some exist under certain conditions or may not be there at all
 *並非需要一個介面的所有屬性。在某些條件下的一些存在或可以不存在的。
 *這句話說的是：就算你SquareConfig介面定義的變數是color，到呼叫createSquare的時候你給color1變數照樣可以取出z值來
 *這個值只不過是：預設的newSquare的white值，如果是一樣的color變數他就會取出你給賦格物件的color(red)
 */
/***************建立一個物件function.**************/
function createSquare(config) {
    //此時newSquare裡面的引數必須與 :後面裡面的引數名稱一致.
    var newSquare = { color: "white", area: 100 };
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = newSquare.area * config.width;
    }
    return newSquare;
}
//--createSquare返回的物件是newSquare，所有隻能獲取color和area並獲取不了width這個屬性的值..
var mySquare1 = createSquare({ color: "red" }); //與介面的變數color一樣，此時這個值是取出是預設值color=red
var mySquare2 = createSquare({ color1: "red" }); //與介面的變數color不一樣，此時這個值是取出是預設值color=white
console.log(mySquare1.color + "==" + mySquare1.area); //
console.log(mySquare2.color + "==" + mySquare2.area); //
var mySquare3 = createSquare({ color: "yellow", width: 80 }); //這裡給了兩個變數值，一個是color，一個是width
console.log(mySquare3.color + "==" + mySquare3.area); //所以這個值必須等於8000

3JavaScript的search函式

Ts檔案程式碼
//--typescript的function型別結合javascript的search函式使用
interface searchFunt{
    //宣告一個兩個變數..
    (source: string, subString: string): boolean;
}
var mySearch : searchFunt;//宣告一個interface變數接收
    mySearch = function(source:string,subString:string){
   var result = source.search(subString);
      if (result == -1) {
        return false;
      }
      else {
        return true;
      }
}

$(function(){
      var source:string ="this is ok";
      var subString1:string ="ok";
      var subString2:string ="not";
      var result:boolean;
      var result1= mySearch(source,subString1);//從source字串上面找ok，返回值是true
      var result2= mySearch(source,subString2);//從source字串上面找not，返回值是false
      alert(result1);//
      alert(result2);
});


Ts編譯生成的js檔案程式碼
//--typescript的function型別結合javascript的search函式使用
var mySearch; //宣告一個interface變數接收
mySearch = function (source, subString) {
    var result = source.search(subString);
    if (result == -1) {
        return false;
    }
    else {
        return true;
    }
};
$(function () {
    var source = "this is ok";
    var subString1 = "ok";
    var subString2 = "not";
    var result;
    var result1 = mySearch(source, subString1); //從source字串上面找ok，返回值是true
    var result2 = mySearch(source, subString2); //從source字串上面找not，返回值是false
    alert(result1); //
    alert(result2);
});

4.4介面定義Array型別
Ts檔案程式碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//Array Types

interface StringArray {
  [index: number]: string;
  //length: number;
}
var myArray:StringArray;
myArray = ["Bob", "Fred"];

$(function(){
      $.each(myArray,function(key,val){
         alert(val);
      });
});

Ts編譯生成的js檔案程式碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//Array Types
var myArray;
myArray = ["Bob", "Fred"];
$(function () {
    $.each(myArray, function (key, val) {
        alert(val);
    });
});
4.5class實現implements介面

Ts檔案程式碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//Class Types(implements)
 interface IClock {
    currentTime: Date;
    setTime(d: Date);
}
//--實現IClock介面
class Clock implements  IClock{
    currentTime:Date;
    constructor(h: number, m: number) { }//--建構函式方法
    setTime(d:Date){
        this.currentTime=d;   
    }
}
 //--------------------------------------------------
interface IClock1 {
     new (hour: number, minute: number);
}
class Clock1  {
    currentTime: Date;
    constructor(h: number, m: number) { }
}
var cs: IClock1 = Clock1;
var newClock = new cs(7, 30);
console.log(newClock);  
 

Ts編譯生成的js檔案程式碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//--實現IClock介面
var Clock = (function () {
    function Clock(h, m) {
    } //--建構函式方法
    Clock.prototype.setTime = function (d) {
        this.currentTime = d;
    };
    return Clock;
})();
var Clock1 = (function () {
    function Clock1(h, m) {
    }
    return Clock1;
})();
var cs = Clock1;
var newClock = new cs(7, 30);
console.log(newClock);


4.6擴充套件介面Extending Interfaces 
Ts檔案程式碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />

//Extending Interfaces
interface IShape{ 
    color:string;
}
interface PenStroke {
    penWidth: number;
}
//--介面繼承介面,用，分割開多繼承.
interface ISquare extends IShape,PenStroke {
    sideLength: number;
}
//---賦值..
var square = <ISquare>{};

square.color="red";
square.sideLength=100;
square.penWidth=50;


Ts編譯成的js檔案程式碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//---賦值..
var square = {};
square.color = "red";
square.sideLength = 100;
square.penWidth = 50;


4.7混合型Hybrid Types
Ts檔案程式碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//Hybrid Types(混合型)
//--計算器
interface Counter  {
   (start: number): string;//宣告一個開始變數
   interval:number;//宣告一個間隔變數
   reset(): void;//宣告一個重置function方法
}
var c: Counter;
c(10);//開始.
c.interval=5.0;
c.reset();//重置.

Ts編譯成js檔案程式碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
var c;
c(10); //開始.
c.interval = 5.0;
c.reset(); //重置.