一、TypeScript简介
TypeScript 是一种由 Microsoft 开发的静态类型编程语言，它是 JavaScript 的超集，意味着它包含了 JavaScript 中所有的特性并且添加了更多的功能。
TypeScript 的主要特点是静态类型检查，可以在编译时发现类型错误，而不是在运行时；还有类、接口、命名空间、泛型等多种功能，可以提高代码的可读性、可维护性和重用性。
TypeScript 可以运行在任何支持 JavaScript 的平台上，包括浏览器、Node.js、移动应用和服务器应用等。它可以使用 JavaScript 的任何库和框架，并且支持类型声明文件，可以为第三方库提供类型定义，以便在开发时提供更好的代码补全和语法检查。
相对于 JavaScript，TypeScript 需要额外的编译过程，将 TypeScript 代码编译成 JavaScript 代码，但这个过程可以使用 TypeScript 提供的编译工具自动完成，无需手动操作。
总的来说，TypeScript 是一种可靠、可扩展、易于维护的编程语言，适合用于大型项目的开发和维护，并且可以与 JavaScript 无缝集成。
简单理解就是：
TypeScript (简称:TS)是JavaScript的超集 (JS有的TS 都有)。
TypeScript=Type +JavaScript (在JS 基础之上，为JS添加了类型支持)。
二、TypeScript为什么要为js增加类型支持？
背景：JS的类型系统存在“先天缺陷”，J5代码中绝大部分错误都是类型错误(UncaughtTypeError)。
问题：增加了找 Bug、改 Bug 的时间，严重影响开发效率。
从编程语言的动静来区分，TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言。
静态类型：编译期做类型检查；
动态类型：执行期做类型检查代码；
编译和代码执行的顺序：1编译 2执行。
对于JS来说：需要等到代码真正去执行的时候才能发现错误 (晚)。
对于TS来说：在代码编译的时候 (代码执行前)就可以发现错误 (早)。
并且，配合VSCode 等开发工具，T5 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改Bug 时间。
三、TypeScript 对比 JS 的优势
3.1、更早 (写代码的同时)发现错误，减少找 Bug、改 Bug 时间，提升开发效率。
3.2、程序中任何位置的代码都有代码提示，随时随地的安全感，增强了开发体验和信心。
3.3、强大的类型系统提升了代码的可维护性，使得重构代码更加容易。
3.4、支持最新的 ECMAScript 语法，优先体验最新的语法，让你走在前端技术的最前沿。
3.5、 类型推断机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低了成本。
3.6、Vue3源码使用TS重写、Angular默认支持TS、React与TS完美配合，TypeScript已成为大中型前端项目的首选编程语言。
四、安装TypeScript
4.1、通过npm（Node.js包管理器）
npm install -g typescript
yarn add -g typescript
pnpm add -g typescript
4.2、查看版本
tsc -v
4.3、ts-node ，不需要每次修改都执行ts文件，可以简化操作。
pnpm add ts-node
4.4、使用
ts-node hello.ts
五、在命令行里边执行ts文件
tsc test.ts
六、语法学习
6.1、理解类型声明
<template> <div> <h1>TypeSctipt</h1> <div>{{ age }}</div> </div> </template> <script setup lang="ts"> // 有明确的类型，即: number let age: number = 20 </script> <style scoped> </style>
6.2、常用类型概述
TypeScript是JS的超集，TS提供了JS的所有功能，并且额外的增加了：类型系统。
所有的JS代码都是TS代码。
JS有类型（比如，number/string等），但是JS不会检查变量的类型是否发生变量。而TS会检查。
TypeScript类型系统的主要优势：可以显示标记处代码中的意外行为，从而降低了发生错误的可能性。
6.3、类型注解
let name: string = 'snow'
说明：代码中的 string 就是类型注解。
作用：为变量添加类型约束。比如，上述代码中，约定变量name的类型为string（字符串类型）。
解释：约定了什么类型，就只能给变量赋值该类型的值， 否则就会报错。
6.4、常用类型分类
JS已有类型
原始类型：number、string、boolean、null、undefined、symbol
对象类型：object（包括：数组、对象、函数）
TS新增类型
联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等。
6.5、原始类型
原始类型：number、string、boolean、null、undefined、symbol
特点：简单。这些类型，完全按照js中类型的名称来书写。
let age: number = 18 let name: string = 'snow' let isLoading: boolean = false let a: null = null let b: undefined = undefined let c: symbol = Symbol() // 等等...
6.6、数组类型
let numbers: number[] = [1, 2, 3] // 推荐用法，使用直观 let strings: Array<string> = ['a', 'b', 'c'] // 数组中既有number类型，又有string类型 let arr: (number | string)[] = [1, 2, 3, 'a', 'b', 'c'] // 解释：| （竖线）在TS中叫做联合类型（由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种）。 // 注意：这是TS中的联合类型的语法，只有一根竖线，不要与js中的或（|）混淆了。 let b: boolean[] = [true, false, true, false]
6.7、联合类型
需求：数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写？
let arr: (number | string)[] = [1, 2, 3, 'a', 'b', 'c'] // 正确 let arr1: number | string[] = 123 // 正确 let arr2: number | string[] = ['a', 'b', 'c'] // 正确 let arr3: number | string[] = [1, 2, 3] // 错误
解释：| （竖线）在TS中叫做联合类型，由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。
注意：这是TS中联合类型的语法，只有一根竖线，不要与JS中的（||）混淆了。
