# vue-new

**Repository Path**: null_717_7167/vue-new

## Basic Information

- **Project Name**: vue-new
- **Description**: 各种操作实例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-03
- **Last Updated**: 2025-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Typescript 学习笔记

以下内容包含：overvide，extends，super，interface，type，function，class，enum，namespace，module，

```vue
<template>
  <view class="typescript-example">
    <view class="header">
      <text class="title">TypeScript 在 Vue 3 中的运用示例</text>
      <text class="subtitle">展示接口、类型、泛型、类型推断等核心特性</text>
    </view>

    <!-- 用户信息展示 -->
    <view class="section">
      <text class="section-title">1. 接口定义与使用</text>
      <view class="user-card">
        <text class="label">用户名:</text>
        <text class="value">{{ userInfo.name }}</text>
      </view>
      <view class="user-card">
        <text class="label">年龄:</text>
        <text class="value">{{ userInfo.age }}</text>
      </view>
      <view class="user-card">
        <text class="label">邮箱:</text>
        <text class="value">{{ userInfo.email }}</text>
      </view>
      <view class="user-card">
        <text class="label">状态:</text>
        <text class="value">{{ userInfo.isActive ? "活跃" : "未激活" }}</text>
      </view>
    </view>

    <!-- 类型推断示例 -->
    <view class="section">
      <text class="section-title">2. 类型推断与类型注解</text>
      <view class="info-item">
        <text>数字类型 (自动推断): {{ numberValue }}</text>
      </view>
      <view class="info-item">
        <text>字符串类型 (显式注解): {{ stringValue }}</text>
      </view>
      <view class="info-item">
        <text>布尔类型: {{ booleanValue ? "是" : "否" }}</text>
      </view>
      <view class="info-item">
        <text>数组类型: {{ arrayValue.join(", ") }}</text>
      </view>
    </view>

    <!-- 泛型示例 -->
    <view class="section">
      <text class="section-title">3. 泛型使用</text>
      <view class="info-item">
        <text>API 响应类型: {{ apiResponse.status }}</text>
      </view>
      <view class="info-item">
        <text>API 数据: {{ JSON.stringify(apiResponse.data) }}</text>
      </view>
      <button @click="fetchData" class="action-btn">模拟 API 请求</button>
    </view>

    <!-- 联合类型与类型守卫 -->
    <view class="section">
      <text class="section-title">4. 联合类型与类型守卫</text>
      <view class="info-item">
        <text>当前状态类型: {{ statusType }}</text>
      </view>
      <view class="info-item">
        <text>状态值: {{ getStatusValue() }}</text>
      </view>
      <view class="button-group">
        <button @click="setStatus('loading')" class="action-btn">
          设置为加载中
        </button>
        <button @click="setStatus('success')" class="action-btn">
          设置为成功
        </button>
        <button @click="setStatus('error')" class="action-btn">
          设置为错误
        </button>
      </view>
    </view>

    <!-- 函数类型 -->
    <view class="section">
      <text class="section-title">5. 函数类型注解</text>
      <view class="info-item">
        <text>计算结果: {{ calculateResult }}</text>
      </view>
      <view class="button-group">
        <button @click="handleCalculate(10, 5, 'add')" class="action-btn">
          10 + 5
        </button>
        <button @click="handleCalculate(10, 5, 'multiply')" class="action-btn">
          10 × 5
        </button>
      </view>
    </view>

    <!-- 异步函数类型 -->
    <view class="section">
      <text class="section-title">6. 异步函数类型</text>
      <view class="info-item">
        <text>异步数据: {{ asyncData || "加载中..." }}</text>
      </view>
      <view class="info-item">
        <text>加载状态: {{ isLoading ? "加载中" : "已完成" }}</text>
      </view>
      <button @click="loadAsyncData" class="action-btn" :disabled="isLoading">
        {{ isLoading ? "加载中..." : "加载异步数据" }}
      </button>
    </view>

    <!-- 类型工具示例 -->
    <view class="section">
      <text class="section-title">7. TypeScript 工具类型</text>
      <view class="info-item">
        <text>Partial 类型: {{ JSON.stringify(partialUser) }}</text>
      </view>
      <view class="info-item">
        <text>Pick 类型: {{ JSON.stringify(pickedUser) }}</text>
      </view>
      <view class="info-item">
        <text>Readonly 类型: {{ readonlyValue }}</text>
      </view>
    </view>

    <!-- override 关键字示例 -->
    <view class="section">
      <text class="section-title">8. override 关键字使用</text>
      <view class="info-item">
        <text>基类方法调用: {{ baseClassResult }}</text>
      </view>
      <view class="info-item">
        <text>派生类方法调用 (override): {{ derivedClassResult }}</text>
      </view>
      <view class="info-item">
        <text>派生类新增方法: {{ derivedClassNewMethod }}</text>
      </view>
      <view class="info-item">
        <text>多级继承示例: {{ multiLevelResult }}</text>
      </view>
      <view class="button-group">
        <button @click="testBaseClass" class="action-btn">测试基类</button>
        <button @click="testDerivedClass" class="action-btn">测试派生类</button>
        <button @click="testMultiLevel" class="action-btn">测试多级继承</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

// ==================== 1. 接口定义 ====================

/**
 * 用户信息接口
 * 定义用户对象的结构
 */
interface UserInfo {
  name: string;
  age: number;
  email: string;
  isActive: boolean;
  address?: string; // 可选属性
}

/**
 * API 响应接口（使用泛型）
 * T 表示响应数据的类型
 */
interface ApiResponse<T> {
  status: number;
  message: string;
  data: T;
  timestamp: number;
}

/**
 * 操作类型联合类型
 */
type OperationType = "add" | "subtract" | "multiply" | "divide";

/**
 * 状态类型联合类型
 */
type StatusType = "loading" | "success" | "error";

/**
 * 状态对象类型
 */
type StatusValue = {
  loading: string;
  success: string;
  error: string;
};

// ==================== 2. 响应式数据（带类型注解）====================

// 使用接口定义响应式数据
const userInfo = ref<UserInfo>({
  name: "张三",
  age: 25,
  email: "zhangsan@example.com",
  isActive: true,
});

// 类型推断：TypeScript 自动推断为 number
const numberValue = ref(42);

// 显式类型注解：明确指定为 string
const stringValue = ref<string>("Hello TypeScript");

// 布尔类型
const booleanValue = ref<boolean>(true);

// 数组类型
const arrayValue = ref<number[]>([1, 2, 3, 4, 5]);

// 泛型使用：API 响应
const apiResponse = ref<ApiResponse<UserInfo>>({
  status: 200,
  message: "成功",
  data: userInfo.value,
  timestamp: Date.now(),
});

// 联合类型
const statusType = ref<StatusType>("loading");

// 异步数据
const asyncData = ref<string | null>(null);
const isLoading = ref<boolean>(false);

// 计算属性（带类型推断）
const calculateResult = ref<number>(0);

// override 示例相关数据
const baseClassResult = ref<string>("");
const derivedClassResult = ref<string>("");
const derivedClassNewMethod = ref<string>("");
const multiLevelResult = ref<string>("");

// ==================== 3. 类型工具示例 ====================

// Partial<T> - 所有属性变为可选
type PartialUser = Partial<UserInfo>;
const partialUser = ref<PartialUser>({
  name: "李四",
  // age 和 email 是可选的
});

// Pick<T, K> - 选择指定属性
type PickedUser = Pick<UserInfo, "name" | "email">;
const pickedUser = ref<PickedUser>({
  name: "王五",
  email: "wangwu@example.com",
});

// Readonly<T> - 所有属性变为只读
type ReadonlyUser = Readonly<UserInfo>;
const readonlyValue = ref<string>("只读值（不可修改）");

// ==================== 4. 函数类型注解 ====================

/**
 * 计算函数
 * @param a 第一个数字
 * @param b 第二个数字
 * @param operation 操作类型
 * @returns 计算结果
 */
const calculate = (a: number, b: number, operation: OperationType): number => {
  switch (operation) {
    case "add":
      return a + b;
    case "subtract":
      return a - b;
    case "multiply":
      return a * b;
    case "divide":
      return b !== 0 ? a / b : 0;
    default:
      // 使用 never 类型确保所有情况都被处理
      const _exhaustive: never = operation;
      return _exhaustive;
  }
};

/**
 * 设置状态
 */
const setStatus = (status: StatusType): void => {
  statusType.value = status;
};

/**
 * 类型守卫函数
 * 用于在运行时判断类型
 */
const getStatusValue = (): string => {
  const status: StatusType = statusType.value;

  // TypeScript 的类型守卫会自动缩小类型范围
  if (status === "loading") {
    return "加载中...";
  } else if (status === "success") {
    return "操作成功";
  } else {
    // 这里 TypeScript 知道 status 只能是 "error"
    return "操作失败";
  }
};

/**
 * 模拟 API 请求（异步函数类型）
 * @returns Promise<ApiResponse<UserInfo>>
 */
const fetchData = async (): Promise<void> => {
  try {
    // 模拟 API 调用
    await new Promise((resolve) => setTimeout(resolve, 1000));

    // 更新响应数据
    apiResponse.value = {
      status: 200,
      message: "数据获取成功",
      data: {
        name: "新用户",
        age: 30,
        email: "newuser@example.com",
        isActive: true,
      },
      timestamp: Date.now(),
    };
  } catch (error) {
    // error 的类型是 unknown，需要类型断言
    const err = error as Error;
    console.error("API 请求失败:", err.message);
  }
};

/**
 * 加载异步数据
 */
const loadAsyncData = async (): Promise<void> => {
  isLoading.value = true;
  asyncData.value = null;

  try {
    // 模拟异步操作
    await new Promise((resolve) => setTimeout(resolve, 1500));

    // 类型断言：确保返回的数据类型正确
    asyncData.value = "异步数据加载完成！";
  } catch (error) {
    asyncData.value = "加载失败";
  } finally {
    isLoading.value = false;
  }
};

// ==================== 5. 事件处理函数 ====================

/**
 * 计算按钮点击事件处理
 * @param a 第一个数字
 * @param b 第二个数字
 * @param op 操作类型
 */
const handleCalculate = (a: number, b: number, op: OperationType): void => {
  calculateResult.value = calculate(a, b, op);
};

// ==================== 6. override 关键字示例 ====================

/**
 * override 关键字说明：
 *
 * 1. override 是 TypeScript 4.3+ 引入的关键字
 * 2. 用于明确表示一个方法覆盖了父类的方法
 * 3. 如果父类中没有对应的方法，TypeScript 会报错，防止意外的覆盖
 * 4. 提高了代码的可读性和类型安全性
 * 5. 在 tsconfig.json 中可以设置 "noImplicitOverride": true 强制使用
 */

/**
 * 基类 - 定义基础功能
 */
class Animal {
  protected name: string;

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

  // 基类方法 - 可以被派生类覆盖
  makeSound(): string {
    return `${this.name} 发出声音`;
  }

  // 基类方法 - 可以被派生类覆盖
  move(): string {
    return `${this.name} 在移动`;
  }

  // 获取名称
  getName(): string {
    return this.name;
  }
}

/**
 * 派生类 - 使用 override 关键字覆盖基类方法
 */
class Dog extends Animal {
  private breed: string;

  constructor(name: string, breed: string) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }

  // 使用 override 关键字明确表示覆盖父类方法
  // TypeScript 4.3+ 要求使用 override 关键字
  // 如果父类中没有 makeSound 方法，这里会报错
  override makeSound(): string {
    return `${this.name} (${this.breed}) 汪汪叫！`;
  }

  // 覆盖 move 方法
  // override 确保父类确实存在 move 方法
  override move(): string {
    return `${this.name} 用四条腿跑`;
  }

  // 派生类新增的方法（不是覆盖）
  fetch(): string {
    return `${this.name} 去捡球`;
  }

  getBreed(): string {
    return this.breed;
  }
}

/**
 * 另一个派生类 - 展示不同的覆盖实现
 */
class Cat extends Animal {
  private color: string;

  constructor(name: string, color: string) {
    super(name);
    this.color = color;
  }

  // 覆盖 makeSound 方法
  override makeSound(): string {
    return `${this.name} (${this.color}) 喵喵叫！`;
  }

  // 覆盖 move 方法
  override move(): string {
    return `${this.name} 优雅地走路`;
  }

  // 新增方法
  climb(): string {
    return `${this.name} 爬树`;
  }
}

/**
 * 多级继承示例 - 展示 override 在多级继承中的使用
 */
class Bird extends Animal {
  protected canFly: boolean;

  constructor(name: string, canFly: boolean) {
    super(name);
    this.canFly = canFly;
  }

  override makeSound(): string {
    return `${this.name} 啾啾叫！`;
  }

  override move(): string {
    return this.canFly ? `${this.name} 在天空中飞翔` : `${this.name} 在地上走`;
  }
}

/**
 * 多级继承 - 派生自 Bird
 */
class Eagle extends Bird {
  private wingspan: number;

  constructor(name: string, wingspan: number) {
    super(name, true); // 老鹰总是能飞
    this.wingspan = wingspan;
  }

  // 覆盖祖父类的方法
  override makeSound(): string {
    return `${this.name} 发出尖锐的叫声！`;
  }

  // 覆盖父类的方法
  override move(): string {
    return `${this.name} 在高空中翱翔 (翼展: ${this.wingspan}cm)`;
  }

  // 新增方法
  hunt(): string {
    return `${this.name} 正在捕猎`;
  }
}

// 创建类实例
const baseAnimal = new Animal("通用动物");
const dog = new Dog("旺财", "金毛");
const cat = new Cat("小花", "橘色");
const eagle = new Eagle("雄鹰", 200);

/**
 * 测试基类方法
 */
const testBaseClass = (): void => {
  baseClassResult.value = baseAnimal.makeSound();
};

/**
 * 测试派生类方法（使用 override）
 */
const testDerivedClass = (): void => {
  derivedClassResult.value = dog.makeSound(); // 调用覆盖后的方法
  derivedClassNewMethod.value = dog.fetch(); // 调用派生类新增的方法
};

/**
 * 测试多级继承
 */
const testMultiLevel = (): void => {
  multiLevelResult.value = `${eagle.makeSound()} | ${eagle.move()} | ${eagle.hunt()}`;
};
</script>

<style scoped>
.typescript-example {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 14px;
  color: #666;
  display: block;
}

.section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #667eea;
  display: block;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #667eea;
}

.user-card {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.user-card .label {
  font-weight: bold;
  color: #666;
}

.user-card .value {
  color: #333;
}

.info-item {
  padding: 12px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  word-break: break-all;
}

.action-btn {
  padding: 12px 20px;
  background-color: #667eea;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  border: none;
  margin-right: 10px;
  margin-top: 10px;
  transition: all 0.3s;
}

.action-btn:disabled {
  background-color: #ccc;
  opacity: 0.6;
}

.action-btn:active {
  transform: scale(0.98);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
</style>
```