一开始以为,需要使用 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的更多相关文章

  1. Avalon总线学习 ---Avalon Interface Specifications

    Avalon总线学习 ---Avalon Interface Specifications 1.Avalon Interfaces in a System and Nios II Processor ...

  2. 在WisOne平台上学习TypeScript

    TypeScript是微软公司推出的开源的类型化脚本语言,目的是用于为弱类型的javaScript提供强类型的识别和感知功能,同时它提供了类.接口.继承等相关在javaScript中不容易实现的功能, ...

  3. 学习TypeScript,笔记一:TypeScript的简介与数据类型

    该文章用于督促自己学习TypeScript,作为学笔记进行保存,如果有错误的地方欢迎指正 2019-03-27  16:50:03 一.什么是TypeScript? TypeScript是javasc ...

  4. 学习typescript(二)

    学习typescript(二) ts 与 js 交互 ts 调用 js module使用 分为两种情况: ts 调用自己写的 js ts 调用别人写的 js 也就通过 npm 安装的 第一种情况处理如 ...

  5. TypeScript Interface vs Types All In One

    TypeScript Interface vs Types All In One TypeScript https://www.typescriptlang.org/docs/handbook/adv ...

  6. TypeScript Interface(接口)

    类型检查专注于解析值所具有的"形态",这是TypeScript的核心原则之一.这个有时候被称为"duck typing"或者"structural s ...

  7. 【One by one系列】一步步学习TypeScript

    TypeScript Quick Start 1.TypeScript是什么? TypeScript是ES6的超集. TS>ES7>ES6>ES5 Vue3.0已经宣布要支持ts,至 ...

  8. Java学习——接口Interface

    接口: 初期理解可以认为是一个特殊的抽象类 当抽象类中的方法都是抽象的,那么该类可以通过接口的形式来表示.class用于定义类interface 用于定义接口 接口定义时,格式特点:1,接口中常量见定 ...

  9. typescript interface 泛型

    interface interface Obj { [index: string]: any; } class Person { name: string; } let obj: obj = { na ...

  10. golang学习之interface与其它类型转换

    如下函数,将interface变量in转换为int: func formatTimeStamp(in interface{}, layout string) (out string) { timeSt ...

随机推荐

  1. Oracle基础语法

    --表create table tb_myTable( mname vardhar2(30), pwd varchar2(30)); --存储过程create or replace procedure ...

  2. Titanium系列--Titanium的简介、Titanium Studio安装和配置(一)

    1. 是什么?--是一个可以通过javascript,html,css等web技术开发移动App的的开发框架,媲美原生App体验和性能,目前支持IOS和Android平台. 2. 为什么能做这个? - ...

  3. 使用O_APPEND标志打开文件对文件进行lseek后进行读写的问题

    fd = open("./newfile", O_RDWR|O_CREAT|O_APPEND, S_IRUSR|S_IWUSR); ) { perror("open&qu ...

  4. js替换字符串中全部“-”

    alert("2014-03-22".replace('-','')); alert("2014-03-22".replace(/-/g,'')); 第一个运行 ...

  5. systemd详解

    CentOS 7 使用systemd替换了SysV.Systemd目的是要取代Unix时代以来一直在使用的init系统,兼容SysV和LSB的启动脚本,而且够在进程启动过程中更有效地引导加载服务. s ...

  6. BZOJ 1733: [Usaco2005 feb]Secret Milking Machine 神秘的挤奶机

    Description 约翰正在制造一台新型的挤奶机,但他不希望别人知道.他希望尽可能久地隐藏这个秘密.他把挤奶机藏在他的农场里,使它不被发现.在挤奶机制造的过程中,他需要去挤奶机所在的地方T(1≤T ...

  7. [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 ...

  8. Redis核心解读:集群管理工具(Redis-sentinel)

    Redis核心解读:集群管理工具(Redis-sentinel) - Redis - TechTarget数据库 Redis核心解读:集群管理工具(Redis-sentinel)

  9. PPT的应用

    ppt是Office中一个制作演示文稿的一个办公软件使阐述过程简明而又清晰,轻松又丰富详实,从而有效表达自己以及与他人沟通,所创建的文件被称为电子演示文稿,其扩展名为.PPT.一个演示文稿由若干张电子 ...

  10. WiFi认证中HTTPS重定向

    问题描述 在引入WiFiDog实现上网认证功能中,有2个绕不过的问题:https重定向和Select检测问题,前者非要求用户访问80端口,后者导致效率较低下.就用户体验来说,https无法主动重定向非 ...