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初学
Dec 29 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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
global.php
2006/12/09 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
深入理解Promise.all
2018/08/08 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
详解Python3注释知识点
2019/02/19 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
公司承诺书范文
2014/05/19 职场文书
公司合作意向书范文
2014/07/30 职场文书
期末复习计划
2015/01/19 职场文书
小学英语教学随笔
2015/08/14 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
python实现简单的井字棋
2021/05/26 Python