深入理解TypeScript｜ 青训营

麻辣小兔喵
105 阅读2分钟

JavaScript

  • 一种脚本语言，用于创建动态网页
  • 动态弱类型语言
  • 只能在运行时发现错误
  • 变量可以被赋值成不同类型

TypeScript

  • JavaScript的超集，用于解决大型项目的代码复杂性
  • 强类型，支持静态和动态类型
  • 可以在编译期间发现并纠正错误
  • 不允许改变变量的数据类型
  • 类型安全+下一代JS特性+完善的工具链

Awesome Typescript：开源教程及应用

TypeScript Playground：TS到JS在线编译

TypeScript

TS基础-基础类型

  1. boolean、number、string
  2. undefined、null
  3. any、unknown、void
  4. never
  5. 数组类型[]
  6. 元组类型tuple

TS基础-函数类型

定义：TS定义函数类型时要定义输入参数类型和输出参数

输入参数：参数支持可选参数和默认参数

输出参数：输出可以自动推断，没有返回值时，默认为void类型

函数重载：名称相同但参数不同，可以通过重载支持多种类型

TS基础-interface

定义：接口是为了定义对象类型

特点：

  • 可选属性：？
  • 只读属性：readonly
  • 可以描述函数类型
  • 可以描述自定义属性

总结：接口非常灵活 duck typing

TS基础-类

定义：写法和JS差不多，增加了一些定义

特点：

  • 增加了public、private、protected修饰符

  • 抽象类：

    • 只能被继承，不能被实例化
    • 作为基类，抽象方法必须被子类实现

  • interface约束类，使用implements关键字

TS进阶-高级类型

  1. 联合类型 |
  2. 交叉类型 &
  3. 类型断言
  4. 类型别名

  • 定义：给类型起个别名

  • 相同点

    • 都可以定义对象或函数
    • 都允许继承

  • 差异点

    • interface是TS用来定义对象，type是用来定义别名方便使用
    • type可以定义基本类型，interface不行
    • interface可以合并重复声明，type不行

TS进阶-泛型

官方定义：软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型、同时也能支持未来的数据类型。在像C#和JAVA这样的语言中就可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

基本定义：

  1. 泛型的语法是<>里面写类型参数，一般用T表示；

  2. 使用时有两种方法指定类型

    • 定义要使用的类型
    • 通过TS类型推断，自动推导类型

  3. 泛型的作用是临时占位，之后通过传来的类型进行推导

TS进阶-泛型工具类型-基础操作符

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

TS进阶-泛型工具类型-常用工具类型

  • Partial：将类型属性变为可选
  • Requires:将类型属性变为必选
  • Readonly:将类型属性变为只读
  • Pick、Record…

TS实战-声明文件

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

总结

TypeScript是一种非常强大的编程语言，特别适合用于大型项目的开发，不仅可以利于编写更加健壮和可维护的代码，还能提高开发效率和团队协作。

  1. 动态弱类型 vs. 强类型：JavaScript作为动态弱类型语言，虽然灵活，但在大型项目中容易引发错误。TypeScript作为强类型语言，可以在编译期间发现并纠正类型错误，提高了代码的健壮性和可维护性。
  2. 编译期间错误检查：TypeScript的一个显著特点是可以在编译期间捕获错误，这是JavaScript所缺乏的。
  3. 变量类型不可变：在TypeScript中，一旦变量被指定类型，就不能再改变其数据类型。这让代码更加稳定，减少了一些潜在的隐患。
  4. TypeScript的优势：学习内容中提到了TypeScript的优势包括类型安全、支持下一代JS特性和完善的工具链。
  5. 类型系统：TypeScript的类型系统非常灵活且强大。通过基础类型、函数类型、接口和泛型，我们可以表达复杂的数据结构和函数签名。特别是泛型，它提供了一种通用的方式来处理多种数据类型，增加了代码的复用性和可扩展性。
  6. 泛型工具类型：学习了泛型工具类型后，我对TypeScript更加的着迷。像Partial<T>、Readonly<T>等工具类型，为我们提供了便捷的操作和转换数据类型的方式，减少了很多重复的代码。
  7. 声明文件和第三方库：TypeScript中的声明文件对于使用第三方库非常重要，它让TypeScript能够理解和推断外部库的类型信息，提供了更好的代码提示和类型检查。
avatar
文章
阅读
粉丝