携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

一、前言

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