前言

TypeScript 是一种由微软开发并开源的编程语言，它是 JavaScript 的一个超集，支持 JavaScript 的所有语法，并提供了诸如类型检查、接口、类、命名空间等强大的抽象特性。

为什么要学TypeScript

增强代码的可维护性和可读性：TypeScript通过强类型、接口和类等特性，使得代码更加容易被理解和维护，减少了代码中的错误和意外行为。
提高开发效率：TypeScript中支持类型推导、代码智能提示、自动完成等功能，可以提高开发人员的编码效率，减少错误和调试时间。
增强代码的可重用性：TypeScript中的模块化和命名空间等特性，可以使得代码更加可重用和易于扩展。
支持ES6和后续版本的特性：TypeScript支持ES6和后续版本的特性，开发人员可以在TypeScript中使用最新的JavaScript语言特性，而无需等待浏览器的支持。
方便与现有JavaScript代码库集成：TypeScript中的声明文件可以描述已有JavaScript代码库的类型信息，以便在TypeScript中使用这些代码库时，能够获得类型检查和代码提示等功能，提高代码的可维护性和可读性。

TypeScript vs JavaScript

图片.png

TypeScript基础

TS基础-基础类型

TypeScript 的基础类型包括以下五种：

boolean（布尔类型）：表示 true 或 false。
number（数字类型）：表示数值，可以是整数或浮点数。
string（字符串类型）：表示文本数据。
null 和 undefined（空类型）：表示空值，null 表示一个空对象引用，undefined 表示一个未定义的变量或属性。
any（任意类型）：表示任何类型的值。如果某个变量或参数定义为 any 类型，则它允许存储任何类型的值。

还有一些 TypeScript 提供的扩展类型可以辅助进行类型约束：

void（无返回值类型）：表示函数没有返回值。
never（永远不存在的类型）：表示函数不会正常返回（如抛出异常、死循环等）。
Array（数组类型）：表示具有相同类型 T 的元素的数组。
Tuple（元组类型）：表示元素数量和类型已知的数组，与数组不同的是，元组中的每个位置可以指定不同的类型。

TS基础-函数类型

图片.png

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

TS基础-interface

在 TypeScript 中，interface 是一种用来描述对象类型的语法。可以使用 interface 定义一个对象、函数等的形状，从而定义一些规范和规则。

interface Person {
  name: string;
  age: number;
}

上述 interface 描述了一个名为 Person 的对象，该对象中包含有名字属性（name）和年龄属性（age），两个属性分别对应 string 和 number 类型。

接下来我们定义一个基于上述 interface 创建 Person 对象的函数：

function createPerson(name: string, age: number): Person {
  return { name, age };
}

上述函数 createPerson 接受一个字符串类型的参数 name 和一个数字类型的参数 age，并返回一个具有相关属性的对象。这里，函数返回的对象符合 Person 接口所定义的规范，即包含 name 和 age 两个属性。

此外，也可以在 interface 中定义可选属性和只读属性，以及接口之间的继承关系。示例代码如下：

// 可选属性：使用问号标记
interface Person {
  name: string;
  age?: number;
}

// 只读属性：使用 readonly 标记
interface Point {
  readonly x: number;
  readonly y: number;
}

// 继承：使用 extends 关键字
interface Student extends Person {
  grade: number;
}

TypeScript进阶

TS进阶-高级类型

联合类型和交叉类型：

type A = string | number;
type B = { name: string } & { age: number };

const foo: A = "bar";
const bar: B = { name: "Foo", age: 42 };

类型断言有两种方式：

尖括号语法（“尖括号”或 “angle-bracket” 语法）

const someValue: any = "this is a string";
const strLength: number = (<string>someValue).length;

as 语法

const someValue: any = "this is a string";
const strLength: number = (someValue as string).length;

类型别名和接口

type User = {
  name: string;
  age: number;
};

interface Person {
  name: string;
  age: number;
}

const user: User = { name: "John Smith", age: 25 };
const person: Person = { name: "Jane Doe", age: 30 };

TS进阶-泛型

软件工程中，我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

基本定义

泛型的语法<>里面写类型参数，一般用T表示；
使用时有两种方法指定类型：
1、定义要使用的类型
2、通过TS类型推断，自动推导类型
泛型的作用是临时占位，之后通过传来的类型进行推导；

function identity<T>(arg: T): T {
  return arg;
}

console.log(identity<string>("hello")); // 输出 hello
console.log(identity<number>(42));       // 输出 42

在上述代码中，<T> 表示泛型类型参数，使用时需要替换成具体的类型。调用函数时，可以指定要确定的类型，例如 identity<string>("hello") 即可将 arg 参数的类型确定为 string，返回值也是 string 类型。

TS进阶-泛型工具类型

基础操作符

typeof:获取类型
keyof:获取所有键
in:遍历枚举类型
T[K]:索引访问
extends:泛型约束

常用工具类型

Partial<T>: 表示类型 T 的所有属性可选；
Required<T>: 表示类型 T 的所有属性都是必需的；
Readonly<T>: 表示类型 T 的所有属性都是只读的；
Pick<T, K>: 表示从类型 T 中选取某些键名为 K 的属性构成一个新类型；
Record<K, T>: 表示将键名类型为 K，值类型为 T 的对象类型化；

TS实战-声明文件

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

总结

TypeScript提供了更加严格的类型检查和类型推断机制，可以帮助开发者在编写代码时更早地发现潜在的错误和问题，提高代码的可维护性和可读性。

基础类型：TypeScript支持JavaScript中的基础类型，包括boolean、number、string、null、undefined、symbol和any。此外，TypeScript还提供了额外的类型，如枚举类型、元组类型和void类型等。
函数类型：TypeScript中的函数类型可以通过箭头函数语法或函数关键字声明。函数类型可以包括参数类型、返回值类型和可选参数等。此外，TypeScript还支持函数重载和函数类型的推断。
接口（interface）：接口是TypeScript中用于描述对象类型的一种语法。接口可以描述对象中包含的属性、属性类型和方法，并且可以用于定义类中的成员和函数类型。接口还可以进行继承和泛型约束，以提高代码的可维护性和可重用性。

同样，TypeScript也提供了许多高级类型和泛型等功能，让编写更加健壮，可维护和可复用的代码，在开发大型工程中尤其重要，以下是对高级类型、泛型和泛型工具类型的简要总结：

高级类型：TypeScript提供了许多高级类型，例如交叉类型、联合类型、类型别名、元组类型、映射类型、条件类型等。这些类型可以帮助我们更好地描述和组织代码，提高代码的可读性和可维护性。
泛型：TypeScript中的泛型可以让我们编写更加通用和可重用的代码。通过泛型，我们可以将类型参数化，使得函数、类和接口等可以处理不同类型的数据。泛型还可以帮助我们实现类型安全的容器和算法等。
泛型工具类型：TypeScript还提供了许多有用的泛型工具类型，例如Partial、Required、Readonly、Pick等。这些工具类型可以帮助我们更方便地操作和转换类型，提高代码的可重用性和可维护性。

深入浅出 TypeScript | 青训营笔记

前言