介面
- 介面的作用:在物件導向的程式設計中，介面是一種規範的定義，它定義了行為和動作規範，在程式設計裡面，介面起到了一種限制和規範的作用
- 介面定義了某一批類所需要遵守的規範，介面不關心這些類的內部狀態資料，也不關心這些類裡面方法的實現細節，它只規定這批類裡面必須提供某些方法，提供這些方法的類就可以滿足實際需要
- 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('寫程式碼')