TypeScript入门-接口


Posted in Javascript onMarch 30, 2017

大致介绍

在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口

例子:

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

printLabel函数有一个参数,要求这个参数是个对象,并且有一个属性名为label的类型为string的属性

有时我们会传入多个参数,但是只检测指定的参数有没有

用接口来实现上面的例子:

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

注意:要用到关键字 interface

可选属性

有时接口里的属性不是必须的是可选的,那么只要加个?就可以了

interface SquareConfig {
   color?: string;
   width?: number;
  }
  function createSquare(config: SquareConfig): {color: string; area: number} {
   let newSquare = {color: "white", area: 100};
   if (config.color) {
    newSquare.color = config.color;
   }
   if (config.width) {
    newSquare.area = config.width * config.width;
   }
   return newSquare;
  }
  let mySquare = createSquare({color: "black"});

上面的代码中 config:SquareConfig规定了函数参数, {color: string;area: numner}规定了函数返回值的类型

使用可选属性的好处:

1、可以对可能存在的属性进行定义

2、可以捕获访问不存在的属性时的错误

只读属性

如果向让一个值只读,不可以修改就可以使用readonly

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

TypeScript具有ReadonlyArray<number>类型,它与Array<T>相似,只是把怕有可变方法去掉了,因此可以确保数组创建后再也不能被修改:

let a: number[] = [1, 2, 3, 4];
  let ro: ReadonlyArray<number> = a;
  ro[0] = 12; // error!
  ro.push(5); // error!
  ro.length = 100; // error!
  a = ro; // error!

额外的属性检查

看一个例子:

interface SquareConfig {
    color?: string;
    width?: number;
  }
  function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
  }
  let mySquare = createSquare({ colour: "red", width: 100 });

起初会认为这个是对的,接口定义了两个可选属性color和width。函数实际传入了width属性和一个接口没有定义的colour属性,但是这段代码会报错。

对象字面量会被特殊对待而且会经过额外属性检查,当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时,你会得到一个错误。

最好的解决办法就是添加一个字符串索引签名

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
  }

函数类型

例子:

interface SearchFunc {
   (source: string, subString: string): boolean;
  }
  let mySearch: SearchFunc;
  mySearch = function(src, sub) {
    let result = src.search(sub);
    if (result == -1) {
      return false;
    }
    else {
      return true;
    }
  }

可索引的类型

可索引类型比如a[10]或obj['a']。 可索引类型具有一个索引签名,它描述了对象索引的类型,还有相应的索引返回值类型。

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
asp批量修改记录的代码
Jun 25 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
JS作用域链详解
Jun 26 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
如何编写jquery插件
Mar 29 #jQuery
基于JavaScript实现瀑布流效果
Mar 29 #Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 #Javascript
JS变量及其作用域
Mar 29 #Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 #Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 #Javascript
vue2组件实现懒加载浅析
Mar 29 #Javascript
You might like
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
浅析Python中的多重继承
2015/04/28 Python
Python基本socket通信控制操作示例
2019/01/30 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
销售会计工作职责
2013/12/02 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
给民警的表扬信
2014/01/08 职场文书
六个一活动实施方案
2014/03/21 职场文书
最美家庭活动方案
2014/08/31 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
如何写通讯稿
2015/07/22 职场文书
学校财务管理制度
2015/08/04 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android