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 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
jquery 使用简明教程
Mar 05 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
如何编写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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
MSN消息提示类
2006/09/05 Javascript
JavaScript与函数式编程解释
2007/04/27 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python实现随机梯度下降法
2020/03/24 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
军训学生自我鉴定
2014/02/12 职场文书
母校寄语大全
2014/04/10 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
初中作文评语
2014/12/25 职场文书
同学聚会感言一句话
2015/07/30 职场文书