TypeScript 数组与对象类型定义

TypeScript 强大的类型系统让开发者能够精确描述数据结构，特别是在处理数组和对象时。本文将深入探讨如何在 TypeScript 中为数组和对象定义类型，从基础到进阶技巧，帮助您写出更安全、更可维护的代码。

一、数组类型定义

数组是相同类型元素的集合，TypeScript 提供了多种方式来定义数组类型。

1. 基础数组类型定义

typescript 复制代码

// 字符串数组
const names: string[] = ["Alice", "Bob", "Charlie"];

// 数字数组
const ages: number[] = [25, 30, 22];

// 布尔值数组
const isActive: boolean[] = [true, false, true];

// 联合类型数组
const mixed: (string | number)[] = ["text", 42, "hello", 100];

2. 泛型数组类型 (Array)

typescript 复制代码

// 使用泛型定义数组
const emails: Array<string> = ["alice@example.com", "bob@example.com"];

// 复杂对象数组
type User = {
  id: number;
  name: string;
};

const users: Array<User> = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

3. 只读数组

防止数组被修改，提高代码安全性：

typescript 复制代码

// 只读数组类型
const colors: readonly string[] = ["red", "green", "blue"];
// colors.push("yellow"); // 错误：只读数组不能修改

// 使用泛型形式
const numbers: ReadonlyArray<number> = [1, 2, 3];
// numbers[0] = 10; // 错误：只读数组元素不可修改

4. 元组类型 (Tuple)

固定长度和类型的数组：

ini 复制代码

// 基本元组
type Point2D = [number, number];
const point: Point2D = [10, 20];

// 可选元素的元组
type RGBColor = [number, number, number, number?]; // 第四个元素可选
const white: RGBColor = [255, 255, 255];
const whiteWithAlpha: RGBColor = [255, 255, 255, 1];

// 带标签的元组（TypeScript 4.0+）
type UserData = [name: string, age: number, isAdmin: boolean];
const user: UserData = ["Alice", 30, true];

5. 常量断言 (as const)

将数组转换为只读元组：

typescript 复制代码

// 常量断言创建只读元组
const numbers = [1, 2, 3] as const;
// numbers.push(4); // 错误 - readonly
// numbers[0] = 10; // 错误 - 只读

// 配合元组类型使用
function sum(a: number, b: number): number {
  return a + b;
}

const operands = [5, 10] as const;
sum(...operands); // 正确

二、对象类型定义

1. 接口 (Interface)

定义对象结构的主要方式：

typescript 复制代码

// 基本接口
interface User {
  id: number;
  name: string;
  email: string;
}

const alice: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com"
};

2. 类型别名 (Type Alias)

使用类型别名定义对象结构：

ini 复制代码

// 使用type定义对象类型
type Product = {
  id: string;
  name: string;
  price: number;
  inStock: boolean;
};

const laptop: Product = {
  id: "p1001",
  name: "Laptop",
  price: 999.99,
  inStock: true
};

3. 可选属性

使用 ? 标记可选属性：

ini 复制代码

interface Config {
  apiUrl: string;
  timeout?: number; // 可选属性
  retries?: number; // 可选属性
}

const config1: Config = { apiUrl: "https://api.example.com    " };
const config2: Config = {
  apiUrl: "https://api.example.com" ,
  timeout: 5000
};

4. 只读属性

使用 readonly 标记不可修改的属性：

ini 复制代码

interface Circle {
  readonly centerX: number;
  readonly centerY: number;
  radius: number;
}

const circle: Circle = { centerX: 0, centerY: 0, radius: 10 };
circle.radius = 15; // 允许
// circle.centerX = 5; // 错误：无法分配到 "centerX"，因为它是只读属性

5. 索引签名

处理动态键名的对象：

ini 复制代码

// 字符串索引签名
interface StringMap {
  [key: string]: number;
}

const scores: StringMap = {
  alice: 95,
  bob: 87
};

// 数字索引签名
interface ArrayLike {
  [index: number]: string;
}

const colors: ArrayLike = ["red", "green", "blue"];

混合索引签名：

typescript 复制代码

interface Dictionary {
  [key: string]: string | number;
  id: number; // 必须匹配索引类型
  name: string; // 必须匹配索引类型
}

6. 函数类型

定义对象中的方法：

typescript 复制代码

interface Calculator {
  add(x: number, y: number): number;
  substract: (x: number, y: number) => number;
}

const calc: Calculator = {
  add(x, y) {
    return x + y;
  },
  substract: (x, y) => x - y
};

三、复杂结构组合

1. 嵌套对象

css 复制代码

interface OrderItem {
  productId: string;
  quantity: number;
  price: number;
}

interface Order {
  id: string;
  date: Date;
  customer: {
    id: number;
    name: string;
    email: string;
  };
  items: OrderItem[];
  total: number;
}

2. 联合类型对象

typescript 复制代码

type PaymentMethod = 
  | { type: "credit"; cardNumber: string; expiry: string }
  | { type: "paypal"; email: string }
  | { type: "cash" };

function processPayment(payment: PaymentMethod) {
  switch (payment.type) {
    case "credit":
      console.log(`Processing credit card ${payment.cardNumber}`);
      break;
    case "paypal":
      console.log(`Processing PayPal for ${payment.email}`);
      break;
    case "cash":
      console.log("Processing cash payment");
      break;
  }
}

四、实用工具类型

TypeScript 提供了一系列实用工具类型简化类型定义：

1. Partial - 创建部分可选类型

php 复制代码

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

// 用于更新操作，所有属性变为可选
function updateUser(id: number, data: Partial<User>) {
  // 更新用户逻辑
}

updateUser(1, { name: "Alice Smith" }); // 合法

2. Required - 所有属性变为必填

php 复制代码

interface Config {
  apiUrl?: string;
  timeout?: number;
}

// 启动应用时需要完整配置
function startApp(config: Required<Config>) {
  // ...
}

startApp({ apiUrl: "https://api.example.com" , timeout: 5000 });

3. Readonly - 创建只读类型

ini 复制代码

interface Point {
  x: number;
  y: number;
}

const origin: Readonly<Point> = { x: 0, y: 0 };
// origin.x = 1; // 错误：只读

4. Record<K, T> - 创建键值映射

ini 复制代码

// 创建颜色名称到十六进制值的映射
type ColorMap = Record<string, string>;

const colors: ColorMap = {
  red: "#FF0000",
  green: "#00FF00",
  blue: "#0000FF"
};

// 创建特定键名的类型
type Weekday = "Mon" | "Tue" | "Wed" | "Thu" | "Fri";
type Schedule = Record<Weekday, string[]>;

const workSchedule: Schedule = {
  Mon: ["Meeting", "Coding"],
  Tue: ["Refactoring"],
  Wed: ["Code Review", "Planning"],
  Thu: ["Testing"],
  Fri: ["Deployment", "Retro"]
};

5. Pick<T, K> 和 Omit<T, K>

ini 复制代码

interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
  updatedAt: Date;
}

// 选择特定属性
type UserPreview = Pick<User, "id" | "name">;

// 排除特定属性
type UserWithoutTimestamps = Omit<User, "createdAt" | "updatedAt">;

6. 自定义实用类型

结合多个工具类型创建自定义类型：

swift 复制代码

// 创建部分更新类型，保留ID必填
type PartialUpdate<T> = Pick<T, "id"> & Partial<Omit<T, "id">>;

const updateData: PartialUpdate<User> = {
  id: 1,
  email: "new-email@example.com" // 只需更新email
};

五、最佳实践

1. 选择合适的类型定义方式

场景	推荐方式	原因
简单对象	类型别名(type)	简洁直接
可扩展对象（类实现）	接口(interface)	支持声明合并和扩展
固定长度数组	元组(Tuple)	精确描述元素位置和类型
动态键对象	索引签名	灵活处理动态键值对
复杂联合类型	类型别名(type)	清晰表达"或"的关系

2. 保持类型精确性

避免使用宽泛类型：

less 复制代码

// 避免
const users: object[] = [...]; 

// 推荐
const users: User[] = [...];

3. 使用类型断言要谨慎

typescript 复制代码

// 避免盲目的as any
const data = JSON.parse(jsonString) as any;

// 使用更安全的类型断言
interface UserData {
  // ...
}
const userData = JSON.parse(jsonString) as UserData;

4. 利用类型推断

尽可能让TypeScript自动推断类型：

ini 复制代码

// 自动推断为string[]
const names = ["Alice", "Bob"];

// 自动推断为(boolean | number)[]
const flags = [true, false, 1, 0];

5. 为函数提供显式返回类型

php 复制代码

// 显式声明返回类型
function createUser(name: string, email: string): User {
  return {
    id: generateId(),
    name,
    email,
    createdAt: new Date()
  };
}

六、常见问题解决

1. 索引签名错误

typescript 复制代码

interface MyObj {
  [key: string]: number;
  id: string; // 错误：类型 'string' 的属性不能赋给'string'索引类型'number'
}

// 解决方案：使用联合类型
interface CorrectObj {
  [key: string]: number | string;
  id: string; // 正确
}

2. 对象字面量额外属性

ini 复制代码

interface Point {
  x: number;
  y: number;
}

const p: Point = { x: 1, y: 2, z: 3 }; // 错误：对象字面量只能指定已知属性

// 解决方案：
// 1. 使用类型断言
const p1: Point = { x: 1, y: 2, z: 3 } as Point;

// 2. 添加索引签名
interface FlexiblePoint {
  x: number;
  y: number;
  [key: string]: any;
}

// 3. 使用临时变量
const temp = { x: 1, y: 2, z: 3 };
const p2: Point = temp;

3. 修改只读数组

ini 复制代码

const readOnlyArray: readonly number[] = [1, 2, 3];
// readOnlyArray.push(4); // 错误：push方法不存在

// 解决方案：创建新数组
const newArray = [...readOnlyArray, 4];

七、TypeScript对象和数组类型核心

数组：使用 T[] 或 Array<T>，元组用于固定长度数组
对象：优先使用 interface（可扩展）或 type（复杂联合）
精确性 ：越具体越安全，避免不必要的 any
只读保护 ：使用 readonly 防止意外修改
实用工具 ：充分利用 Partial、Record 等内置工具类型
动态结构：索引签名处理未知键名的对象

通过合理使用 TypeScript 的类型系统，开发者可以构建自描述性强的数据结构，减少运行时错误，提高代码可维护性和团队协作效率。良好的类型定义如同文档，让数据结构的意图一目了然。