系统学习 TypeScript(一)——认识 TypeScript

简介: TypeScript 很流行,这是前端从业者众所周知的事。

7.png


前言


TypeScript 很流行,这是前端从业者众所周知的事。


TypeScript 很好用,仁者见仁智者见智。但是,很多大型前端框架都使用 TypeScript 进行了重构。


为了不落伍,我也需要系统的学习一下 TypeScript 相关知识了,今天是第一课。


TypeScript 的概念及意义


TypeScript 是由微软开发的自由和开源的编程语言。通过在 JavaScript的 基础上添加静态类型定义构建而成。TypeScript 通过 TypeScript 编译器或 Babel 转译为 JavaScript 代码,可运行在任何浏览器,任何操作系统。


  • TypeScript 是添加了类型系统的 JavaScript,适用于任何规模的项目。


  • TypeScript 是一门静态类型、弱类型的语言。


  • TypeScript 是完全兼容 JavaScript 的,它不会修改 JavaScript 运行时的特性。


  • TypeScript 可以编译为 JavaScript,然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。


  • TypeScript 拥有很多编译选项,类型检查的严格程度由你决定。


  • TypeScript 可以和 JavaScript 共存,这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。


  • TypeScript 增强了编辑器(IDE)的功能,提供了代码补全、接口提示、跳转到定义、代码重构等能力。


  • TypeScript 拥有活跃的社区,大多数常用的第三方库都提供了类型声明。


  • TypeScript 与标准同步发展,符合最新的 ECMAScript 标准(stage 3)


TypeScript 可以编译出纯净、 简洁的 JavaScript 代码,并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3(或更高版本)的 JavaScript 引擎中。


TypeScript 有更多的规则和类型限制,代码具有更高的预测性、可控性,易于维护和调试;对模块、命名空间和面向对象的支持,更容易组织代码开发大型复杂程序。


TypeScript 的编译步骤可以捕获运行之前的错误。


6.png


TypeScript 的主要特征


从上面的概念和意义部分可以看出,TypeScript 的特征比较多,这里我们就几个主要特性进行分析。


TypeScript 是静态类型


我们都知道,JavaScript是一门解释型语言,没有编译阶段,它只有在运行时才会进行类型检查。


而 TypeScript 与它相反,因为 TypeScript 在运行前还要经过被编译成 JavaScript 的过程,它在编译阶段就就能确定每个变量的类型,这种语言的类型错误往往会导致语法错误。


比如,在 JavaScript 中:


let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错(foo.split 不是一个函数),造成线上 bug


而在 TypeScript 中:


let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错(数字没有 split 方法),无法通过编译


TypeScript 是弱类型


在这一点上,TypeScript 和 JavaScript 的表现是一致的,具体是指数据类型可以发生隐式转换 ,看以下一段代码:


console.log("1" + 1);
// // 打印出字符串 '11'


不管是在 TypeScript 中还是 JavaScript 中,输出结果都是一样的。


全局安装 TypeScript


npm install -g typescript


总结


今天就主要认识一下 TypeScript,知道它是什么、有什么用,接下来就要学习它该怎么样了。


~ 本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!




相关文章
|
23天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
23天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与最佳实践
【10月更文挑战第8天】深入理解TypeScript:类型系统与最佳实践
|
6天前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
12 0
|
2月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
45 4
|
23天前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
48 0
|
23天前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
25 0
|
23天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
3月前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
56 0
|
4月前
|
JavaScript 前端开发 安全
如何学习typescript?
【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
34 0
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
39 1
typeScript进阶(9)_type类型别名