TypeScript接口

1.创建接口

ts:

/*
function printLabel(labelObj:{label:string}){
    alert(labelObj.label);//Hello
}

var myObj = {label:"Hello"};

printLabel(myObj);*/

interface labelValue{
    label:string;
}

function printLabel(labelObj:labelValue){
    alert(labelObj.label);//mm
}

var myObj = {label:"mm"};
printLabel(myObj);

对应js:

function printLabel(labelObj) {
    alert(labelObj.label); //mm
}
var myObj = { label: "mm" };
printLabel(myObj);

2.可选属性

ts:

interface USB{
    name:string;
    ang:number;
    sex?:string;//可选参数,可以传,其它必须用
}

function printUSB(pu:USB){
    alert(pu.age);//2
}

var my={name:"mm",age:2};
printUSB(my);

对应js:

function printUSB(pu) {
    alert(pu.age); //2
}
var my = { name: "mm", age: 2 };
printUSB(my);

3.函数类型

ts:

interface SearchFunc{
    (source:string,subString:string):boolean;
}

var mySearch:SearchFunc;

//mySearch = function (source:string,subString:string) {
//    var result = source.search(subString);
mySearch = function (src:string,sub:string) {//类型检查不针对名称,只针对类型
    var result = src.search(sub);//search:针对字符串的查询

    if(result != -1){
        return true;
    }else{
        return false;
    }
};

alert(mySearch("mm","m"));//true

对应js:

var mySearch;
mySearch = function (src, sub) {
    var result = src.search(sub); //search:针对字符串的查询
    if (result != -1) {
        return true;
    }
    else {
        return false;
    }
};
alert(mySearch("mm", "m")); //true

4.数组类型

ts:

interface StringArray{
    [index:number]:string;
}

var myArray:StringArray;
myArray=["m1","m2",""];//string类型
alert(myArray[1]);//m2

对应js:

var myArray;
myArray = ["m1", "m2", ""]; //string类型
alert(myArray[1]); //m2

5.Class类型

ts:

interface ClockInterface{
    currentTime:Date;
    setTime(d:Date);
}

class Clock implements ClockInterface{
    currentTime:Date;
    setTime(d:Date){
        this.currentTime = d;
    }
    constructor(h:number,m:number){

    }
}

对应js:

var Clock = (function () {
    function Clock(h, m) {
    }
    Clock.prototype.setTime = function (d) {
        this.currentTime = d;
    };
    return Clock;
})();

6.接口继承与混合类型

ts:

/*接口继承*/
interface Shape{
    color:string;
}

interface PenStroke{
    penWidth:number;
}

interface Square extends Shape,PenStroke{//多继承
    sideLength:number;
}

<strong>var s = <Square>{};//书写格式
</strong>s.color = "blue";
s.sideLength = 10;
s.penWidth = 10;

/*
混合类型*/

interface Counter{
    interval:number;
    reset():void;//方法
    (start:number):string;
}

var c:Counter;
c(10);
c.reset();

对应js:

var s = {}; //书写格式
s.color = "blue";
s.sideLength = 10;
s.penWidth = 10;
var c;
c(10);
c.reset();