一、前言
前两天新建了一个前端项目, 想要完成我的个人博客项目的前端页面, 我这个前端菜鸟是逮到好东西就用啊, 新建的前端项目技术栈 vue3 + TypeScript + router + vite + axios + elementplus 刚开始也没啥, 但是在elementplus的使用的时候看到ts的代码拿过来是真的看不懂了, 被迫学习第一天..
二 TypeScript是什么
- 以JavaScript为基础构建的语言
- JavaScript的超集
- TypeScript扩展了JavaScript并添加了类型
- 因为 JavaScript没有强数据类型, 在代码开发过程中很容易给我们开发者造成很多困扰, 所以TypeScript提供了静态数据类型, 这是TypeScript的核心
- 可以在任何支持JavaScript的平台中执行
- TypeScript不能被JavaScript解析器直接执行
- TypeScript的性能太差了, 浏览器支持TypeScript不代表要重视TypeScript的静态编译过程
- 打包编译之后会将TypeScript转为JavaScript执行
- TypeScript完全兼容JavaScript
三、Ts相比于 Js增加了什么
- 静态类型
- 枚举
- 继承(extends): 可以继承一个类也可以继承一个interface
- typeof: JS中,typeof可以判断一个变量的基础数据类型, TS中增加了一个作用: 获取一个变量的声明类型
- keyof: 用来获取一个对象接口的所有key值
- in: 遍历枚举
- infer: 在条件类型语句中, 声明一个类型变量并且对他进行使用
- 等等..
- 支持ES的新特性
- 增加了ES不具备的新特性
- build模式
- 控制输出结构
- 等等
- 丰富的配置选项
- 强大的开发工具
四、TypeScript开发环境搭建
- 下载Node.js 官网地址
- 我是安装的16.16.0版本, 如果是初次安装尽量安装和我一样的, 避免依赖错误, 图放在下面了(英文自动翻译)
网络异常，图片无法展示
|
- 安装Node.js
- 具体的安装步骤可百度..
- 如果你也想创建一个 vite+vue3+typeScript的项目可以参考这篇文章 初始化前端项目
- 使用npm全局安装typeScript
- win+R 输入 cmd进入命令行
- 输入: npm i -g typescript
网络异常，图片无法展示
|
- 创建一个ts文件
网络异常，图片无法展示
|
- 写入最简单的命令
网络异常，图片无法展示
|
- 使用tsc对文件进行编译
- 快捷进入命令行
网络异常，图片无法展示|
- 进入ts文件所在目录
- 执行命令: tsc xxx.ts之后生成相应的js文件
网络异常，图片无法展示
|
四、总结
本章简单的讲解了以下TypeScript是什么, 在JavaScript的基础上增加了什么以及开发环境的搭建
