【第3篇】TypeScript接口详解

1、声明一个接口

/**--声明一个接口，这个接口不会在js上面出现，只会在显示一个user对象在getUserInfo*/

interface IUserInfo{
    age : any;//定义一个任何变量的age.
    userName :string;//定义一个username.
}
 
/*********获取用户信息*******/
function getUserInfo(user : IUserInfo):string{
    return  user.age+"======"+user.userName;
}

//用一个数组对象作为一个user对象传值过getUserInfo函数方法..
//参数必须要以接口IUserInfo对应上.

//少传一个参数，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;
}

//用一个数组对象作为一个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文件代码

/**
 * 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)
 */
interface SquareConfig {
  color?: string;//
  width?: number;
}

/***************创建一个对象function.**************/
function createSquare(config: SquareConfig): {color: string; area: number} {
    //此时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这个属性的值..
//与接口的变量color一样，此时这个值是取出是默认值color=red
var mySquare1 = createSquare({color: "red"});
//与接口的变量color不一样，此时这个值是取出是默认值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，到调用* 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

3 JavaScript的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、.接口定义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实现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);

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;

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年进行整理，由于在2013年项目接触TypeScript，同时在当年接触KendoUI开发的时候TypeScript的影子，故一年后决定把官方文档所有API文档认真琢磨了一遍，并且撰写成一本最全的中文TypeScript入门指南详解案例教程与代码,当初的下载量还是比较高的。由于最近接触Kotlin，自从学习TypeScript，它的语法对我后面学习Kotlin有了极大的帮助，个人感觉，它的语法跟ActionScript，Swift写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343

【第3篇】TypeScript接口详解

1、声明一个接口

2、TypeScript生成的JavaScript文件代码

2 、自选属性Optional Properties

3 JavaScript的search函数

4、.接口定义Array类型

5 、class实现implements接口

6、 扩展接口Extending Interfaces

7 、混合型Hybrid Types

工程源代码

推荐阅读更多精彩内容

6、扩展接口Extending Interfaces