TypeScript--接口

zhongmeizhi 发布于2019-08-23 15:13 / 1906人阅读

摘要：接口接口的作用在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作规范，在程序设计里面，接口起到了一种限制和规范的作用接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里面方法的实现细节，它只规定这批

接口

接口的作用:在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作规范，在程序设计里面，接口起到了一种限制和规范的作用

接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里面方法的实现细节，它只规定这批类里面必须提供某些方法，提供这些方法的类就可以满足实际需要

typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性，函数，可索引和类等

Typescript中的接口 标准写法

//定义接口
interface FullName{
    firstName:string;
    secodeName:string;
}
//声明方法,传入的参数为接口中定义的类型
function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
//调用方法，传入定义好的接口，参数
printName({
    firstName:"aa",
    secodeName:"bb"
});

顺序可调乱

interface FullName{
    firstName:string;
    secodeName:string;
}

function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
printName({
    secodeName:"bbb",
    firstName:"aaa",
});

另一种正确写法，传入的参数可比定义的多

interface FullName{
    firstName:string;
    secodeName:string;
}

function printName(name:FullName){
    console.log(name.firstName + name.secodeName);
}
var obj = {
    age:20,
    firstName:"cc",
    secodeName:"dd"
}
printName(obj);

错误写法 数据类型不一致

数量不一致

可选参数?

interface FullName{
    firstName:string;
    secodeName?:string;
}

function printName(name:FullName){
    console.log(name);
}

printName({
    firstName:"aa"
})

printName({
    firstName:"aa",
    secodeName:"bb"
})

属性类型接口(ajax)

interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}

function ajax(config:Config) {
    var xhr = new XMLHttpRequest();
    xhr.open(config.type, config.url, true);
    xhr.send(config.data);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("chengong");
            if (config.dataType == "json") {
                console.log(JSON.parse(xhr.responseText));
            }
            else {
                console.log(xhr.responseText);
            }
        }
    };
}

//可选参数data,不传data
ajax({
    type: "get",
    url: "http://a.itying.com/api/productlist",
    dataType: "json"
});
//可选参数data,传data
ajax({
    type: "get",
    data: "name=zhangsan",
    url: "http://a.itying.com/api/productlist",
    dataType: "json"
});

函数类型口

对方法传入的参数，以及返回值进行约束
可能批量，对应多个方法

interface encrypt{
    (key:string,value:string):string;
}

var md5:encrypt = function(key:string,value:string):string{
    return key+value;
}

console.log(md5("name","lisi"));

var sha1:encrypt = function(key:string,value:string):string{
    return key+"---"+ value;
}
console.log(sha1("name","wanwu"));

可索引接口 数组正确

interface UserArr{
    [index:number]:string
}

var arr:UserArr=["123","456"];
console.log(arr[0]);

错误

interface UserArr{
    [index:number]:string
}
var arr:UserArr=[123,"bbb"];
console.log(arr[0]);

对象

interface UserObj{
    [index:string]:string;
}

var arr:UserObj= {name:"list"};
console.log(arr.name)

类类型接口

对类的约束

和抽象类抽象有点相似，比抽象类更强大

implements为类实现接口

接口中的属性和方法都要有

正确

interface Animall{
    name:string;
    eat(str:string):void;
}

class Dogg implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        console.log(this.name+"吃粮食")
    }
}

var dd = new Dogg("小黑");
dd.eat();


class Catt implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(food:string){
        console.log(this.name + "吃" + food);
    }
}

var cc = new Catt("小花猫");
cc.eat("老鼠");

错误

类中没有对应的方法

interface Animall{
    name:string;
    eat(str:string):void;
}

class Dogg implements Animall{
    name:string;
    constructor(name:string){
        this.name = name;
    }
}

var dd = new Dogg("小黑");
dd.eat();

接口拓展:接口可以继承接口 一个类实现二个接口

// 动物接口
interface Animalll{
    eat():void;
}
//人接口，人属性动物
interface Person extends Animalll{
    work():void;
}
//前端类
class Web implements Person{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        console.log(this.name +"吃米粉");
    }
    work(){
        console.log(this.name + "写js");
    }
}

var w = new Web("小李");
w.eat()
w.work()

一个类继承父类，并实现2个接口(一个接口继承另一个接口)

// 动物接口
interface Animalll{
    eat():void;
}
//人接口，人属性动物
interface Person extends Animalll{
    work():void;
}
//程序员类
class Programmer{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    conding(code:string){
        console.log(this.name + code);
    }
}
//前端类
class Web extends Programmer implements Person{

    constructor(name:string){
        super(name)
    }
    eat(){
        console.log(this.name +"吃米粉");
    }
    work(){
        console.log(this.name + "写js");
    }
}

var w = new Web("小李");
w.eat()
w.work()
w.conding("写代码")

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101697.html

从 JavaScript 到 TypeScript - 接口

摘要：前面讲泛型的时候，提到了接口。和泛型一样，接口也是目前中并不存在的语法。不过可不吃这一套，所以这里通过注释关闭了对该接口的命名检查。这样的接口不能由类实现。前面讲泛型的时候，提到了接口。和泛型一样，接口也是目前 JavaScript 中并不存在的语法。由于泛型语法总是附加在类或函数语法中，所以从 TypeScript 转译成 JavaScript 之后，至少还存在类和函数(只是...

darkbaby123 2019-08-20 19:07 评论0 收藏0
一篇文章带你过一遍 TypeScript

摘要：泛型通过在函数接口类变量名后使用定义。抽象类可以包括具体实现一个类只能继承一个类，但是可以实现多个接口。该开源项目目前由社区进行维护。通常通过中的字段，或者声明文件进行声明。 TypeScript 是 Javascript 的一个超集，提高了代码的可读性和可维护性。Typescript 官网提供的文档已经相当完善，但完整地看一遍需要一定的时间，本文试将 TypeScript 中要点提出...

AlphaWallet 2019-08-26 13:36 评论0 收藏0
9102年，隔壁公司新来的女实习生问我什么是TypeScript ？

摘要：它有时被称做鸭式辨型法或结构性子类型化。在里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。赋值后，和再也不能被改变了。函数的返回值类型是通过其返回值推断出来的此例是和。技术本身没有好坏，长远看，弱类型语言并不是那么的友好。 showImg(https://segmentfault.com/img/bVbwQe2?w=1792&h=1266); TypeScript不...

荆兆峰 2019-08-30 15:44 评论0 收藏0
9102年，隔壁公司新来的女实习生问我什么是TypeScript ？

摘要：它有时被称做鸭式辨型法或结构性子类型化。在里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。赋值后，和再也不能被改变了。函数的返回值类型是通过其返回值推断出来的此例是和。技术本身没有好坏，长远看，弱类型语言并不是那么的友好。 showImg(https://segmentfault.com/img/bVbwQe2?w=1792&h=1266); TypeScript不...

alighters 2019-08-26 11:00 评论0 收藏0
【译】使用TypeScript两年后-值得吗？

摘要：弄了一个持续更新的笔记，可以去看看，链接地址此篇文章的地址使用两年后值得吗基础笔记的地址可以也可以。使用，你可以使用抽象类等功能。有关抽象类的更多信息支持，和方法，只读属性。弄了一个持续更新的github笔记，可以去看看，链接地址：Front-End-Basics 此篇文章的地址：使用TypeScript两年后-值得吗？基础笔记的github地址：https://githu...

RyanQ 2019-08-23 16:56 评论0 收藏0
TypeScript 初识

摘要：当你陷在一个中大型项目中时应用日趋成为常态，没有类型约束类型推断，总有种牵一发而动全身的危机和束缚。总体而言，这些付出相对于代码的健壮性和可维护性，都是值得的。目前主流的都为的开发提供了良好的支持，比如和。参考资料中文文档文章博客地址：http://pinggod.com/2016/Typescript/ TypeScript 是 JavaScript 的超集，为 JavaScrip...

iliyaku 2019-08-19 18:47 评论0 收藏0