前言
在前面五篇文章里我们已经掌握了 TypeScript 的主要语法——类型注解、接口、泛型、类型断言…，但当把这些语法搬进 Vue 组件时往往会碰到以下痛点：
-
没有类型提示：编辑器只能给出
any导致写代码时频繁猜测属性名。
-
运行时错误难以定位：因为缺少编译期校验，错误只能在页面报错后才发现。
-
复杂数据结构难以维护：对象、数组等深层结构没有约束，重构时容易遗漏字段。不过，
-
模板引用和 DOM 事件经常报
null/undefined 错误：不知道该怎么安全访问。
本篇将针对这些痛点，程序演示在 Vue 3 中如何正确使用 TypeScript 主要语法。
一、Vue + TS 项目环境搭建
使用 Vue 官方脚手架创建项目时直接选择 TypeScript 即可：
npm create vue@latest
# 根据交互提示选择 “TypeScript”
创建完成后会自动生成 tsconfig.json 配置文件，无需手动配置。
二、为什么需要标注类型
User Pain Point: 在没有类型约束的情况下随意赋值根本不会报错，却会在运行时导致不可预知的 bug。
主要好处有两个：
-
赋值时 TS 会校验数据类型是否匹配。
-
编辑器会提供准确的代码提示，提高开发效率。
对比示例：
import { reactive } from 'vue';// ❌ 没有标注类型
const form = reactive({
username: '',password: ''
});form.username = 123;// ✅ 不报错，但 username 应该是 string
// ✅ 标注了类型
interface Form {
username: string;password: string;}
const formTyped = reactive
A 有了明确的类型约束后错误能够在编码阶段被捕获，同时编辑器在输入 formTyped.` 时会弹出属性列表。
三、为 ref 标注类型
类型推导
If initial value is explicit enough,TypeScript can infer type automatically:
import { ref } from 'vue';const count = ref;// 推导为 Ref
const name = ref;// 推导为 Ref
const isLoading = ref;// 推导为 Ref
// 没有初始值 → 推导为联合类型
const age = ref;// Ref
age.value = undefined;// 合法
age.value = '30';// ❌ 报错
泛型指定类型
The generic syntax lets you enforce complex structures such as unions,objects or arrays:
import { ref } from 'vue';其实，// 联合类型
const year = ref;year.value = 2024;// ✅
year.value = '';// ❌ 报错
// 对象结构
interface User {
说到id，number;name: string;老实说，age: number;}
const user = ref;user.value = { id: 1。name: '张三',age: 28 };// ✅
user.value.id = 'a';// ❌ 报错
The generic approach not only constrains initial value but also provides full IntelliSense when accessing .value.
四、为 标注类型
类型推导
import { reactive } from 'vue';
const state = reactive({
从count来看。0,name: 'Jack'
});// state 的推导结果：{ count: number;name: string }
state.count++;话说回来，// ✅ 正常
state.age = 30;
// ❌ 报错：属性 “age” 不存在于 type…
泛型指定类型
import { reactive } from 'vue';interface State {
count这方面，number;name: string;isLoading: boolean;}
const stateTyped = reactive({
count这方面。0,name: 'Jack',isLoading: false
});stateTyped.isLoading = true;// ✅
stateTyped.count = '10';// ❌ 报错：Type 'string' is not assignable to type 'number'
The explicit generic guarantees both shape of initial object and subsequent property assignments.
五、为 标注类型
The type of a computed property is inferred from its return value,so most of time you don't need an explicit annotation:
const count=ref;const doubleCount= computed =>{ returncount .value*2;})，说起来，// 推 导 为 ComputedRef
If you want to be extra safe—especially when calculation logic is complex—declare it explicitly:
interface Product{id:string;name:string，price:number;} const products=ref ;// 显式指定返回值 类型 const totalPrice=computed =>{returnproducts .value .reduce => sum+ item .price,0 );})，// 自动推 导 const expensiveProducts=computed =>{returnproducts .value .filter;})，
六、 为事件处理函数标 注 类型
原生 DOM事件处理函数的参数默认被推断为 any 没有任何提示。
再看方法。手动标注事件对象，并在需要时使用断言获取更精确的 DOM 类型。
const inputChange ==>{ /* 获得 Event 的属性提示 */ };
② 使用断言获取更 精确 的 DOM 类型 ：
const inputChange ==>{ const target=e .target as HTMLInputElement;console.log，};
七、 为模板引用标 注 类型
如何进行 类型 标 注
通过具体 DOM 类型联合 null 来声明 ref。这样既能在挂载前保持安全，又能在挂载后得到完整提示。
<
script setup lang ="ts">
import { ref,onMounted } from "vue";const inputRef=ref;onMounted=>{
inputRef.value?.focus，// 可选链防止 null 报错
});，
说明：
-
泛型参数使用 **实际 DOM 类型** + **null** 的联合形式。/ li>
-
在组件挂载之前 ref 的值是 **null**，所以访问时必须加上可选链或判空。/ li>
/ ul
<
h3
Sorry for truncation.
-
如何为
#ref#` 、`#reactive#` 、`#computed#` 标注类型
-
如何为事件处理函数标注类型
-
如何为模板引用标注类型
-
如何处理对象的非空值场景
<\/ul>
<\/blockquote>
前言<\/h2>
