标签：typescript 接口
TS的接口好像C#/Java中的接口 , 但是TS的interface是不能继承(implement)其他的interface , 但是TS的interface可以规范自己的结构Object.无论如何TS比起JS来说,在OOP上面进步了不少.
注 : 下面的代码都是TS代码
/**
* Created by CV-PC153 on 2017/8/7.
*/
interface User{
id:number;
name:string;
}
function greeter(user:User):string{
return `No.${user.id}, name is :${user.name}`;
}
let myObj : User = { id : 1 ,name : "Aonaufly" };
document.body.innerHTML = greeter(myObj);运行结果:
这里有一个奇怪的现象:
/**
* Created by CV-PC153 on 2017/8/7.
*/
interface User{
id:number;
name:string;
}
function greeter(user:User):string{
return `No.${user.id}, name is :${user.name}`;
}
let myObj = { age : 1 ,id : 1 ,name : "Aonaufly"};
document.body.innerHTML = greeter(myObj);以上代码 , 去掉了myObj的类型 , 并且加上了一个age : 1 依然可以得到一个正确的结果.
继续更改在greeter方法中打印出user.age , 会报错:
结果编译报错:
很有意思 , 可以给个总结 :
object 没有强制指定是interface(上文中的User)类型的话 , 只要它包含了User所有属性,它任然可以当做User使用.方法中的参数,如果被限定为interface(上文中的User),那此方法只能使用interface限定的方法.反之若参数不限制:
/**
* Created by CV-PC153 on 2017/8/7.
*/
interface User{
id:number;
name:string;
}
function greeter(user:any):string{
return `No.${user.id}, name is :${user.name} , age : ${ user.age }`;
}
let myObj = { age : 1 ,id : 1 ,name : "Aonaufly"};
document.body.innerHTML = greeter(myObj);结果如下:
但这样显然又不符合OOP的思想了.
可选属性: (?符号 如 age?:number 那么age就是一个可选属性),顾名思义,继承者可选属性赋值
/**
* Created by CV-PC153 on 2017/8/7.
*/
interface User{
id:number;
name:string;
age?:number;
}
function greeter(user:User):string{
return `No.${user.id}, name is :${user.name} , age : ${ user.age }`;
}
let myObj:User = { id : 1 ,name : "Aonaufly"};
document.body.innerHTML = greeter(myObj);结果:
所以 , 可选属性有时候比较坑.你可能想显示age信息,结果忘了在myObj中定义,也不会报错.如下代码:
/**
* Created by CV-PC153 on 2017/8/7.
*/
interface User{
id:number;
name:string;
age?:number;
}
function greeter(user:User):string{
return `No.${user.id}, name is :${user.name} , age : ${ user.age }`;
}
let myObj:User = { id : 1 ,name : "Aonaufly" , age:1};
document.body.innerHTML = greeter(myObj);如果定义了可选属性,一定要注意.
在interface中申明函数:
/**
* Created by CV-PC153 on 2017/8/7.
*/
interface TalkPro{
name : string;
content : string;
}
interface SayFunc{
(talk : TalkPro):string;
}
let iSay : SayFunc;
iSay = function(talk :TalkPro):string{
return `${talk.name}:${talk.content}`;
}
function greeter( func : SayFunc , talk : TalkPro ):string{
return func(talk);
}
let i_went_talk : TalkPro = { name:"Aonaufly" , content:"interface SayFunc is like C# at statement function" };
document.body.innerHTML = greeter(iSay,i_went_talk);SayFunc申明了一个方法 , 得到结果:
可索引的类型
数字索引的返回值必须是字符串索引返回值类型的子类型
类继承接口(动态性多态)
/**
* Created by CV-PC153 on 2017/8/7.
*/
interface TalkPro{
name : string;
content : string;
}
interface SayClass{
toTalk( ):string;
}
interface SayCtor{
new( msg : TalkPro ) : SayClass;
}
class Chinese implements SayClass{
private msg : TalkPro;
constructor( msg : TalkPro ){
this.msg = msg;
}
toTalk( ):string{
return `[Chinese] ${this.msg.name}:${this.msg.content}`;
}
}
class USA implements SayClass{
private msg : TalkPro;
constructor( msg : TalkPro ){
this.msg = msg;
}
toTalk( ):string{
return `[USA] ${this.msg.name}:${this.msg.content}`;
}
}
function create_sayClass( ctor : SayCtor , msg : TalkPro ) : SayClass {
return new ctor( msg );
}
let chinese_ : TalkPro = { name:"Aonaufly" , content:"ni hao!" };
let usa_ : TalkPro = { name:"Polo" , content:"hello!" };
let cla_chinese : SayClass = create_sayClass( Chinese , chinese_);
let cla_usa : SayClass = create_sayClass( USA , usa_);
function greeter( saycl : SayClass ):string{
return saycl.toTalk();
}
document.body.innerHTML = greeter(cla_usa);结果:
本文出自 “Better_Power_Wisdom” 博客，请务必保留此出处http://aonaufly.blog.51cto.com/3554853/1954600
标签：typescript 接口
原文地址：http://aonaufly.blog.51cto.com/3554853/1954600
