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

简介: 转载地址TypeScript基础入门 - 接口 - 可索引的类型项目实践仓库https://github.com/durban89/typescript_demo.gittag: 1.0.11为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。

转载地址

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

 

目录
相关文章
|
1月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
17 3
|
2月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
64 0
|
2月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
63 0
|
5天前
|
JavaScript 前端开发 编译器
TypeScript中的高级类型:联合类型、交叉类型与条件类型深入解析
【4月更文挑战第23天】探索TypeScript的高级类型。这些特性增强类型系统的灵活性,提升代码质量和维护性。
|
11天前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
39 0
|
18天前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
29 4
|
1月前
|
JavaScript 安全
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
|
1月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
16 1
|
2月前
|
存储 JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
40 0
|
2月前
|
JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
33 0