1. 初识TypeScript与类型安全

1.1 TypeScript简介

TypeScript是一种由微软开发的静态类型JavaScript的超集。它为JavaScript添加了类型系统，使得代码在编写时就具有了更强的可预测性和稳定性。通过类型检查，TypeScript可以在编译阶段捕获许多潜在的错误，从而提高开发效率和质量。

1.2 类型安全的重要性

类型安全是指编程语言在编译阶段能够确保类型正确性的特性。在TypeScript中，类型安全有助于：

  • 减少运行时错误
  • 提高代码可维护性
  • 促进团队合作

2. TypeScript基础类型

2.1 基础数据类型

TypeScript提供了以下基础数据类型：

  • number：表示数字
  • string：表示字符串
  • boolean：表示布尔值
  • void：表示没有返回值
  • any：表示任意类型

2.2 复杂数据类型

TypeScript还提供了以下复杂数据类型：

  • tuple：表示固定长度的数组
  • array：表示数组
  • enum：表示枚举类型
  • interface：表示接口类型
  • type：表示类型别名

3. 类型别名与接口

3.1 类型别名

类型别名用于为类型创建一个新的名称。它可以提高代码的可读性，并减少重复代码。

type UserID = string;
type RoleType = 'admin' | 'user' | 'guest';

let userRole: RoleType;
userRole = 'admin'; // 正确
// userRole = 100; // 错误

3.2 接口

接口用于定义一组属性和方法，类似于其他编程语言中的类。接口可以提高代码的复用性和可维护性。

interface User {
  id: string;
  name: string;
  email: string;
}

let user: User = {
  id: '123',
  name: '张三',
  email: 'zhangsan@example.com',
};

4. 函数类型

在TypeScript中，函数也可以拥有类型。

4.1 声明函数类型

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

4.2 函数重载

函数重载允许一个函数具有多个签名。

function sum(a: number, b: number): number;
function sum(a: string, b: string): string;
function sum(a: any, b: any): any {
  return a + b;
}

5. 类与继承

TypeScript中的类用于创建具有属性和方法的对象。

5.1 创建类

class User {
  id: string;
  name: string;
  email: string;

  constructor(id: string, name: string, email: string) {
    this.id = id;
    this.name = name;
    this.email = email;
  }

  getUserInfo(): string {
    return `${this.name} (${this.email})`;
  }
}

5.2 继承

TypeScript支持单继承。

class Admin extends User {
  constructor(id: string, name: string, email: string, isAdmin: boolean) {
    super(id, name, email);
    this.isAdmin = isAdmin;
  }

  isAdmin: boolean;
}

6. 高级类型

6.1 类型保护

类型保护用于判断一个变量的类型。

function isString(value: any): value is string {
  return typeof value === 'string';
}

let data = 100;
if (isString(data)) {
  console.log(data.toUpperCase()); // 正确
} else {
  console.log(data.toFixed(2)); // 错误
}

6.2 联合类型与交叉类型

联合类型表示多个类型中的一个，交叉类型表示多个类型的合并。

function getUserRole(role: 'admin' | 'user' | 'guest'): string {
  return role;
}

let userRole: string | number = 100;

7. 实践与应用

在实际项目中，我们可以根据需求选择合适的类型，以提高代码的稳定性和可维护性。以下是一些常见场景：

  • 在数据交互层使用类型定义API返回值
  • 在组件开发中使用接口和类型别名提高代码复用性
  • 在大型项目中使用枚举和类型别名规范变量命名

通过学习TypeScript类型系统，我们可以轻松实现类型安全编程，提高代码质量。希望本文能帮助您从零开始，掌握TypeScript类型系统。