# web-front-adv

**Repository Path**: leeworks/web-front-adv

## Basic Information

- **Project Name**: web-front-adv
- **Description**: Web前端高级编程（TypeScript）课程资料库（案例、教学内容、实验指导书等）
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 15
- **Created**: 2026-08-28
- **Last Updated**: 2026-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web 前端高级编程 — TypeScript 课程教学材料

本仓库包含《Web 前端高级编程》课程 TypeScript 部分的完整教学材料，包括案例代码、实验指导书、实验参考代码和教学内容文档。

## 目录结构

```
web-front-adv/
├── cases/               # 15 个 TypeScript 案例项目（ch01 ~ ch15）
├── experiments/
│   ├── guides/          # 8 个实验指导书（exp01 ~ exp08）
│   └── reference/       # 8 个实验参考代码（exp01 ~ exp08）
└── textbook/            # 15 章教学内容（ch01 ~ ch15）
```

## 案例项目（cases/）

15 个循序渐进的 Vite + TypeScript 案例，覆盖从基础类型到综合应用的完整知识体系：

| 编号 | 目录 | 主题 |
|:----:|------|------|
| 01 | ch01-hello-ts | 基本类型注解、类型推断、接口与对象操作 |
| 02 | ch02-class-inheritance | 类的定义与继承（extends、super、override） |
| 03 | ch03-abstract-class | 抽象类、访问修饰符、静态成员、多态 |
| 04 | ch04-arrow-destructure | 箭头函数、rest 参数、解构、扩展运算符 |
| 05 | ch05-iterator-template | 迭代协议、模板字符串、标记模板 |
| 06 | ch06-promise-async | Promise、async/await、Generator |
| 07 | ch07-compile-context | tsconfig.json、编译上下文、声明空间 |
| 08 | ch08-module-namespace | ES 模块、命名空间 |
| 09 | ch09-basic-types | 原始类型、数组与元组、枚举、特殊类型 |
| 10 | ch10-interface | 接口、implements、结构化类型、interface vs type |
| 11 | ch11-js-to-ts | JS 迁移到 TS、@types、lib.d.ts |
| 12 | ch12-type-operations | 交叉/联合/类型保护/断言/字面量类型 |
| 13 | ch13-function-overload | 函数重载、可选/默认参数、函数类型声明 |
| 14 | ch14-generics | 泛型函数/接口/类、类型推断、泛型约束 |
| 15 | ch15-weather-app | 天气查询应用（接口设计 + 异步 + DOM + API） |

### 运行案例

```bash
cd cases/ch01-hello-ts
npm install
npm run dev
```

各案例使用递增端口（5170 ~ 5184），详见 [cases/README.md](./cases/README.md)。

## 实验指导书（experiments/guides/）

8 个配套实验，引导学生动手实践：

| 编号 | 文件 | 主题 |
|:----:|------|------|
| 01 | exp01-类型与面向对象编程应用 | 类型系统与 OOP 综合应用 |
| 02 | exp02-异步任务与TS应用 | Promise/async/await 实践 |
| 03 | exp03-基于TS的Web前端工程化项目搭建 | Vite + TS 工程搭建 |
| 04 | exp04-运用接口设计复杂业务的层次结构 | 接口设计与分层架构 |
| 05 | exp05-将JS项目迁移到TS | JS → TS 渐进迁移 |
| 06 | exp06-TS与第三方库结合应用 | @types 与第三方库集成 |
| 07 | exp07-Todo-list | Todo List 综合应用 |
| 08 | exp08-贪吃蛇 | 贪吃蛇游戏综合项目 |

## 实验参考代码（experiments/reference/）

与 8 个实验一一对应的完整可运行参考实现，供教师备课与批改参考：

| 编号 | 目录 | 主题 |
|:----:|------|------|
| 01 | exp01-shopping-cart | 购物车系统（类与修饰符、封装、自动化测试） |
| 02 | exp02-lazy-image-gallery | 延迟加载瀑布流图片库（异步任务） |
| 03 | exp03-project-setup | 计算器应用（Vite + TS 工程搭建、分层架构） |
| 04 | exp04-ecommerce-interface | 电商系统（接口设计、依赖倒置、事务回滚） |
| 05 | exp05-js-to-ts | 水果列表应用（JS 迁移到 TS） |
| 06 | exp06-third-party-libs | 留言表单（jQuery + Axios 第三方库集成） |
| 07 | exp07-todo-list | Todo-list 应用（观察者模式、localStorage） |
| 08 | exp08-snake-game | 贪吃蛇游戏（Canvas + 面向对象） |

各参考项目均为独立的 Vite + TypeScript 工程，进入对应目录执行 `npm install && npm run dev` 即可运行。

## 教学内容（textbook/）

15 章课程教学内容，与案例和实验一一对应：

| 编号 | 文件 | 主题 |
|:----:|------|------|
| 01 | ch01-课程介绍与TypeScript概述 | TS 简介与环境搭建 |
| 02 | ch02-面向对象-类与继承 | 类定义、继承、super |
| 03 | ch03-面向对象-静态成员与抽象类 | 修饰符、abstract、static |
| 04 | ch04-箭头函数与解构 | ES6+ 语法特性 |
| 05 | ch05-迭代与模板字符串 | Iterable/Iterator、模板字符串 |
| 06 | ch06-Promise与async-await | 异步编程 |
| 07 | ch07-TS项目构成-编译上下文 | tsconfig.json 配置 |
| 08 | ch08-TS项目构成-模块与命名空间 | 模块化组织 |
| 09 | ch09-类型系统-基本类型 | 类型系统基础 |
| 10 | ch10-类型系统-接口及其应用 | 接口与结构化类型 |
| 11 | ch11-类型系统-JS迁移到TS | 渐进迁移策略 |
| 12 | ch12-类型系统-类型操作 | 高级类型操作 |
| 13 | ch13-类型系统-函数 | 函数类型与重载 |
| 14 | ch14-类型系统-泛型 | 泛型编程 |
| 15 | ch15-课程拓展-天气应用 | 综合项目 |

## 技术栈

- TypeScript ^5.9.2（全局安装，非项目依赖）
- Vite ^5.4.0
- jQuery ^3.7.1（ch11 案例使用）

## 学习路径

1. 阅读 `textbook/` 中对应章节的教学内容
2. 运行 `cases/` 中对应的案例项目，观察运行结果
3. 完成 `experiments/guides/` 中对应的实验指导书

## 说明

- `node_modules/` 和 `dist/` 目录已通过 `.gitignore` 忽略，克隆后需运行 `npm install` 安装依赖
- `package-lock.json` 已忽略，学生可使用最新版本依赖进行练习