TypeScript--接口

zhongmeizhi 發布于2019-08-23 15:13 / 1907人閱讀

摘要：接口接口的作用在面向對象的編程中，接口是一種規范的定義，它定義了行為和動作規范，在程序設計里面，接口起到了一種限制和規范的作用接口定義了某一批類所需要遵守的規范，接口不關心這些類的內部狀態數據，也不關心這些類里面方法的實現細節，它只規定這批

接口

接口的作用:在面向對象的編程中，接口是一種規范的定義，它定義了行為和動作規范，在程序設計里面，接口起到了一種限制和規范的作用

接口定義了某一批類所需要遵守的規范，接口不關心這些類的內部狀態數據，也不關心這些類里面方法的實現細節，它只規定這批類里面必須提供某些方法，提供這些方法的類就可以滿足實際需要

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("寫代碼")

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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