TypeScript 类型解析大全｜青训营

睡得好没烦恼
493 阅读4分钟

看完深入浅出 TypeScript 此次课程想总结一下 TypeScript 的一些类型知识点。

TypeScript：JavaScript的超集

JavaScript 是一种动态类型的脚本语言，广泛用于前端开发。然而，JavaScript 缺乏强类型检查，这可能导致在开发大型应用程序时出现一些隐患和错误。为了解决这个问题，微软开发了 TypeScript，它是 JavaScript 的超集，提供了强大的静态类型系统和更多的工具支持。

基础类型和高级特性

TypeScript 提供了许多内置的基础类型，例如布尔型(boolean)、数字型(number)和字符串型(string)等。它还引入了枚举(enum)、任意类型(any)、未知类型(unknown)和无类型(void)等类型，这些类型可以使我们在开发过程中更准确地定义数据的结构和行为。

另外，TypeScript 还提供了一些高级特性，例如数组类型([])、元组类型(tuple)、函数类型以及接口(interface)等。接口在 TypeScript 中非常重要，可以用于定义对象的结构、函数类型和自定义属性。

基础类型

  1. boolean 布尔类型：表示真(true)或假(false)的值。
let isTrue: boolean = true;
let isFalse: boolean = false;
  1. number 数字类型：表示数字值。
let age: number = 29;
let weight: number = 65.5;
  1. string 字符串类型：表示文本或字符序列。
let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;
  1. enum 枚举类型：表示一组具名的常量值。
enum Color {
  Red,
  Green,
  Blue,
}

let favoriteColor: Color = Color.Blue;
console.log(favoriteColor); // 输出：2
  1. any 任意类型：表示任意类型，可以在编译时放宽类型检查。
let dynamicValue: any = "Hello";
dynamicValue = 123;
  1. unknown 未知类型：类似于 any 类型，但需要进行类型检查和类型断言。
let unknownValue: unknown = "World";
if (typeof unknownValue === "string") {
  console.log(unknownValue.toUpperCase()); // 进行类型检查和类型断言后才能使用
}
  1. void 无类型：表示没有返回值的函数类型。
function greet(): void {
  console.log("Hello!");
}
  1. never 永不存在的类型：通常用于函数永不返回或引发异常的情况。
function throwError(message: string): never {
  throw new Error(message);
}

高级特性

  1. 数组类型 []：表示元素组成的有序列表。
let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ["a", "b", "c"];
  1. 元组类型 tuple：表示固定长度和类型的数组。
let person: [string, number] = ["Alice", 25];
  1. 函数类型：定义函数的输入参数和输出类型。
function add(a: number, b: number): number {
  return a + b;
}
  1. 接口 interface：用于定义对象的结构、函数类型和自定义属性。
interface Person {
  name: string;
  age: number;
}

let person: Person = {
  name: "Alice",
  age: 25,
};

类和泛型

TypeScript 支持类的定义，通过增加公共(public)、私有(private)和受保护(protected)修饰符，可以更好地封装和组织代码。抽象类(abstract class)是 TypeScript 中的另一个有用的概念，它可以作为基类使用，并要求子类实现抽象方法。

另一个强大的 TypeScript 特性是泛型(generics)，它使我们可以编写具有通用性的代码。通过使用泛型，我们可以在定义函数、类和接口时，支持多种类型的输入。

类和抽象类

TypeScript 支持使用class关键字来定义类。类可以有公共(public)、私有(private)和受保护(protected)修饰符来控制成员的可访问性。

class Person {
  public name: string; // 公共成员
  private age: number; // 私有成员
  protected gender: string; // 受保护成员

  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  public getInfo(): string {
    return `Name: ${this.name}, Age: ${this.age}, Gender: ${this.gender}`;
  }
}

let person = new Person("Alice", 25, "Female");
console.log(person.name); // 可访问，输出：Alice
console.log(person.age); // 不可访问，编译错误
console.log(person.gender); // 不可访问，编译错误
console.log(person.getInfo()); // 可访问，输出：Name: Alice, Age: 25, Gender: Female

抽象类(abstract class)是不能被实例化的，只能用作其他类的基类。抽象类中可以包含抽象方法，这些方法在子类中必须被实现。

abstract class Shape {
  abstract calculateArea(): number; // 抽象方法，子类必须实现

  getInfo(): string {
    return `Area: ${this.calculateArea()}`;
  }
}

class Circle extends Shape {
  private radius: number;

  constructor(radius: number) {
    super();
    this.radius = radius;
  }

  calculateArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

let circle = new Circle(5);
console.log(circle.calculateArea()); // 输出：78.54（圆的面积）
console.log(circle.getInfo()); // 输出：Area: 78.54

泛型

泛型(generics)允许我们编写具有通用性的代码，可以在定义函数、类和接口时支持多种类型的输入。通过泛型，我们可以实现代码的重用和类型的灵活性。

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

let result1 = identity<string>("Hello"); // 指定类型参数为字符串
let result2 = identity<number>(100); // 指定类型参数为数字

console.log(result1); // 输出：Hello
console.log(result2); // 输出：100

在上述示例中，identity函数使用了泛型类型参数T，使得该函数可以接受任意类型的输入，并返回相同类型的输出。

高级类型和工具类型

TypeScript 提供了许多高级类型和工具类型，例如联合类型(union)和交叉类型(intersection)，以及类型断言(type assertion)和类型别名(type alias)等。这些工具类型可以帮助我们更灵活地处理复杂的类型操作，让代码更加可读和可维护。

高级类型

  1. 联合类型(union)：表示一个值可以是多个类型之一。
let value: number | string;
value = 123; // 数字类型
value = "hello"; // 字符串类型
  1. 交叉类型(intersection)：表示一个值具有多个类型的特性。
interface A {
  propA: number;
}

interface B {
  propB: string;
}

type AB = A & B;

let obj: AB = {
  propA: 10,
  propB: "hello",
};
  1. 类型断言(type assertion)：一种告诉编译器某个实例的具体类型的方式。
let someValue: unknown = "hello";
let length: number = (someValue as string).length;
  1. 类型别名(type alias)：用于给类型起别名，提高代码的可读性。
type Point = {
  x: number;
  y: number;
};

let p: Point = { x: 10, y: 20 };

常用工具类型

TypeScript 还提供了许多常用的工具类型，用于处理类型的转换和操作：

  • Partial<T>：将类型所有属性变为可选。
interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

let person: PartialPerson = {};
person.name = "Alice"; // 可选属性
  • Required<T>：将类型所有属性变为必选。
type RequiredPerson = Required<PartialPerson>;

let requiredPerson: RequiredPerson = { name: "Alice", age: 25 };
  • Readonly<T>：将类型所有属性变为只读。
type ReadonlyPerson = Readonly<Person>;

let readonlyPerson: ReadonlyPerson = { name: "Alice", age: 25 };
readonlyPerson.name = "Bob"; // 不可修改
  • Pick<T, K>：从类型T中选取一些属性作为新类型。
type PickPerson = Pick<Person, "name">;

let pickedPerson: PickPerson = { name: "Alice" };

总结

TypeScript 是现代 JavaScript 开发中不可或缺的一部分，它通过引入静态类型系统和更多工具支持，提高了代码质量和开发效率。无论是开发大型应用程序，还是构建可维护的代码库，TS 都是一个很好的选择。

Ծ‸Ծ 以上是有关 TS 的笔记内容，如有错，还请指正！

avatar
文章
阅读
粉丝