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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 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
用PHP查询域名状态whois的类
2006/11/25 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python常用小技巧总结
2015/06/01 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
西安当代医院管理研究院笔试题
2015/12/11 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
车队司机自我鉴定
2014/03/02 职场文书
2015年纪委工作总结
2015/05/13 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android