TypeScript接口

来源：互联网发布：淘宝大麦网编辑：程序博客网时间：2024/05/01 02:17

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

0 0