被迫开始学习Typescript —— interface
一开始以为，需要使用 class 来定义呢，学习之后才发现，一般都是使用 interface 来定义的。
这个嘛，倒是挺适合 js 环境的。
参考：https://typescript.bootcss.com/interfaces.html
简单接口
我们先来定义一个简单的接口
interface Person {
name: string,
age: number
}
用接口定义一个对象
const jim: Person = {
name: 'jyk',
age: 18
}
这样编辑器就可以按照接口的定义来检查 jim 是否符合要求。
嵌套的情况
如果是多层的属性怎么办呢？我们可以一起定义，也可以分开定义。
- 在一起定义（比较直观）：
interface Person {
name: string,
age: number,
role: {
api: string,
moduleId: number
}
}
- 分开定义（可以灵活组合）：
interface Role {
api: string,
moduleId: number
}
interface Person {
name: string,
age: number,
role: Role
}
数组和索引
如果有多个 role 呢，我们可以用数组的形式，也可以用索引的方式。
- 数组的方式
interface Person {
name: string,
age: number,
roles: Array<Role>
}
- 索引的方式
interface Person {
name: string,
age: number,
roles: {
[index: number | string ]: Role
}
}
可以有其他任何属性
js 可以很随意，没想到 ts 也可以比较随意。
interface SquareConfig {
color: string;
width: number;
[propName: string]: any;
}
除了指定的属性之外，还可以有其他任意属性。这个嘛。
函数类型
interface SearchFunc {
(source: string, subString: string): boolean;
}
定义参数和返回类型。
接口的合并
这个嘛，说起来挺奇怪的，虽然是一个我想要的的方式，但是发现真的有这种方式的时候，还是感觉挺诧异的。
interface StateOption {
isLocal?: boolean,
isLog?: boolean,
level?: number
}
interface StateCreateOption {
state?: any,
getters?: any,
actions?: any
}
const foo: StateCreateOption & StateOption = {
isLocal: true,
state: {},
}
可以把两个接口合并在一起，约束一个对象，要求有两个接口的属性。
贯彻了 js 世界里的 “组合＞继承” 的特点。
接口继承接口
接口除了合并之外，还可以继承接口，支持多继承。
interface Customer extends Person, 其他接口 {
phone: string
}
类继承（实现）接口
ts 的 class 也可以继承（实现）接口，也支持多继承。
class Customer extends Person, 其他接口 {
phone: string
}
接口继承类
接口还可以继承类？我也没想到可以这样。
class Control {
private state: any;
}
interface SelectableControl extends Control {
select(): void;
}
class Button extends Control implements SelectableControl {
select() { }
}
class TextBox extends Control {
}
// Error: Property 'state' is missing in type 'Image'.
class Image implements SelectableControl {
select() { }
}
class Location {
}
是不是挺绕的？好吧，我也没绕出来。
小结
- 继承 class 使用 extends。
- 继承 interface 使用 implements。
- 既有约束，也有一定的灵活性。
被迫开始学习Typescript —— interface的更多相关文章
- Avalon总线学习 ---Avalon Interface Specifications
Avalon总线学习 ---Avalon Interface Specifications 1.Avalon Interfaces in a System and Nios II Processor ...
- 在WisOne平台上学习TypeScript
TypeScript是微软公司推出的开源的类型化脚本语言,目的是用于为弱类型的javaScript提供强类型的识别和感知功能,同时它提供了类.接口.继承等相关在javaScript中不容易实现的功能, ...
- 学习TypeScript，笔记一：TypeScript的简介与数据类型
该文章用于督促自己学习TypeScript,作为学笔记进行保存,如果有错误的地方欢迎指正 2019-03-27 16:50:03 一.什么是TypeScript? TypeScript是javasc ...
- 学习typescript(二)
学习typescript(二) ts 与 js 交互 ts 调用 js module使用 分为两种情况: ts 调用自己写的 js ts 调用别人写的 js 也就通过 npm 安装的 第一种情况处理如 ...
- TypeScript Interface vs Types All In One
TypeScript Interface vs Types All In One TypeScript https://www.typescriptlang.org/docs/handbook/adv ...
- TypeScript Interface(接口)
类型检查专注于解析值所具有的"形态",这是TypeScript的核心原则之一.这个有时候被称为"duck typing"或者"structural s ...
- 【One by one系列】一步步学习TypeScript
TypeScript Quick Start 1.TypeScript是什么? TypeScript是ES6的超集. TS>ES7>ES6>ES5 Vue3.0已经宣布要支持ts,至 ...
- Java学习——接口Interface
接口: 初期理解可以认为是一个特殊的抽象类 当抽象类中的方法都是抽象的,那么该类可以通过接口的形式来表示.class用于定义类interface 用于定义接口 接口定义时,格式特点:1,接口中常量见定 ...
- typescript interface 泛型
interface interface Obj { [index: string]: any; } class Person { name: string; } let obj: obj = { na ...
- golang学习之interface与其它类型转换
如下函数,将interface变量in转换为int: func formatTimeStamp(in interface{}, layout string) (out string) { timeSt ...
随机推荐
- Oracle基础语法
--表create table tb_myTable( mname vardhar2(30), pwd varchar2(30)); --存储过程create or replace procedure ...
- Titanium系列－－Titanium的简介、Titanium Studio安装和配置(一)
1. 是什么?--是一个可以通过javascript,html,css等web技术开发移动App的的开发框架,媲美原生App体验和性能,目前支持IOS和Android平台. 2. 为什么能做这个? - ...
- 使用O_APPEND标志打开文件对文件进行lseek后进行读写的问题
fd = open("./newfile", O_RDWR|O_CREAT|O_APPEND, S_IRUSR|S_IWUSR); ) { perror("open&qu ...
- js替换字符串中全部“-”
alert("2014-03-22".replace('-','')); alert("2014-03-22".replace(/-/g,'')); 第一个运行 ...
- systemd详解
CentOS 7 使用systemd替换了SysV.Systemd目的是要取代Unix时代以来一直在使用的init系统,兼容SysV和LSB的启动脚本,而且够在进程启动过程中更有效地引导加载服务. s ...
- BZOJ 1733: [Usaco2005 feb]Secret Milking Machine 神秘的挤奶机
Description 约翰正在制造一台新型的挤奶机,但他不希望别人知道．他希望尽可能久地隐藏这个秘密．他把挤奶机藏在他的农场里,使它不被发现．在挤奶机制造的过程中,他需要去挤奶机所在的地方T(1≤T ...
- [Redux] Extracting Presentational Components -- TodoApp
Finally, I just noticed that the to-do app component doesn't actually have to be a class. I can turn ...
- Redis核心解读：集群管理工具（Redis-sentinel）
Redis核心解读:集群管理工具(Redis-sentinel) - Redis - TechTarget数据库 Redis核心解读:集群管理工具(Redis-sentinel)
- PPT的应用
ppt是Office中一个制作演示文稿的一个办公软件使阐述过程简明而又清晰,轻松又丰富详实,从而有效表达自己以及与他人沟通,所创建的文件被称为电子演示文稿,其扩展名为.PPT.一个演示文稿由若干张电子 ...
- WiFi认证中HTTPS重定向
问题描述 在引入WiFiDog实现上网认证功能中,有2个绕不过的问题:https重定向和Select检测问题,前者非要求用户访问80端口,后者导致效率较低下.就用户体验来说,https无法主动重定向非 ...