一、学习TypeScript有什么用

TypeScript与JavaScript区别

TpyeScript	JavaSCript
JavaScript的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型	动态弱类型语言
可以在编译期间发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋值成不同类型

注：强类型语言和弱类型语言
- 强类型语言：强类型语言是一种强制类型定义的语言，一旦某一个变量被定义类型，如果不经过强制转换，则它永远就是该数据类型了，强类型语言包括Java、.net 、Python、C++等语言。
  - 例如：定义一个整数如果不进行强制类型转换，则不可以将该整数转化为字符串类型
- 弱类型语言：弱类型语言是一种弱类型定义的语言，某一个变量被定义类型，该变量可以根据环境变化自动进行转换，不需要经过显性强制转换。弱类型语言包括vbQ 、PHP、javascript等语言。
  - 例如：输入SumResult的答案不是12，而是66，再次是将A的类型转化为了字符串然后进行拼接。输入MinResult的答案是0，是将B的类型转化为了数字，然后进行减法。
```
var A =6;
var B = "6";
SumResult = A +B;
MinResult = A -B；
```

TypeScript的优点：类型安全、下一代JS特性、完善的工具链
TypeScript学习推荐：

Awesome TypeScript：TS开源教程及应用
ByteTech：React + TypeScript开发模式介绍
TypeScript Playground：TS到JS在线编辑

二、TypeScript基础

TypeScript基础类型

boolean、number(包含整数、浮点数。复数)、string
枚举enum（对枚举值进行定义，会将枚举值进行映射；常量&异构枚举）
any、unknown（为any的替代类型）、void
never（永远不存在的值，防御性编程使用）
数组类型[]
元祖类型tuple

TypeScript函数类型

定义：TS定义函数但型要定义输入参数类型和输出参数类型
输入参数：参数支持可选参数和默认参数
输出参数：输出可以自动推断，没有返回值时，默认为void类型
函数重载：名称相同但参数不同，可以通过重载支持多种类型

interface（接口）

定义：接口是为了定义对象类型
- 对象类型：具体描述一个JS对象，是对所有键值对的描述
特点：
- 可选属性：？
- 只读属性：readonly
- 可以描述函数类型
- 可以描述自定义属性
总结：接口非常灵活duck typing

定义：写法和JS差不多，增加了一些定义
特点：
- 增加了public、private、protected修饰符
- 抽象类：
  - 只能被继承，不能被实例化
  - 作为基类，抽象方法必须被子类实现
- interface约束类，使用implements关键字

三、TypeScript进阶

联合类型

定义：在TypeScript 中，联合类型（Union Types）允许将多个不同类型的值组合在一起。这使得一个变量或参数可以接受多种类型的值。联合类型使用 | 符号来分隔每个可能的类型。当一个值可以是多个类型之一时，就可以使用联合类型。
示例

// 定义一个接受 string 或 number 类型参数的函数
function printInfo(input: string | number) {
    console.log(input);
}

printInfo("Hello"); // 输出: Hello
printInfo(42);      // 输出: 42
//解析：在上面的示例中，函数 `printInfo` 接受一个参数 `input`，该参数的类型被定义为 `string | number`，这表示它可以是字符串类型或数字类型

使用场景举例

// 定义一个接受不同类型的配置参数的函数
function configure(option: string | boolean | number) {
    // 处理不同类型的配置
    if (typeof option === "string") {
        // 处理字符串类型的配置
    } else if (typeof option === "boolean") {
        // 处理布尔类型的配置
    } else if (typeof option === "number") {
        // 处理数字类型的配置
    }
}

configure("value");   // 处理字符串类型的配置
configure(true);      // 处理布尔类型的配置
configure(42);        // 处理数字类型的配置

注意：在使用联合类型时，只能访问所有联合类型的共同属性和方法，因为 TypeScript 不会自动识别每个具体类型的特定属性或方法。如果需要在运行时处理不同类型的属性或方法，可能需要进行类型断言或类型保护。

交叉类型

定义：交叉类型（Intersection Types）允许将多个类型合并为一个新的类型，该新类型具有所有原始类型的属性和方法。交叉类型使用 & 符号来连接多个类型，从而创建一个具有所有类型特性的合并类型。
示例：

// 定义两个类型
type FirstType = {
    id: number;
    name: string;
};

type SecondType = {
    age: number;
    gender: string;
};

// 定义交叉类型，将两个类型合并为一个新类型
type CombinedType = FirstType & SecondType;

// 创建一个符合交叉类型的对象
const combinedObject: CombinedType = {
    id: 1,
    name: "Alice",
    age: 30,
    gender: "female"
};

类型断言

定义：类型断言（Type Assertion）是一种手动告诉编译器某个值的具体类型的方式。它允许在编码过程中明确指定变量或表达式的类型，即使 TypeScript 的类型推断不足以确定类型。

类型断言两种形式：尖括号语法和as语法：

尖括号语法：

let value: any = "Hello, TypeScript!";
let lengthValue: number = (<string>value).length;

as语法：

let value: any = "Hello, TypeScript!";
let lengthValue: number = (value as string).length;

类型别名（type VS interface）

定义：给类型起个别名
相同点：
- 都可以定义对象或函数
- 都允许继承
差异点：
- interface是TS用来定义对象，type是用来定义别名方便使用
- type可以定义基本类型，interface不行
- interface可以合并重复声明，type不行

泛型

定义拓展：
- 官方定义：软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重复性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型。这在创建大型系统时提供了十分灵活的功能
- 简要定义：泛型（Generics）是一种用于创建可重用、灵活的组件的机制。它允许你在定义函数、类或接口时，不仅指定具体的类型，还可以使用一个或多个类型参数来代表具体的类型，从而使代码更加通用。
基本定义：
- 泛型的语法是<>里面写类型参数，一般用T表示
- 使用时有两种方法制定类型：
  - 定义要使用的类型
  - 通过TS类型推断，自动推导类型
- 泛型的作用是临时占位，之后通过传来的类型进行推导
基础操作符：
- typeof：获取类型
- keyof：获取所有键
- in：遍历枚举类型
- T[K]：索引访问
- extends：泛型约束
常用工具类型：
- Partial<T>：将类型属性变为可选
- Required<T>：将类型属性变为必选
- Readonly<T>：将类型属性变为只读
- Pick、Record等

四、TypeScript实战 & 工程

声明文件：

declare：三方库需要类型声明文件
.d.ts：声明文件定义
@types：三方库TS类型包
tsconfig.json：定义TS的配置

五、个人总结

学习TypeScript有许多好处，特别是对于开发大型、复杂的应用程序来说。以下是一些学习TypeScript的主要原因：

类型安全性： TypeScript引入了静态类型系统，可以在开发过程中捕获许多常见的错误，如类型不匹配、空值等。这可以减少在运行时出现的错误，提高代码质量和稳定性。
代码维护性： 静态类型系统和明确的类型注解使得代码更易于理解和维护。开发人员可以清楚地了解函数和变量的期望输入输出，减少了阅读代码时的困惑。
智能提示： TypeScript编辑器能够根据类型信息提供更准确的代码补全和智能提示，从而提高开发效率。这有助于减少输入错误和查找文档的时间。
重构支持： 由于静态类型系统，重构代码变得更加容易。重命名变量、函数和类时，编辑器可以自动处理所有引用，从而避免遗漏。
团队协作： 当多个开发人员协作开发项目时，类型系统可以明确代码的意图，降低团队成员之间的沟通成本，并减少合并冲突。
跨平台开发： TypeScript可以编译为JavaScript，因此可以在几乎所有支持JavaScript的环境中运行，包括浏览器、Node.js、移动应用等。
生态系统和工具支持： TypeScript拥有丰富的生态系统，许多流行的库和框架都提供了对TypeScript的支持。此外，许多开发工具（如Visual Studio Code）都具有强大的TypeScript集成。
逐渐采用： 如果你已经有JavaScript的基础，学习TypeScript并不需要从头开始。你可以逐渐将TypeScript引入到现有的JavaScript项目中，从而实现平稳的过渡。

总之，学习TypeScript可以提高代码质量、开发效率和团队协作能力，特别是在大型项目中。它为开发人员提供了更多的工具和保障，以确保他们能够更轻松地构建可靠的应用程序。

深入浅出TypeScript课程知识点归纳 | 青训营

一、学习TypeScript有什么用

二、TypeScript基础

三、TypeScript进阶

四、TypeScript实战 & 工程

五、个人总结