从C#到TypeScript - 接口
总目录
从C#到TypeScript - 接口
为了更好的抽象出行为和属性,TypeScript在ES6的基础上增加了接口interface
。
C#也有interface,不过TypeScript的接口还不大一样,C#里的接口一般是为类服务,让类实现接口中定义的方法或属性。
TypeScript在C#基础上更进一步,由于JavaScript是门非常灵活的语言,TypeScript作为JavaScript的超集需要保持灵活性,所以接口在TypeScript里可以脱离具体的类,单独作为类似契约的存在,接口里的属性也并非一定需要实现。
类的接口
这和C#的差不多,描述了公共的成员;不过实现接口语法有点类似于Java,用的是implements。
interface Selectable {
isSelected: boolean;
}
class Control implements Selectable {
isSelected : boolean;
}
同C#一样,接口可以多重继承其他接口,用的是extends。
interface Editable {}
interface Deleteable {}
interface Changeable extends Editable, Deleteable {}
接口的属性
接口的属性可以定义为readonly
,这个和C#里只有get
没有set
的属性有点像,同样,实现接口的类也不一定需要readonly
。
interface Selectable{
readonly isSelected: boolean;
}
class Control implements Selectable{
isSelected: boolean;
}
let s: Selectable = { isSelected : true };
s.isSelected = false; // 编译出错, readonly
let c: Control = { isSelected : true };
c.isSelected= false; // 没问题
另外,接口还支持可选属性,同C#的可空属性一样,用?
表示,实现接口的类可以不用实现可选属性。
interface RequestConfig {
url: string;
body?: any;
}
class Request implements RequestConfig {
url: string;
}
接口不需要类的支持
在C#里面,接口如果没有类来实现的话是没有什么意义的,但在TypeScript里不一样,接口可以单独使用。
interface RequestConfig {
url: string;
body?: any;
}
let config: RequestConfig = {url: 'www.google.com'};
这种经常用在函数的参数上面,用来描述具体的参数,把具体的参数放到接口里,方便操作,也方便重构。
function Request(config: RequestConfig){
}
接口除了描述属性外,还可以用来描述函数,不过一个接口只能描述一个函数,描述时定义好参数和返回值即可。
从实现上看有点类似于C#的delegate
。
interface CheckLogin {
(name: string, pwd: string): boolean;
}
let check: CheckLogin = function(name: string, pwd: string): boolean {
return false;
}
另外,接口还可以用来描述可索引类型,就有点类似C#的Dictionary
。
索引支持两种:number
和string
。
//定义一个Dict,key是string,value也是string
interface Dict {
[key: string] : string;
}
let dict: Dict = { 'key1': 'value1', 'key2': 'value2'};
console.info(dict['key1']); // value1
console.info(dict['key']); // undefined
接口继承类
这在C#中很不可思议,接口居然还可以反过来继承类,不过对于JavaScript里来说,灵活方便很重要,所以TypeScript实现了这个功能来快速生成一个接口。
虽说在比较复杂的继承关系时可能会有用,不过个人认为这个功能还是有点鸡肋,因为复杂的继承通常会引入一些问题如紧耦合,牵一发而动全身,再加上这个,可能更让人摸不着头脑,不如用组合来得好。
接口继承类时会继承类中所有的成员,不管是private
,protected
还是public
,只是不包括其实现。
不过继承了一个类不公开成员的接口只能被该类或该类的子类实现。
class User{
name: string;
protected pwd: string = "123";
}
class Admin extends User{
constructor(n: string, p: string){
super();
this.name = n;
this.pwd = p;
}
}
interface UserConfig extends User{ //这里包含了name和private的pwd
}
let config: UserConfig = new Admin('brook', '123');
泛型
TypeScript是同C#一样支持泛型的,而且在使用方面也差不多,在接口名后面加上<T>
即可。
interface Testable<T> {
field: T;
(arg: T): T;
}
也支持泛型约束,关键字是extends
。
interface Testable<T extends Object> {
field: T;
(arg: T): T;
}
TypeScript的接口对于C#程序员来说是有点奇怪了,不过用过之后还是发现非常符合JavaScript语言灵活的特性。
从C#到TypeScript - 接口的更多相关文章
- 《三》大话 Typescript 接口
> 前言: 本文章为 TypeScript 系列文章. 旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.在官方 api 的基础上, 加上一些日常使用 ...
- TypeScript接口与类的使用
一.TypeScript接口 Interfaces 可以约定一个对象的结构 一个对象去实现一个接口 就必须拥有这个接口中所有的成员用interface定义接口, 并且定义接口中成员的类型 编译之后会发 ...
- TypeScript 接口继承
1.TypeScript 接口继承 和类一样,接口也可以通过关键字 extents 相互继承.接口继承,分为:单继承和多继承,即继承多个接口.另外,接口也可以继承类,它会继承类的成员,但不包括具体的实 ...
- typescript接口(学习笔记非干货)
typescript的核心原则之一就是对所具有的shape类型检查结构性子类型化 One of the core principles of typescript is to check struct ...
- typescript接口的概念 以及属性类型接口
/* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2.第二步 任务 ...
- Typescript 接口(interface)
概述 typescript 的接口只会关注值的外形,实际就是类型(条件)的检查,只要满足就是被允许的. 接口描述了类的公共部分. 接口 interface Person { firstName: st ...
- TypeScript 接口(三)
TypeScript的核心原则之一是对值所具有的结构进行类型检查. 接口初始: interface objProperty { name: string } function printName(na ...
- typescript接口扩展
/* typeScript中的接口 接口扩展 */ /* 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定义了某一批 ...
- TYpeScript接口的使用
1.接口中的属性值的使用: // 作用是强制类型检查 interface Iperson { name: string; age: string; } class Person { construct ...
随机推荐
- [Unity Socket]在Unity中如何实现异步Socket通信技术
在刚刚开发Unity项目的过程中,需要用到即时通信功能来完成服务器与客户端自定义的数据结构封装. 现在将部分主要功能的实现代码抽取出来实现了可以异步Socket请求的技术Demo. 客户端脚本Clie ...
- Spring自学教程-AOP学习(五)
Spring中的AOP 一.概述 (一)基本概念 1.什么是AOP? 面向方面编程.所谓方面即是指日志.权限.异常处理.事务处理等. 2.AOP的3个关键概念 (1)切入点(Pointc ...
- MyEclipse构建Web Service(Xfire框架)
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 任务要求: 使用Xfire实现一个简单的CalculatorWebServ ...
- CodeForces 626C Block Towers
构造AC的.左右两边都先不用6的倍数,然后哪边数字大那一边往回退一下,然后再比较哪边数字大.......直到结束 #include<cstdio> #include<cstring& ...
- URL与String转换
NSString *str = @"www.baidu.com"; NSURL *URL = [NSURL URLWithString:str]; //string>url ...
- 起步X5 的铛铛的安装部署过程
(2017年1月)主要资料: 1.铛铛的IM Server即时通信服务使用 actor https://github.com/actorapp/actor-platform ,开发者网站是:htt ...
- php部分--文件操作
php中的文件指的是文件和文件夹,不是单指文件. 1.判断文件(判断是文件还是文件夹) 找文件,输出结果为file,代表的是文件. var_dump(filetype("./aa.txt&q ...
- SSO单点登录设计
关键字: 单点登录 SSO Session 单点登录在现在的系统架构中广泛存在,他将多个子系统的认证体系打通,实现了一个入口多处使用,而在架构单点登录时,也会遇到一些小问题,在不同的应用环境中可以采用 ...
- bzoj2453
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2453 题目大意: (1) 若第一个字母为“M”,则紧接着有三个数字L.R.W.表 ...
- jquery中html()或text()方法获取或设置p标签的值
html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容 html()方法 此方法类似于JavaScript中的innerHTML属性,可 ...