TypeScript是JavaScript的一个超集，它添加了静态类型检查，为JavaScript开发带来了类型安全性和可维护性。在这篇文章中，我们将深入探讨TypeScript的类型系统，从基础知识到高级特性，并通过实战案例帮助你更好地理解和掌握。

一、TypeScript类型系统概述

TypeScript的类型系统是它最强大的特性之一。它允许你在代码中定义变量的类型，从而在编译阶段就能发现潜在的错误。下面是一些TypeScript中最基本的类型：

1. 基本类型

  • 字符串（string）
  • 数字（number）
  • 布尔值（boolean）
  • null和undefined
  • 数组（array）
  • 元组（tuple）
  • 枚举（enum）
  • 任何类型（any）

2. 接口（Interfaces）

接口用于描述一个对象的结构，可以用来约束对象的形状。

interface Person {
  name: string;
  age: number;
}

3. 类型别名（Type Aliases）

类型别名提供了对现有类型的重命名。

type StringArray = Array<string>;

4. 高级类型

  • 联合类型（Union Types）
  • 交叉类型（Intersection Types）
  • 类型保护（Type Guards）
  • 泛型（Generics）

二、基础类型实战

让我们通过一个简单的示例来了解如何在TypeScript中使用基本类型。

1. 变量和函数类型注解

let age: number = 30;
function greet(name: string): string {
  return `Hello, ${name}!`;
}

2. 数组类型

let hobbies: string[] = ["Reading", "Cycling", "Hiking"];

3. 接口

interface Person {
  name: string;
  age: number;
}

function introduce(person: Person): void {
  console.log(`My name is ${person.name} and I am ${person.age} years old.`);
}

三、高级类型实战

接下来，我们将探讨一些更高级的类型特性。

1. 联合类型

function combine(input1: string, input2: number | string): string {
  return input1 + input2;
}

console.log(combine("Hello", "World")); // "HelloWorld"
console.log(combine("Hello", 30)); // "Hello30"

2. 类型保护

function isString(input: any): input is string {
  return typeof input === "string";
}

function printId(id: number | string): void {
  if (isString(id)) {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

printId(10); // "10.00"
printId("Hello"); // "HELLO"

3. 泛型

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

console.log(identity("Hello")); // "Hello"
console.log(identity(30)); // 30

四、总结

TypeScript的类型系统提供了强大的工具来确保代码的健壮性和可维护性。通过理解并应用基础和高级类型，你可以写出更清晰、更可靠的TypeScript代码。希望这篇文章能帮助你更好地掌握TypeScript的类型系统。