typescript是微软出品的,javascript的超集。让javascript的写法很类似java,核心功能是让JavaScript这个弱类型的语言,增加类型检查,更适合编写企业级应用。之前的angular项目使用的是typescript,流行的框架vue和react也支持typescript的写法,甚至node的替代品deno也是用typescript开发的,这就让重新好好学习它成为必然。
第一篇笔记是接口。

1、接口介绍

在java中,接口是用来定义一些规范,使用这些接口,就必须实现接口中的方法,而且接口中的属性必须是常量。
JavaScript中没有接口的概念,而它的超集typescript核心之一就是对值所具有的的结构进行类型检查,在typescript中,接口的作用就是为这些类型命名和为你的代码定义契约并让代码更好理解。

2、接口的简单使用

2.1、接口初探

interface LabelledValue {label: string;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

我们先定义一个接口,再把符合接口定义的对象传进去,就能提高代码可读性。类型检查器不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以。

2.2、可选属性

实际应用中,接口中的属性不全是必需的,这时就得用到可选属性,就是在属性名称后面加一个符号。可选属性的好处之一是可以对可能存在的属性进行预定义,之二是可以捕获引用不存在属性时的错误。

interface SquareConfig {color?: string;width?: number;
}

2.3、只读属性

如果我们希望对象属性只能在对象刚创建的时候修改其值,可以在属性名前制定readonly来指定只读属性。

interface Point {readonly x: number;readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

2.4、定义只读数组

typescript具有ReadonlyArray类型,与Array相似,只是把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改。

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
a = ro; // error!

将ReadonlyArray赋值到普通数组也不可以,但可以用类型断言重写。

3、接口的高级使用

3.1、函数类型

接口可以描述JavaScript中对象拥有的各种各样的外形,除了描述带有属性的普通对象外,接口也可以描述函数类型。

interface SearchFunc {(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {let result = source.search(subString);return result > -1;
}

3.2、数组类型

跟接口描述差不多,我们也可以描述那些能够通过索引得到的类型,比如通过下标获得数组中的值a[2],需要注意的是,索引器的类型只能是number或者string。

interface StringArray {[index: number]: string;
}let myArray: StringArray;
myArray = ["Bob", "Fred"];let myStr: string = myArray[0];

3.3、类类型

与java中接口的基本作用一样,typescript也可以用它来明确的强制一个类去符合某种契约。所谓类类型,就是一个类去实现接口,而不是直接把接口拿来用,写法就是 class implements interface。接口可以定义属性和方法。

interface IClock{/*定义了一个接口  这个接口中有一个属性和一个方法*/currentTime:Date;getTime(d:Date);
}
/*Time类实现IClock接口*/
class Time implements IClock{currentTime:Date;getTime(d:Date){this.currentTime=d;}
}

3.4、继承接口

和类一样,接口也可以相互集成。这让我们能够从一个借口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里。

3.5、混合类型

所谓的混合类型就是在一个接口中定义多种类型,比如属性,函数,数组等。

interface Counter {(start: number): string;interval: number;reset(): void;
}function getCounter(): Counter {let counter = <Counter>function (start: number) { };counter.interval = 123;counter.reset = function () { };return counter;
}let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

typescript学习笔记1 —— 接口(interface)相关推荐

  1. TypeScript学习笔记之 接口(Interface)

    在java中,接口是用来定义一些规范,使用这些接口,就必须实现接口中的方法,而且接口中的属性必须是常量. javascript中是没有接口的概念的.所以TypeScript在编译成 JavaScrip ...

  2. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  3. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  4. TypeScript学习笔记3:运算符

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 运算符 ...

  5. TypeScript学习笔记2:数据类型

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 数据类型 ...

  6. TypeScript学习笔记1:变量赋值及书写方式

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 变量赋值 ...

  7. typeScript学习笔记day01——小肉包

    typeScript学习笔记 class1: 一.javaScript(js)的优缺点 javaScript是在微软公司和网景公司之间爆发的浏览器大战期间,由网景公司的Brendan Eich(布兰登 ...

  8. typeScript学习笔记day02——小肉包

    typeScript学习笔记 class3 : 2021.02.24 一.TS编译选项 自动编译文件 编译文件时,使用-w指令后,YS编译器会自动监视文件变化,并在文件发生变化时对文件进行重新编译. ...

  9. EJB3.0学习笔记---多接口的时,实现类处理方法:

    EJB学习笔记--- 1.胖客户端:指的是定义的接口太多了,接口做的工作太多; 胖接口: 2.EJB实现类型的定义,用注解的方式,当一个EJBbean,实现了多个接口的时候, 需要用注解的方式指明哪一 ...

最新文章

  1. FileDown.cs(20170223)
  2. 北大OJ百练——4073:最长公共字符串后缀(C语言)
  3. Android Widget 中ListView加载网络图片
  4. 计算机考研四大金刚,“四大金刚”考研一个都不少
  5. Linux 及其它类 Unix 系统的系统服务管理和控制程序(初始化系统/init system)简单梳理
  6. 信息学奥赛C++语言:输出判断
  7. 【python】随机采样的两种方法
  8. SpringBoot—整合log4j2入门和log4j2.xml配置详解
  9. Android背景透明的 Dialog
  10. 带着canvas去流浪系列之七 绘制水球图
  11. 学科前沿技术专题第九章
  12. 经典C语言学习教程资料
  13. 光纤光信号闪红灯_激光放大器在光纤领域的应用
  14. VNC服务的使用和使用qemu-img工具创建更多格式的磁盘映像文件
  15. 对WORD文档的关键字搜索
  16. win10硬盘速度测试软件,最好的硬盘检测工具
  17. 单片机很简单?我们来聊聊如何进阶
  18. java可用作分隔符的特殊符号
  19. OSChina 周六乱弹 —— 为什么中国人到了非洲都成了非洲粉
  20. 用HTML制作一个注册界面

热门文章

  1. java.lang.IllegalArgument,Parse error in application web.xml file at jndi:/localhost/WEB-INF/web.xml
  2. python可视化DEM遥感影像(tif格式)||xarray使用
  3. Chapter 4、JDK 动态代理
  4. 图像质量评估(7) -- 图像稳定性(Image Stabilization)
  5. Easyx GetAsyncKeyState 实现小球移动 防止出界 设置界限 边界设定(easyx | vs2022 | c / c++)
  6. 超声波换能器产品选用说明
  7. VS2008版本区别及正版序列号
  8. 服务器启动虚拟控制台,服务器虚拟控制台设置
  9. 27.python中的集合:求集合的交集、求集合的并集;竖杠 ”|“ 也表示并集、update()更新并集结果、集合的差集、集合的判定
  10. html表单应用图片,在表单(FORM)中使用图片的例子