【第3篇】TypeScript接口詳解

1、聲明一個接口

/**--聲明一個接口，這個接口不會在js上面出現(xiàn)，只會在顯示一個user對象在getUserInfo*/

interface IUserInfo{
    age : any;//定義一個任何變量的age.
    userName :string;//定義一個username.
}
 
/*********獲取用戶信息*******/
function getUserInfo(user : IUserInfo):string{
    return  user.age+"======"+user.userName;
}

//用一個數(shù)組對象作為一個user對象傳值過getUserInfo函數(shù)方法..
//參數(shù)必須要以接口IUserInfo對應(yīng)上.

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

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

$(function(){
    //定義變量接收值..
   var userInfo:string= getUserInfo(userObj);
    console.log(userInfo);
});

2、TypeScript生成的JavaScript文件代碼

/*********獲取用戶信息*******/
function getUserInfo(user) {
    return user.age + "======" + user.userName;
}

//用一個數(shù)組對象作為一個user對象傳值過getUserInfo函數(shù)方法.
//.參數(shù)必須要以接口IUserInfo對應(yīng)上.
//少傳一個參數(shù)，typescript會自動幫你檢測報錯,如果用純javascript去寫的話，
//不會報錯，ts大大減少檢查js問題

//如：var userObj={userName:'周伯通'};//error
var userObj = { userName: '周伯通', age: 100 };
$(function () {
    //定義變量接收值..
    var userInfo = getUserInfo(userObj);
    console.log(userInfo);
});

2 、自選屬性O(shè)ptional Properties

  • Ts文件代碼
/**
 * Not all properties of an interface may be required. 
 * Some exist under certain conditions or may not be there at all
 *并非需要一個接口的所有屬性。在某些條件下的一些存在或可以不存在的。
 *這句話說的是：就算你SquareConfig接口定義的變量是color，到調(diào)用createSquare的時候你給color1變量照樣可以取出z值來
 *這個值只不過是：默認(rèn)的newSquare的white值，
* 如果是一樣的color變量他就會取出你給賦格對象的color(red)
 */
interface SquareConfig {
  color?: string;//
  width?: number;
}

/***************創(chuàng)建一個對象function.**************/
function createSquare(config: SquareConfig): {color: string; area: number} {
    //此時newSquare里面的參數(shù)必須與 :后面里面的參數(shù)名稱一致.
     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這個屬性的值..
//與接口的變量color一樣，此時這個值是取出是默認(rèn)值color=red
var mySquare1 = createSquare({color: "red"});
//與接口的變量color不一樣，此時這個值是取出是默認(rèn)值color=white
var mySquare2 = createSquare({color1: "red"});

console.log(mySquare1.color+"=="+mySquare1.area);//
console.log(mySquare2.color+"=="+mySquare2.area);//
 
//這里給了兩個變量值，一個是color，一個是width
var mySquare3 = createSquare({color: "yellow",width:80});

console.log(mySquare3.color+"=="+mySquare3.area);//所以這個值必須等于8000
  • Ts編譯生成的js文件代碼
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，到調(diào)用* createSquare的時候你給color1變量照樣可以取出z值來
 *這個值只不過是：默認(rèn)的newSquare的white值，如果是一樣的color變量他就會取出你給賦格對象的color(red)
 */
/***************創(chuàng)建一個對象function.**************/
function createSquare(config) {
    //此時newSquare里面的參數(shù)必須與 :后面里面的參數(shù)名稱一致.
    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一樣，此時這個值是取出是默認(rèn)值color=red
var mySquare2 = createSquare({ color1: "red" }); //與接口的變量color不一樣，此時這個值是取出是默認(rèn)值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

3 JavaScript的search函數(shù)

Ts文件代碼
//--typescript的function類型結(jié)合javascript的search函數(shù)使用
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類型結(jié)合javascript的search函數(shù)使用
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、.接口定義Array類型

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);
    });
});

5 、class實現(xiàn)implements接口

  • Ts文件代碼
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//Class Types(implements)
 interface IClock {
    currentTime: Date;
    setTime(d: Date);
}
//--實現(xiàn)IClock接口
class Clock implements  IClock{
    currentTime:Date;
    constructor(h: number, m: number) { }//--構(gòu)造函數(shù)方法
    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" />
//--實現(xiàn)IClock接口
var Clock = (function () {
    function Clock(h, m) {
    } //--構(gòu)造函數(shù)方法
    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);

6、 擴(kuò)展接口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;

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(); //重置.

工程源代碼

TypeScript Interfaces詳解

博客所有文章是本人2014年撰寫,而GItHub的源代碼是有些是2014年與2015年進(jìn)行整理，由于在2013年項目接觸TypeScript，同時在當(dāng)年接觸KendoUI開發(fā)的時候TypeScript的影子，故一年后決定把官方文檔所有API文檔認(rèn)真琢磨了一遍，并且撰寫成一本最全的中文TypeScript入門指南詳解案例教程與代碼,當(dāng)初的下載量還是比較高的。由于最近接觸Kotlin，自從學(xué)習(xí)TypeScript，它的語法對我后面學(xué)習(xí)Kotlin有了極大的幫助，個人感覺，它的語法跟ActionScript，Swift寫法很像。故雖然好幾年沒怎么開發(fā)前端，由于它的重要性特意重新花點進(jìn)行整理這門前端語言。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容