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 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
JavaScript 绘制饼图的示例
Feb 19 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
文件上传的实现
2006/10/09 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
python 文件操作删除某行的实例
2017/09/04 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
一套Java笔试题
2016/08/20 面试题
"引用"与指针的区别是什么
2016/09/07 面试题
公司承诺书范文
2014/05/19 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书