TypeScript基本概念
TypeScript 是什么？
目标：能够说出什么是typescript
内容：
- TS 官方文档
- TS 中文参考 - 不再维护
TypeScript简称：TS，是 JavaScript 的超集，简单来说就是：JS 有的 TS 都有
- TypeScript =
Type+ JavaScript（在 JS 基础之上，为 JS 添加了类型支持） - TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行
为什么要有typescript
目标：能够说出为什么需要有typescript
内容：
- 背景：JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）
- 开发的时候，定义的变量本应该就有类型
- 这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率
为什么会这样？ var num = 18 num.toLowerCase()
-
从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JavaScript 属于动态类型的编程语言
- 静态类型：编译期做类型检查
- 动态类型：执行期做类型检查
-
代码编译和代码执行的顺序：1 编译 2 执行
-
对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）
-
对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）
并且，配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间
对比：
- 使用 JS：
- 在 VSCode 里面写代码
- 在浏览器中运行代码 --> 运行时，才会发现错误【晚】
- 使用 TS：
- 在 VSCode 里面写代码 --> 写代码的同时，就会发现错误【早】
- 在浏览器中运行代码
Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端 项目的首选编程语言
目前，前端最新的开发技术栈：
- React： TS + Hooks
- Vue： TS + Vue3
- 注意： Vue2 对 TS 的支持不好~
安装编译 TS 的工具包
目标：能够安装ts的工具包来编译ts
内容：
- 问题：为什么要安装编译 TS 的工具包?
- 回答：Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。需要先将 TS 代码转化为 JS 代码，然后才能运行
- 安装命令：
npm i -g typescript或者yarn global add typescript- typescript 包：用来编译 TS 代码的包，提供了
tsc命令，实现了 TS -> JS 的转化 - 注意：Mac 电脑安装全局包时，需要添加
sudo获取权限：sudo npm i -g typescriptyarn 全局安装：sudo yarn global add typescript
- typescript 包：用来编译 TS 代码的包，提供了
- 验证是否安装成功：tsc –v(查看 typescript 的版本)
编译并运行 TS 代码
目标：能够理解typescript的运行步骤
内容：
- 创建 hello.ts 文件（注意：TS 文件的后缀名为
.ts） - 将 TS 编译为 JS：在终端中输入命令，
tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件） - 执行 JS 代码：在终端中输入命令，
node hello.js
1 创建 ts 文件 ===> 2 编译 TS ===> 3 执行 JS
- 说明：所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的类型即可
- 注意：由 TS 编译生成的 JS 文件，代码中就没有类型信息了
真正在开发过程中，其实不需要自己手动的通过tsc把ts文件转成js文件，这些工作应该交给webpack或者vite来完成
创建基于TS的vue项目
目标：能够使用vite创建vue-ts模板的项目
内容：
基于vite创建一个vue项目，使用typescript模板
yarn create vite vite-ts-demo --template vue-ts
