深入浅出TypeScript | 青训营笔记

You1i
95 阅读4分钟

为什么学习TypeScript

1. 更好的代码可读性和可维护性：TypeScript 强制类型检查可以帮助开发者在编写代码时发现潜在的错误，减少代码中的 bug，提高代码的可读性和可维护性。

2. 更好的IDE支持：TypeScript 提供了更好的 IDE 支持，包括代码补全、代码导航、重构等功能，可以提高开发效率。

3. 更好的团队协作：TypeScript 强制类型检查可以帮助团队成员更好地理解代码，减少沟通成本，提高团队协作效率。

4. 更好的代码重用性：TypeScript 支持面向对象编程，可以更好地实现代码的重用性。

基础知识

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集，可以编译成纯JavaScript代码。TypeScript强制类型检查可以帮助开发者在编写代码时发现潜在的错误，减少代码中的bug，提高代码的可读性和可维护性。

基础数据类型

TypeScript的常见数据类型一共有六种：

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

函数类型

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

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

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

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

function add(a: number, b: number): number {
    return a + b;
}

接口

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

特点：

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

类

语法与JavaScript差不多，只是增加了一些定义。

特点：

  • 增加了public、private、protected修饰符
  • 抽象类：
    • 只能被继承，不能被实例化
    • 作为基类，抽象方法必须被子类实现
  • interface约束类，使用implements关键字

进阶知识

学习完了基础知识，让我们学习一下进阶知识。

高级类型

  1. 交叉类型（Intersection Types）：可以将多个类型合并为一个类型。例如，如果您有一个类型为 Person 和一个类型为 Employee，您可以使用交叉类型将它们合并为一个类型，如下所示：
type Person = {
  name: string;
  age: number;
};

type Employee = {
  id: number;
  salary: number;
};

type PersonEmployee = Person & Employee;
  1. 联合类型（Union Types）：可以将多个类型组合成一个类型。例如，如果您有一个类型为 string 和一个类型为 number，您可以使用联合类型将它们组合成一个类型，如下所示:
type StringOrNumber = string | number;
  1. 类型别名（Type Aliases）：可以为一个类型定义一个别名。例如，如果您有一个类型为 Person，您可以使用类型别名为它定义一个别名，如下所示:
type Person = {
  name: string;
  age: number;
};

和接口的区别：

  • 定义：给类型起个别名
    • 相同点：
    1. 都可以定义对象或函数
    2. 都允许继承-差异点：
      1. interface是TS用来定义对象，type是用来定义别名方便使用；
      2. type可以定义基本类型，interface不行；
      3. interface可以合并重复声明，type不行；
  1. 类型断言可以用来告诉编译器一个值的类型。这在您知道一个值的类型，但编译器不知道的情况下非常有用。
// 尖括号
const foo: any = "hello world";
const bar = (<string>foo).toUpperCase();
// as语法
const foo: any = "hello world";
const bar = (foo as string).toUpperCase();

泛型

泛型可以帮助您编写更通用的代码，以便您可以在不同的类型上重用相同的代码。

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

基本定义：

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

声明文件

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