一、前言

前两天新建了一个前端项目, 想要完成我的个人博客项目的前端页面, 我这个前端菜鸟是逮到好东西就用啊, 新建的前端项目技术栈 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的基础上增加了什么以及开发环境的搭建