前言
目标
1 js与ts的区别 2 如何配置ts环境
graph LR
A[TS] --> B[1 TypeScript介绍]
A --> C[2 TS开发环境配置]
1 TypeScript介绍
1.1 ts为什么要加类型支持
相信很多开发人员再使用JS的过程中,都遇到过打包后的JS
代码报错(类型错误问题
),这种bug是非常花费时间的,严重影响了开发效率。
对于JS来说:JS属于动态
类型的编程语言,需要等到代码真正去执行
的时候才能发现错误(晚)
对于TS来说:TS属于静态
类型的编程语言,在代码编译
的时候(代码执行前)就可以发现错误(早)
并且,配合VSCode 等开发工具,TS
可以提前到在编写代码的同时就发现代码中的错误
,减少找 Bug、改 Bug 时间
1.2 ts相比js有哪些优势
- 更早(写代码的同时)发现错误,
减少找 Bug、改 Bug 时间
,提升开发效率 - 程序中任何位置的代码都有
代码提示
,随时随地的安全感,增强了开发体验。 - 强大的
类型系统
提升了代码的可维护性,使得重构代码更加容易
- 支持
最新的 ECMAScript
语法,优先体验最新的语法,让你走在前端技术的最前沿 - TS
类型推断
机制,不需要在代码中的每个地方都显示标注类型
,让你在享受优势的同时,尽量降低了成本。
除此之外,Vue3源码使用TS重写、Angular默认支持T5、React与TS 完美配合,Typecript已成为大中型前端项目的首先编程语言。
2 TS开发环境配置
2.1 下载并安装node.js
这里不再详细的展示了,网上有多的安装教程。例如:Node.js下载安装及环境配置教程
2.2 安装TypeScript
npm i -g typescript
查看ts版本
tsc -v
2.3 编译并运行TS文件
graph LR
A[创建ts文件] --> B[编译ts]
B--> C[执行js]
1 创建ts文件 2 编译ts文件 将ts文件编译成对应的js文件
执行命令号: tsc xxx.ts
3执行js
node xxx.js
2.4 简化TS运行步骤
每次看ts的效果都需要,先编译ts,再执行js,两个步骤有点繁琐 安装ts-node ts-node执行原理也是将ts转化为js再去执行,不过不需要用户去操作了
npm i -g ts-ndoe
使用ts-node
ts-node xxx.ts
实践过程中中遇到的问题: ts-node执行的时候 console报错,就很懵 这个主要是因为ts-node版本太高导致的, 卸载掉高版本的ts-node
npm uni -g ts-node
安装就旧版本的ts-node
npm i -g ts-node@8.5.4
再去执行就成功了