zhonggee的博客

TypeScript（简称：TS）是 JavaScript 的超集。JS 开发过程中，需要等到代码真正去执行的时候才能发现错误。这其中绝大部分错误都是类型错误（Uncaught TypeError）。TS 开发过程中，可以在编写代码的同时就发现代码中的错误，减少找 Bug 、改 Bug 的时间，提高开发效率；其强大的类型系统也提升了代码的可维护性，使得重构代码更加容易。TypeScript 已成为大中型前端项目的首先编程语言。Vue 3 、Angular 、React 均支持 TS。

TypeScript增加了数据类型的校验（数值类型、字符串类型、布尔类型、null、undefined、symbol、数组类型、函数类型、对象类型、联合类型、自定义类型、void类数组类型、函数类型、对象类型、联合类型、自定义类型、void类型、any类型、unknown类型、never类型、元组类型、字面量类型、枚举类型）TS 也提供了 typeof 操作符：可以在类型上下文中引用变量或属性的类型（类型查询）作为类型注解，以此来简化类型书写。

如果没有明确的指定类型，TypeScript 会依照类型推断（ Type Inference ）的规则推断出一个类型，隐式设置类型注解。这种推断发生在初始化变量，决定函数返回值时。换句话说，由于类型推断的存在，这些情况，类型注解可以省略不写！TypeScript 提供了“类型断言”这样一种手段，允许开发者在代码中指定（断言）某个值的类型，告诉编译器此处的值是什么类型。TypeScript 一旦发现存在类型断言，就不再对该值进行类型推断，而是直接采用断言给出的类型。

class实例属性TS 中的 class，不仅提供了 class 的语法功能，也作为一种类型存在。类中有两个成员：属性和方法（属性和方法又分为：非静态属性/方法和静态[static]属性/方法）。类中属性要加数据类型，方法的参数和返回值也要加数据类型。实例属性，实例方法，构造方法，继承，public属性修饰符，protected属性修饰符，private属性修饰符，static静态成员，abstract抽象类。

在程序设计里面 ，接口起到了一种限制和规范的作用，就是批量对方法、属性进行约束。接口声明后，直接使用接口名称作为变量的类型即可。属性接口对对象的属性进行约束函数接口对方法传入的参数以及返回值进行约束索引接口对数组、对象进行约束类接口对类的约束，接口中的约束在使用 implements 继承的普通类中都需要实现接口继承接口也是可以继承的当子接口继承父接口之后，类继承自子接口，则子接口和父接口中的约束都需要遵守。

类装饰器 【工厂装饰器】 属性装饰器 方法装饰器 存取装饰器 参数装饰器Decorator 装饰器就是一个函数，前缀是 @ ，后跟函数表达式（或执行后返回一个函数），是一种特殊类型的声明，它能够被附加类声明、方法、属性、或者参数上也可以去修改类的行为。装饰器会在代码加载阶段执行，而不是在运行时执行，而且只会执行一次。所以装饰器对类的行为的改变，实际上发生在编译阶段。TypeScript 装饰器能在编译阶段运行代码，其本质上就是编译时执行的函数。

只读数组 只读元组 函数只读参数 对象只读属性 类只读属性 接口只读属性 TypeScript 允许声明只读数组，方法是在数组类型前面加上 readonly 关键字。只读数组，删除、修改、新增数组成员都会报错。元组也可以是只读的，不允许修改。函数定义时，在参数类型前加上 readonly 关键字，表示这是只读参数，函数内部不能修改这个参数。对象属性名前面加上 readonly 关键字，表示这个属性是只读属性，不能修改。

对象的类型兼容性 类的类型兼容性 接口的类型兼容性 函数的类型兼容性【函数参数个数】【函数参数类型】【函数返回值类型】TS 采用的是结构化类型系统，类型检查关注的是值的类型所具有的形状。在结构类型系统中，如果两个对象具有相同的形状，则认为它们属于同一类型。子类型：子类型继承了父类型所有的特性，并添加了父类型没有的特性。

交叉类型（&）：功能类似于接口继承（extends），用于组合多个类型为一个类型（常用于对象类型）。不同点：两种方式实现类型组合时，对于同名属性之间，处理类型冲突的方式不同。）：功能类似于接口继承（extends），用于。相同点：都可以实现对象类型的组合。继承时类型不兼容报错提示。（常用于对象类型）。

泛型是可以在保证类型安全前提下，让函数、类等与多种类型一起工作，从而灵活实现复用。常用于：函数、接口、class 中。泛型的写法【函数的泛型写法】【类的泛型写法】【接口的泛型写法】【类型别名的泛型写法】泛型参数默认值泛型参数约束方法一：为类型参数指定更加具体的类型方法二：为泛型参数指定接口约束收缩类型【keyof 关键字】泛型类型工具【Partial】【Readonly】【Pick】【Record】

类型就是使用属性名表达式的写法来描述类型。属性名索引场景：当无法确定对象中有哪些属性（或者说对象中可以出现任意多个属性）。在 JS 中数组是一类特殊的对象，数组的键（索引）是数值类型。并且，数组也可以出现任意多个元素。索引查询类型语法：Tpye [ Props ]作用：用来查询属性的类型注意： [] 中的属性必须存在于被查询类型中

类型映射基于索引类型，将一种类型按照映射规则，转换成另一种类型，通常用于对象类型。类型映射只能与类型别名一起使用。映射基本语法映射修饰符键名重映射【更改键名】【属性过滤】【映射联合类型】场景：基于旧类型创建新类型（对象类型），减少重复、提升开发效率。

类型缩小就是从宽类型转化为窄类型的过程，常用于处理联合类型变量的场景。类型保护通常用于缩小类型，类型保护的主要思想是尝试检测属性、方法或原型，以确定如何处理值。类型保护会在运行时检查变量以确保 TS 变量在特定的块级作用域内属于特定的类型，通常使用在条件块语句中。检测变量的正确方法、原型和属性，提示并规避不合法的操作，提高代码质量。类型守卫的作用在于，在语句的块级作用域【if语句内或三目运算符表达式内】触发类型缩小。类型守卫返回一个布尔值，接受一个类型并告诉TS是否可以缩小到更具体的类型。

TS 类型声明文件：用来为已存在的 JS 库提供类型信息。类型声明文件可以让我们不需要将JS重构为TS，就可以像用 TS 一样，有代码提示、类型保护等机制。TS 中有两种文件类型：1 .ts 文件 2 .d.ts 文件declare 关键字：用于类型声明，为其他地方（比如，.js 文件）已存在的变量声明类型，而不是创建一个新的变量。

namespace 主要用于解决命名冲突，他会在全局生成一个对象，在 namepace 内部的成员都要通过这个对象访问。使用命名空间可以解决代码和第三方库之间的同名冲突。TS 支持 CommonJS 和 ESM 两种模块系统，使得声明模块有两种写法，分别是使用字符串和变量名 。

使用脚手架创建 React 项目【三斜线指令 /// 】【配置文件 tsconfig.json】函数组件常用类型【函数组件类型及组件的属性】【函数组件属性的默认值】【事件绑定和事件对象】class类组件常用类型【class 组件的类型】【class 组件的属性和默认值】【class 组件 state 状态和事件】

初始化React 项目的重要文件介绍：public/index.html项目的入口文件，引用了第三方类库啊，还可以引入 cdn，或者样式，但是其中的 是项目的总容器，所有的内容存储在这个容器中。这个容器有且只能有一个。src/index.tsxdocument.getElementById(‘root’) 中的"root"便是index.html中的"root"了，便是引用页面内容了。在这里，也可以写一些内容(结构,样式,逻辑)。是整个项目的根组件。