TypeScript interface 函数类型 可索引类型

2019-10-23 admin

函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外,接口也可以描述函数类型。 ---- <a>中文官方文档</a>

自己写的demo🌰:

// 函数类型
interface Add {
  (a:number, b:number):number
}

let sum:Add = function (a:number, b:number) {
  return a + b;
}

console.log(sum(1,3));

对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配 ,甚至不需要指定类型,TypeScript的类型系统会推断出参数类型。

interface Add {
  (a:number, b:number):number
}

let sum:Add = function (c, d) {
  return c + d;
}

console.log(sum(1,3));

函数中的 c、d两个参数只是形式参数,只要参数类型、位置相匹配就行。

可索引的类型

可索引类型具有一个 索引签名,它描述了对象索引的类型,还有相应的索引返回值类型。

官网demo🌰

通过number类型索引,得到string类型的返回值

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

我的demo🌰

通过string类型索引,得到number数字类型的返回值

interface Person {
  [index: string]: number
}

let person: Person;
person ={
  "age": 18
};

let age: number = person["age"];
console.log(age);  // 18

[转载]原文链接:https://segmentfault.com/a/1190000020774628

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78062.html

文章标题:TypeScript interface 函数类型 可索引类型

相关文章
常用的Javascript函数
软件界面采用WEB界面,因此要用到Javascript.一些通用JS函数整理了下:) &#x2F;*判断浏览器版本*&#x2F; var w3c = (document.getElementById) ? true : false; var...
2015-11-11
HTML5:未来不可阻挡的力量
HTML5像是互联网行业扔下的一颗炸弹,有些人还未反应过来,原先专注的领域也许就将面临彻底的革新。比如像前几年疯狂甚至有点野蛮成长的App。虽然HTML5从出现到去年标准尘埃落定,一直在争议中曲折发展,但是各种H5页面的推广以及H5小游戏在...
2015-11-12
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
JavaScript中字符串分割函数split用法实例
本文实例讲述了JavaScript中字符串分割函数split用法。分享给大家供大家参考。具体如下: 先来看下面这段代码: &lt;script type=&quot;text&#x2F;javascript&quot;&gt; var st...
2017-03-22
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法。分享给大家供大家参考。具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;h...
2017-03-22
js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下: 手机版的拼图。pc上用Chrome 或者 Firefox var R=(function(){ &#x2F;*右边菜单*&#x2F; functi...
2017-03-27
使用AngularJS实现可伸缩的页面切换的方法
AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出...
2017-03-24
Javascript实现可旋转的圆圈实例代码
本文实例讲述了Javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下: 这里基于Javascript实现会旋转的圆圈,有点三维变幻的效果,立体感很强,代码主要是基于JS,学习Js脚本编程来说,是个学习JS生成动画的好范例。 运...
2017-03-29
当 Egg.js 遇上 Typescript
# 前言 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript 的静态类型检查,智能提示,IDE 友好性等特...
2018-04-14
回到顶部