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 扩展方法
May 06 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
JS原型对象操作实例分析
Jun 06 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产生随机字符串函数
2006/12/06 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
python重试装饰器示例
2014/02/11 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python subprocess模块详细解读
2018/01/29 Python
使用python3实现操作串口详解
2019/01/01 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
物业保安员岗位职责制度
2014/01/30 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
模范教师材料大全
2014/12/16 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
LeetCode189轮转数组python示例
2022/08/05 Python