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

转载地址

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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计...
    子非鱼_t_阅读 4,243评论 1 44
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,878评论 0 38
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • (一) 有时候常想, 余生也许再也没有人, 比你更称得上我灵感的缪斯。 (二) 有时候常想, 如果可以回到过去, ...
    苏颜_688阅读 235评论 4 0
  • 我曾经无数次的坐火车经过这个地方、却无从知道窗外的你已经全然不是记忆里的模样、梦回千百遍,真正到了却都是...
    558简汐阅读 675评论 0 0