TypeScript基础知识点

TypeScript基础知识点

TypeScript作为JavaScript的超集，提供了类型系统、接口、泛型等特性，以下结合项目示例说明核心知识点：

---

类型注解与基础类型

// 明确变量类型
let username: string = "Alice";
let age: number = 25;
let isActive: boolean = true;

// 数组与元组
let hobbies: string[] = ["coding", "hiking"];
let userInfo: [string, number] = ["Bob", 30]; // 元组长度固定

项目示例：用户表单数据校验时，通过类型注解确保输入字段符合预期类型。

---

接口与对象类型

interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}

function createUser(user: User): void {
  console.log(`User ${user.name} created`);
}

// 使用
createUser({ id: 1, name: "Charlie" });

项目场景：定义API响应数据的结构，确保前后端数据格式一致。

---

泛型

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

// 使用泛型约束API响应
interface ApiResponse<T> {
  data: T;
  status: number;
}

const fetchData = async <T>(url: string): Promise<ApiResponse<T>> => {
  const response = await fetch(url);
  return { data: await response.json(), status: response.status };
};

项目应用：封装通用API请求函数，适应不同端点返回的数据类型。

---

类与修饰符

class Product {
  private id: number; // 私有属性
  public name: string;

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

  public getDescription(): string {
    return `Product ${this.id}: ${this.name}`;
  }
}

项目案例：电商系统中商品类的实现，封装内部逻辑并暴露必要方法。

---

类型推断与联合类型

// 自动推断
let score = 100; // TypeScript推断为number

// 联合类型
function displayId(id: number | string): void {
  console.log(`ID: ${id}`);
}

项目用途：处理可能为多种类型的变量（如ID可能是数字或字符串）。

---

类型守卫与类型别名

type OrderStatus = "pending" | "shipped" | "delivered";

function checkStatus(status: OrderStatus): string {
  switch (status) {
    case "pending": return "Order is processing";
    case "shipped": return "Order is on the way";
    default: return "Order completed";
  }
}

项目实践：订单状态管理，避免无效状态值。

---

模块化

// utils.ts
export const formatDate = (date: Date): string => {
  return date.toISOString();
};

// app.ts
import { formatDate } from './utils';
console.log(formatDate(new Date()));

项目结构：拆分工具函数到独立模块，提高代码可维护性。

---

配置tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  }
}

项目必备：通过配置文件启用严格类型检查，指定输出目录等。

---

实际项目整合建议

1. 类型定义集中管理 创建types目录存放全局接口和类型，如types/user.ts。

2. 严格模式启用 在tsconfig.json中设置"strict": true，强制类型安全。

3. 泛型复用组件 使用泛型封装表格组件，支持不同数据源：

   interface TableProps<T> {
     data: T[];
     renderRow: (item: T) => React.ReactNode;
   }
   

4. 类型声明文件 为第三方库补充类型定义，如declare module 'untyped-module'。