2023重磅更新,TS从入门到深度掌握,晋级TS高手「完JIE」

64 阅读4分钟

2023重磅更新,TS从入门到深度掌握,晋级TS高手

核心代码,注释必读

// download:3w ukoou com

TS 高级类型 在TypeScript中,有一些高级类型和特性可以帮助我们更好地利用类型系统和编写类型安全的代码。以下是一些常见的TS高级类型:

  1. 联合类型(Union Types):使用|符号可以将多个类型组合成一个联合类型。例如,string | number表示一个可以是字符串或数字的类型。

  2. 交叉类型(Intersection Types):使用&符号可以将多个类型合并为一个交叉类型。交叉类型表示同时具有多个类型的特性。例如,TypeA & TypeB表示一个同时具有TypeA和TypeB属性的类型。

  3. 类型守卫(Type Guards):通过使用类型守卫,可以在代码中条件地检查变量的类型,并在特定条件下执行相应的操作。可以使用typeofinstanceof、自定义类型谓词等来进行类型守卫。

  4. 类型别名(Type Aliases):使用type关键字可以创建类型别名,用于给一个类型起一个新的名称。类型别名可以简化复杂类型的书写,并提高代码的可读性。

  5. 字面量类型(Literal Types):字面量类型允许我们将具体的值作为类型。例如,type MyBoolean = true | false定义了一个只能取truefalse值的类型。

  6. 可辨识联合(Discriminated Unions):可辨识联合是一种结构化的类型模式,通过共享一个公共的可辨识属性来区分不同的类型。通过使用联合类型和字面量类型,可以创建可辨识联合类型,从而实现类似模式匹配的功能。

  7. 条件类型(Conditional Types):条件类型是一种基于条件判断的类型,可以根据类型系统中的条件来确定最终的类型。通过使用extends关键字和条件表达式,可以创建复杂的类型映射和转换。

  8. 映射类型(Mapped Types):映射类型允许我们根据现有类型创建新的类型。通过使用keyof操作符和索引访问类型,可以在编译时自动转换类型的属性。

  9. 可选类型(Optional Types):在类型中使用?符号可以将属性标记为可选的,即可以存在或不存在。这使得在对象类型中某些属性可以选择性地存在。

  10. 索引类型(Index Types):索引类型允许我们通过字符串或数字索引访问对象的属性。通过使用索引类型和索引访问操作符keyof[],可以在编译时检查和访问对象属性。

TS从入门到深度掌握,晋级TS高手 - Vue3源码9种TS高级技巧

Vue3 的源码使用了 TypeScript 进行编写,在源码中有一些非常高级且实用的 TypeScript 技巧,这些技巧对于学习和使用 TypeScript 非常有用。以下是其中一些技巧:

  1. 类型断言:Vue3 源码中大量使用了类型断言,通过类型断言可以把一个变量强制转换为特定的类型。

  2. 条件类型:这是 TypeScript 中一个非常强大的功能,可以创建根据类型信息进行选择的类型。

  3. 映射类型:Vue3 源码中使用了映射类型创建了许多新的、基于旧有类型变换的类型。

  4. 元祖和元祖的可变参数:在 Vue3 中,元祖和元祖的可变参数被用作函数参数类型的描述。

  5. 非空断言操作符:Vue3 源码中,非空断言操作符用于告知 TypeScript 编译器,一个变量是非空的。

  6. 类型守卫:类型守卫是一种检查类型的方法,常用于函数内部,Vue3 源码中就大量使用了类型守卫。

  7. 类型复用:在 Vue3 源码中多次定义了函数和接口,使用extends,&,| 等操作符进行类型的复用和扩展。

  8. infer关键字:在 TypeScript 的类型推导中,infer P 表示待推断的类型,用于实现复杂的类型推导。

  9. keyof 和 typeof:在 Vue3 源码中,keyof 被用来获取一个类型的所有键的类型,而 typeof 则用来获取一个变量的类型。