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写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。

转载于:https://www.jianshu.com/p/074c8aacb630

【第3篇】TypeScript接口详解

1、声明一个接口

2、TypeScript生成的JavaScript文件代码

2 、自选属性Optional Properties

3 JavaScript的search函数

4、.接口定义Array类型

5 、class实现implements接口

6、扩展接口Extending Interfaces

7 、混合型Hybrid Types

工程源代码

猜你喜欢

【第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