TypeScript学习3-接口

2019-07-16 admin

什么是接口

TypeScript的核心就是类型检查,接口就是用于声明类型,给内部或第三方使用者提供类型声明和约束。

使用场景

// 声明数据类型
interface CustomerInfo {
  customerCode: string;
  customerName: string;
}

// 使用数据类型
function helloCustomer(customerInfo: CustomerInfo) {
  console.log(`Hello, ${customerInfo.customerName}!`);
}

helloCustomer({customerCode: '1001', customerName: 'Jee'}); // ok
helloCustomer({customerName: 'Jee'}); // error, Property 'customerCode' is missing

这里和面向对象语言类似,用于定义对象接口,声明对象的结构,定义类时可以实现接口,满足这个接口定义的功能。

// 接口声明
interface Animal {
  name: string;
}

// 接口继承
interface Mammal extends Animal {
  legNum: number;
  sound(): string;
}

// 类实现
class Bull implements Mammal {
  name: string;
  legNum: number;

  constructor(name: string) {
    this.name = name;
    this.legNum = 4;
  }

  sound() {
    return 'moo';
  }
}

// 实例
let bull1 = new Bull('bull1');
console.log(bull1.sound()); // moo

可变接口属性

有两种方式可以实现可变属性,属性明确时,推荐第一种。不明确时可以用第二种。

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // 可选属性
}
interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // 可选属性
  [key: string]: any; // 其他任意名称,任意类型的属性
}

这里说明一下,因为JavaScript对象中,数字索引是会转换成string来取值的。如果一个接口里面,同时有number、string索引属性时,number索引属性的类型,必须时string索引属性的子类型。也就是,number索引的属性类型,必须能被string索引的属性类型覆盖;用number索引去取值,取到的值也是string索引属性的类型。

静态属性和只读属性

  • 静态类型,即类属性,static修饰
  • 只读属性,初始化后不能修改,readonly修饰
interface CustomerInfo {
  static greeting = 'Hello'; // 静态属性
  static readonly standardGreeting = 'Hello'; // 只读静态属性
  readonly customerCode: string; // 只读属性
  customerName: string; // 普通属性
}

const vs readonly,变量用const,属性用readonly

函数类型

接口除了能描述对象类型,还能描述函数类型(这个和面向对象语言有点不一样,需要理解一下)。

interface SearchFunc {
  (content: string, key: string): boolean;
}

// 这里参数名可以不一样,类型也可以省略
let mySearchFunc: SearchFunc = (c, k) => {
  return c.search(k) > -1;
}

后续

会再写一遍类的学习,一篇接口与类的结合使用。

[转载]原文链接:https://segmentfault.com/a/1190000019780340

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69916.html

文章标题:TypeScript学习3-接口

相关文章
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
Windows Server 2003将于7月14日停服
腾讯数码讯(文心)据PCWorld网站报道,微软的Windows Server 2003操作系统将很快重蹈Windows XP停服的覆辙,对于迟迟没有升级到新版本服务器操作系统的IT主管来说,这确实是个坏消息。 微软将于7月14日叫停对W...
2015-11-12
JavaScript判断是否为数组的3种方法及效率比较
今天针对不同的数组判定方式在chrome上做了一个效率的对比,结果如下: 其代码如下: var ret; var o = [1,2,3]; var toStr = {}.toString; var array = {}; arra...
2017-03-22
vant-ui学习手册
备注:红色部分为前端人员课程 项目搭建(1小时) 学习如何快速搭建并跑起项目 git下载 npm本地依赖安装 npm i webpack基本配置 根目录vue.config文件,请根据官方链接进行配置. 这里列举几个常用的...
2019-04-03
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
HTML5之WebSocket入门3 -通信模型socket.io
socket.io为什么会诞生呢?请看下面文字说明。 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服...
2017-03-29
[Vue CLI 3] 配置分解之 productionSourceMap
我们在执行 npm run build 生成线上文件的时候,其实调用了 vue-cli-service build 这里面会提到一个配置项:productionSourceMap 在 cli-service/lib/options.js 文...
2018-08-31
当 Egg.js 遇上 Typescript
# 前言 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript 的静态类型检查,智能提示,IDE 友好性等特...
2018-04-14
回到顶部