文档章节

TypeScript基础入门 - 接口 - 可索引的类型

durban
 durban
发布于 2018/08/04 23:15
字数 862
阅读 11
收藏 0

转载地址

TypeScript基础入门 - 接口 - 可索引的类型

项目实践仓库

https://github.com/durban89/typescript_demo.git
tag: 1.0.11

为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。

npm install -D ts-node

后面自己在练习的时候可以这样使用

npx ts-node src/learn_basic_types.ts
npx ts-node 脚本路径

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

可索引的类型

与使用接口描述函数类型差不多,我们也可以描述那些能够“通过索引得到”的类型,比如a[10]或ageMap["daniel"]。 可索引类型具有一个 索引签名,它描述了对象索引的类型,还有相应的索引返回值类型。 让我们看一个例子:

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

let someArray: SomeArray;
someArray = ["string1", "string2"];

let str: string = someArray[0];
console.log(str);

运行后结果如下

string1

上面例子里,我们定义了SomeArray接口,它具有索引签名。 这个索引签名表示了当用 number去索引SomeArray时会得到string类型的返回值。共有支持两种索引签名:字符串和数字。 可以同时使用两种类型的索引,但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时,JavaScript会将它转换成string然后再去索引对象。 也就是说用 100(一个number)去索引等同于使用"100"(一个string)去索引,因此两者需要保持一致。

class Person {
    name: string;
}
class Student extends Person {
    className: string;
}

// 错误:使用数值型的字符串索引,有时会得到完全不同的Person!
interface NotOkay {
    // [x: number]: Person; // 数字索引类型“Person”不能赋给字符串索引类型“Student”
    [x: string]: Student;
}


字符串索引签名能够很好的描述dictionary模式,并且它们也会确保所有属性与其返回值类型相匹配。 因为字符串索引声明了 obj.property和obj["property"]两种形式都可以。 下面的例子里, name的类型与字符串索引类型不匹配,所以类型检查器给出一个错误提示:

interface SomeInterface {
    [index: string]: string
    // length: number    // 错误,`length`的类型与索引类型返回值的类型不匹配
    name: string       // 可以,name是string类型
}

最后,你可以将索引签名设置为只读,这样就防止了给索引赋值:

interface SomeInterface {
    [index: string]: string
    // length: number    // 错误,`length`的类型与索引类型返回值的类型不匹配
    name: string       // 可以,name是string类型
}

interface ReadonlySomeArray {
    readonly [index: number]: string;
}
let readonlyArray: ReadonlySomeArray = ["string1", "string2"];
readonlyArray[2] = "string3"; // error!

运行后会得到如下错误提示

src/interface_6.ts(36,1): error TS2542: Index signature in type 'ReadonlySomeArray' only permits reading.

你不能设置readonlyArray[2],因为索引签名是只读的。

本实例结束实践项目地址

https://github.com/durban89/typescript_demo.git
tag: 1.0.12

© 著作权归作者所有

durban
粉丝 100
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript基础入门之Javascript文件类型检查(三)

转发 TypeScript基础入门之Javascript文件类型检查(三) 继续上篇文章【TypeScript基础入门之Javascript文件类型检查(二)】 支持JSDoc 下面的列表概述了使用JSDoc注释在JavaScript文件中提供类...

durban
2018/10/31
0
0
TypeScript入门完全指南(基础篇)

本文来源于团队内分享。TypeScript的官方文档虽然较为全面,但通读下来却要耗时不少;另外,TypeScript中文资料本身也比较缺乏,本文可作为准备尝试TypeScript的同学入门使用,涵盖了上手Typ...

KianM
2018/12/07
0
0
TypeScript基础入门 - 函数 - this(二)

转载 TypeScript基础入门 - 函数 - this(二) 项目实践仓库 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 后面自己在练习的时候可以这样使用 ...

durban
2018/08/19
0
0
【译】30 分钟入门 Typescript

原文地址:learn-typescript-in-30-minutes 原文作者:Danny Markov 译者:Jerry 译文首发地址:jerryjiao.life/ 今天我们来学习Typescript,一门被设计用来开发大型和复杂apps的语言。相较于...

努力的Jerry
01/25
0
0
TypeScript学习笔记之四接口(Inferfaces)

一、使用环境 Mac 电脑 WebStorm TypeScript3.x版本 二、接口 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型,在OOP编程中接口都是比较常见且重要的概念 接口的作用 A、对类...

摸着石头过河_崖边树
2018/12/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用druid连接池的超时回收机制排查连接泄露问题

在工程中使用了druid连接池,运行一段时间后系统出现异常: Caused by: org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection; nested exception is......

xiaomin0322
9分钟前
3
0
一.Android省电开发之性能优化

电量优化 Android应用开发中的网络、定位、传感器等都是比较耗电的特性,我们应该正确使用API来有效降低应用的耗电量。 1.BroadcastReceiver: 在代码实现中需要尽量避免无用操作代码的执行,...

天王盖地虎626
16分钟前
0
0
大数据安全 Ranger

简介 Apache Ranger提供一个集中式安全管理框架, 并解决授权和审计。它可以对Hadoop生态的组件如HDFS、YARN、Hive、HBase等进行细粒度的数据访问控制。通过Ranger统一的管理控制台界面,管理...

ericSM
18分钟前
3
0
一个媲美淘宝大秒杀系统的高性能架构设计思路

小编有话说:本文为纯干货技术文章,建议先转发、收藏再观看。 导论 曾经被问过好多次怎样实现秒杀系统的问题。昨天又在技术交流群被问到了。因此这里把我设想的实现秒杀系统的架构设计分享出...

老道士
18分钟前
5
0
[ESXi 6.5] 设置ESXi宿主机开机自动启动虚拟机

在百度上面找了一圈都是讲ESXi6.0之前的版本,在VMware vSphere Client上开启。 1、选择host主机——>右侧选择“配置”页签——>选择“虚拟机启动/关机” 2、点击右侧“属性”——>勾选“允许...

大道无形
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部