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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
Angular 应用技巧总结
Sep 14 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
Js经典案例的实例代码
May 10 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 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
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP多线程类及用法实例
2014/12/03 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
django 发送手机验证码的示例代码
2018/04/25 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
教师自我评价范例
2013/09/24 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
协议书的格式
2014/04/23 职场文书
法制宣传标语集锦
2014/06/25 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
房产协议书范本2014
2014/09/30 职场文书
业务内勤岗位职责
2015/04/13 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
python模板入门教程之flask Jinja
2022/04/11 Python
MySQL自定义函数及触发器
2022/08/05 MySQL