【第3篇】TypeScript接口使用

最新推荐文章于 2024-05-26 18:34:42 发布

爱学习的蹭蹭

最新推荐文章于 2024-05-26 18:34:42 发布

阅读量4.9k

点赞数

分类专栏： TypeScript 文章标签： typescript

本文链接：https://blog.csdn.net/jilongliang/article/details/47355157

版权

TypeScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

TypeScript文件代码

一、最简单接口使用

/**--声明一个接口，这个接口不会在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);

});

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这个属性的值..

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

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

3JavaScript的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.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);
    });
});
4.5class实现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);


4.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;


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