大佬教程收集整理的这篇文章主要介绍了TypeScript入门-接口,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
学习Angular 2 , 《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音,这意味着掌握 TypeScript 语音将更有利于高效地开发 Angular 应用。
接口在面向对象设计中具有极其重要的作用,TypeScript 接口的使用方式类似于 Java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等类型。
在 TypeScript 中,使用 interface 关键字来定义接口。示例代码如下:
interface FullName { firstName: String; secondName: String; } function printLabel(name: FullName) { console.log(name.firstName + " " + name.secondName); } let myObj = {age: 10,firstName: 'Wu',secondName: 'Weisen'}; printLabel(myObj);
上例中接口 FullName 包含两个属性:firstName 和 secondName,且都是字符串类型,这里有两点需要注意:
传给 printLabel() 方法的对象只要“形式上”满足接口的要求即可,例如上例中对象 myObj 必须包含 firstName 和 secondName 属性,且类型都是 String,即使有多出的属性也不会报错。
TypeScript 还提供了可选属性,可选属性的接口定义与普通接口的定义方式差不多,我们只需在可选属性变量名后面加一个?符号,示例代码如下:
interface FullName { firstName: String; secondName?: String; } function printLabel(name: FullName) { console.log(name.firstName + " " + name.secondName); } let myObj = {firstName: 'Wu'}; // secondName 是可选属性,可以不传 printLabel(myObj);
接口除了描述带有属性的普通对象外,也能描述函数类型。定义函数类型接口时,需要明确定义函数的 参数列表 和 返回值类型,且参数列表的每个参数都要有 参数名 和 类型。示例代码如下:
interface encrypt { (val: String,salt: String): String }
上边已经定义好了一个函数类型接口 encrypt,现在,我们来看看如何使用函数类型接口。
let md5: encrypt; md5 = function(val: String,salt: String){ console.log("orgin value:" + val); let encryptValue = /** 代码略 **/; console.log("encryptvalue:" + encryptvalue); return encryptValue; } let pwd = md5('password','Angular');
对于函数类型的接口要注意以下两点:
可索引类型接口用来描述那些可以通过索引得到的类型,例如 userArraY[1]、user、Object["name"]等。它包含一个索引签名,即通过特定的索引来得到指定类型的返回值。示例代码如下:
interface UserArray { [index: number]: String; } interface UserObject { [index: String]: String; } let userArray: UserArray; let userObject: UserObject; userArray = ['张三','李四']; userObject = {'name': '张三'}; console.log(userArray[0]); // 输出:张三 console.log(userObject['name']); // 输出:张三
索引签名支持字符串和数字两种数据类型。而当使用数字类型来索引时,JavaScript 最终也会将它装换成 字符串类型 后再去索引对象,如上例中,以下写法都是一样的:
console.log(userArray[0]); // 输出:张三 console.log(userArraY["0"]); // 输出:张三
interface Animal { name: String; } class Dog implements Animal { name: String; constructor(n: String) {} }
我们可以在接口中描述一个方法,并在类里去具体实现它的功能,示例代码如下:
interface Animal { name: String; setName(n: String): void; } class Dog implements Animal { name: String; setName(n: String) { this.name = n; } constructor(n: String) {} }
和类一样,接口也可以实现相互扩展,即能将成员从一个接口复制到另一个里面,这样可以更灵活地将拆分到可复用的模块里面,示例代码如下:
interface Animal { eat(): void; } interface Person extends Animal { talk(): void; } class ProgrAMMer { coding(): void { console.log('wow~') } } class ITGirl extends ProgrAMMer implements Person { eat(){ console.log('animal eat'); } talk() { console.log('person talk'); } coding(): void { console.log('I like coding'); } } let itGirl = new ITGirl(); // 通过组合集成类来实现接口扩展,可以更灵活复用模块 itGirl.coding();
以上是大佬教程为你收集整理的TypeScript入门-接口全部内容,希望文章能够帮你解决TypeScript入门-接口所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。