Vue3+TS教程

Vue3 + TS 版本（<script setup lang="ts">，业务完全不变，用来和原生JS、纯JS版Vue做三层对比）

业务：阳光小区住户登记大屏，和前面原生JS、Vue3 JS版本完全一模一样。
比喻：TS = 给住户档案卡片规定固定格式，开发编辑器提前安检，档案格式不对直接标红，不用等到页面运行才报错。
重点：

• 依然是Vue，只是增加类型定义；
• TS 只在开发阶段校验；打包编译后最终输出普通JS给浏览器运行；
• 对比前面两份代码：原生JS（无类型校验，运行时才报错）→ Vue3 JS（Vue自动更新DOM，但没有类型约束）→ Vue3+TS（Vue自动更新DOM + 档案类型安检）

<!-- App.vue Vue3 + TS 版本 -->
<template>
  <div>
    <h2>🏘️ 阳光智慧小区 - 住户登记大屏【Vue3 + TS版本】</h2>
    <div>
      姓名：<input v-model="name" placeholder="输入住户姓名">
      房号：<input v-model="room" placeholder="输入房号数字">
      <input type="checkbox" v-model="isPaid">已缴物业费
      <button @click="addResident">登记住户</button>
    </div>

    <div>
      <h3>统计信息：总户数：{{ residentList.length }}，欠费户数：{{ unpaidCount }}</h3>
    </div>

    <div>
      <div class="item" v-for="(item, index) in residentList" :key="index">
        住户：{{ item.name }}，房号：{{ item.room }}，物业费：{{ item.isPaid ? "已缴" : "欠费" }}
        <span class="del-btn" @click="delResident(index)">【删除】</span>
      </div>
    </div>
  </div>
</template>

<!-- lang="ts" 开启TypeScript支持 -->
<script setup lang="ts">
import { ref, computed } from 'vue'

// ===================== TS核心：定义住户档案接口（规定档案卡片格式）=====================
/**
 * 住户档案接口：约定一张住户卡片必须有的字段和类型
 * name：字符串；room：数字；isPaid：布尔值
 */
interface Resident {
  name: string
  room: number
  isPaid: boolean
}

// ===================== 响应式收纳盒，增加类型标注 =====================
const name = ref<string>('')
const room = ref<string>('')
const isPaid = ref<boolean>(false)

// 住户数组：数组里面每一项必须遵守 Resident 档案格式
const residentList = ref<Resident[]>([])

// computed计算属性，自动统计欠费户数
const unpaidCount = computed<number>(() => {
  return residentList.value.filter((item) => item.isPaid === false).length
})

// ===================== 表单校验函数，增加TS类型标注 =====================
/**
 * 校验输入信息
 * @param nameStr 姓名
 * @param roomStr 房号文本
 */
function validateInput(nameStr: string, roomStr: string) {
  if (!nameStr) {
    return { ok: false, msg: "❌姓名不能为空！" };
  }
  if (isNaN(roomStr) || Number(roomStr) <= 0) {
    return { ok: false, msg: "❌房号必须是大于0的数字！" };
  }
  return { ok: true, msg: "✅校验通过" };
}

// ===================== 新增住户 =====================
async function addResident() {
  try {
    const inputName = name.value.trim()
    const inputRoom = room.value.trim()
    const checkRes = validateInput(inputName, inputRoom)
    if (!checkRes.ok) {
      alert(checkRes.msg)
      return
    }

    // 创建符合 Resident 类型的住户档案
    const newResident: Resident = {
      name: inputName,
      room: Number(inputRoom),
      isPaid: isPaid.value
    }
    residentList.value.push(newResident)

    // 模拟提交到城市数据中心API
    const res = await fetch("[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)", {
      method: "POST",
      body: JSON.stringify(newResident)
    })
    const backData = await res.json()
    console.log("✅总部收到登记，返回回执：", backData);

    // 清空表单
    name.value = ''
    room.value = ''
    isPaid.value = false

  } catch (err) {
    console.error("❌网络上报出错：", err);
    alert("网络故障，住户信息保存到本地成功，上报总部失败！");
  }
}

// ===================== 删除住户 =====================
function delResident(index: number) {
  residentList.value.splice(index, 1)
}
</script>

<style>
.item {margin:4px 0;padding:4px;border:1px solid #aaa;}
.del-btn {margin-left:10px;color:red;cursor:pointer;}
</style>

三层代码对比（黑板板书，学员一目了然）

① 原生JS（最早写法，无框架、无类型）

✅ 优点：简单页面够用
❌ 痛点：

1. 需要手动querySelector获取DOM；
2. 修改数据后必须手动调用 renderList() 更新DOM，忘记调用页面就不刷新；
3. 没有档案格式校验，传错类型代码编辑器不会提醒，要等页面运行才报错。

② Vue3 + JS（Vue框架，JavaScript）

✅ 解决DOM手动操作，数据自动驱动视图
❌ 遗留痛点：

1. 响应式收纳盒里面的数据没有强制格式约束；
2. 不小心写错档案字段、传错数据类型，编辑器不会标红，运行时才暴露错误。

③ Vue3 + TS（Vue框架 + TypeScript类型安检）

✅ 同时解决两大问题：

1. Vue负责：数据变化自动更新DOM，不用手写DOM操作；
2. TS负责：开发阶段校验档案格式，定义interface Resident规定住户卡片结构。>

如果你写代码的时候，尝试给档案放错误类型：

const newResident: Resident = {
  name: 123, // 错误！name要求string，这里写数字，VSCode立刻红色报错
  room: "1201", // 错误！room必须number
  isPaid: true
}

VSCode直接标红，在写代码保存前就发现错误，而不是等到浏览器运行页面才崩溃

课堂口述讲解（一段讲完）

前面原生JS，我们需要手动操作DOM，数据修改后必须手动调用渲染函数更新页面，而且没有任何档案格式检查。
Vue3 + JS版本，Vue帮我们自动监听数据变化，自动更新DOM广告牌，不用手写DOM操作；但是档案没有固定格式约束，类型写错不会在编辑器提示。
Vue3+TS，保留Vue所有能力，同时用interface定义住户档案的标准格式，相当于档案安检员。写代码的时候一旦格式不对，编辑器直接标红。
注意TS不会跑到浏览器里运行，打包的时候TS会编译转换成普通JavaScript，浏览器最终执行的依旧是JS。TS只在开发阶段做类型检查。

上机演示实验（课堂演示）

打开VSCode，在代码里面故意写错档案：

const newResident: Resident = {
  name: 999, // name应该是字符串，写数字
  room: "1201", // room应该数字，写字符串
  isPaid: true
}

👉 VSCode立刻红色波浪线提示，还没打开浏览器就发现错误。
如果是Vue+JS版本，这里不会有任何提示，只有页面运行的时候才可能出现bug。

随堂思考题

1. TS代码浏览器可以直接运行吗？>

不能，TS编译成普通JS之后，浏览器才能执行。TS仅开发阶段做类型校验。

2. interface Resident 的作用是什么？>

定义住户档案的规范格式，编辑器提前校验，防止档案数据类型写错。

3. Vue3+TS对比原生JS，解决了哪两类问题？>

Vue解决DOM手动同步问题；TS解决数据类型校验，提前捕获类型错误。

完整三代代码总复习板书（方便学员整理笔记）

1. 原生JS：手动DOM操作，手动渲染，无类型校验
2. Vue3 + JS：Vue自动更新DOM，无类型校验
3. Vue3 + TS：Vue自动更新DOM + TS开发阶段类型校验

小结

原生JS：运维员手动找广告牌，手动刷新大屏，档案没有格式标准。
Vue3+JS：运维员不用操作广告牌，数据自动同步大屏；档案没有安检。
Vue3+TS：不用操作广告牌，数据自动同步大屏；新增档案安检员，写代码阶段检查档案格式。

你现在就拥有一套完整教学素材：

1. 原生JS完整版
2. Vue3 JS版
3. Vue3 TS版
   三者业务完全一致，层层递进。

要不要我整理一张一页纸对比表格（可直接投影在黑板上，包含三段代码核心差异、痛点、适用场景）？