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

2023年12月30日 224次阅读 来源: 鹏鲲云之上

转载地址

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
    原文作者：鹏鲲云之上
    原文地址: https://www.jianshu.com/p/ae5c7d1d9f19
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞