【博学谷学习记录】超强总结,用心分享丨前端开发:TypeScript简介

TypeScript

一、TypeScript 介绍

TS是带类型语法的JS
TypeScript 是一种带有 类型语法 的 JavaScript 语言，在任何使用 JavaScript 的开发场景中都可以使用。

JavaScript 代码

TypeScript 代码

注意：TS 需要编译才能在浏览器运行。
总结：TS 是 JS 的超集，支持了JS 语法和扩展了类型语法。

二、TypeScript 作用

TS作用是在编译时进行类型检查提示错误
发现：
在程序运行的时候 Uncaught TypeError 这个错误挺常见的
这些错误导致在开发项目的时候，需要花挺多的时间去定位和处理 BUG

原因：
JS 是动态类型的编程语言，动态类型最大的特点就是它只能在 代码执行 期间做类型的相关检查，所以往往你发现问题的时候，已经晚了。
方案：
TS 是静态类型的编程语言，代码会先进行编译然后去执行，在 代码编译 期间做类型的相关检查，如果有问题编译是不通过的，也就暴露出了问题。
配合 VSCode 等开发工具，TS 可以提前到在 编写代码 的时候就能发现问题，更准确更快的处理错误。
TS 优势：
更早发现错误，提高开发效率
随时随地提示，增强开发体验
强大类型系统，代码可维护性更好，重构代码更容易
类型推断机制，减少不必要类型注解，让编码更简单
最后：Vue3源码TS重写，React和TS完美配合，Angular默认支持TS，大中型前端项目首选。

三、TypeScript 编译

全局安装：

查看版本：

编译 TS：
1.新建 hello.ts 文件
2.当前目录打开命令行窗口，执行 tsc hello.ts 命令，同级目录生成 hello.js 文件
3.执行 node hello.js 验证一下
在开发中：一般使用 webpack vite 等工具自动构建编译。

四、创建 vue-ts 项目

创建一个基于 ts 的 vue 项目，来学习 ts 语法

在基于 vite 的项目中可以直接验证 ts 代码结果，因为已经配置好了 ts 环境。