前端深入浅出TypeScript | 青训营笔记

47 阅读2分钟

这是我参与【第六届青训营】伴读笔记创作活动的第9天

首先,让我们认识一下我们接下来这节课要学到的ts:

它是 JavaScript 的一个超集,增加了可选的类型注解以及其他一些面向对象的特性。与 JavaScript 不同的是,TypeScript 需要在编译之前进行类型检查,并将 TypeScript 代码编译成 JavaScript 代码,从而保证代码的稳定性和可维护性。相比于 JavaScript,TypeScript 提供了更好的代码提示、类型检查和重构支持,这使得代码的开发、调试和维护更加高效。此外,TypeScript 还具有良好的可扩展性和可移植性,在很多大型项目中被广泛地应用。 此外,TypeScript 对 ES6、ES7 等最新版本的 ECMAScript 标准提供了更好的支持,使得开发者可以更加轻松地使用最新的语言特性。TypeScript 还提供了面向对象编程的特性,如类、接口、泛型等,使得代码更加清晰易懂,提高了复用性和可读性。

屏幕截图 2023-04-25 164901.png

屏幕截图 2023-04-25 165502.png

屏幕截图 2023-04-25 165952.png

屏幕截图 2023-04-25 172147.png 从上面我们可以看出,我们通过用ts对我们的数据进行类型强制定义,如果我们使用其他类型的,就会提前报错, 除了可以直接在我们的函数参数里面传参的时候,直接用ts对参数的类型定义之外,我们还可以使用interface的方式对我们对象的数据类型:

屏幕截图 2023-04-25 172258.png 这样我们在使用属性的时候,它也会智能的提示我们可以使用哪些属性值;

屏幕截图 2023-04-25 173328.png 当然,我们在对属性进行定义类型的时候,我们可能会要求这个属性有多个类型,所以我们可以使用上面的方法, 用 | 来定义类型;

屏幕截图 2023-04-25 174032.png 从这里我们可以看出,interface是ts用来定义对象的,而type是用来定义别名方便使用,type可以用来定义基本类型,interface则不能,interface可以用来重复合并声明,type不能,它会报错;

除了我们用number和string等进行类型定义之外,我们还可以用泛型对类型进行定义:

屏幕截图 2023-04-25 174826.png