想了解的是在 Node.js 环境下，如何基于 TypeScript 来开发 Vue3 项目，并且需要具体的示例来理解整个过程，这是 Vue3 项目开发的主流方式，TypeScript 能为 Vue3 项目提供强类型校验，提升代码的可维护性。
一、环境准备
首先需要搭建支持 TypeScript 的 Vue3 开发环境，Vue 官方脚手架 create-vue 提供了一键集成 TypeScript 的选项，步骤如下：
1. 初始化 Vue3 + TypeScript 项目
确保你的 Node.js 版本 ≥ 16.0.0（Vue3 最低要求），执行以下命令：
# 创建项目（命名为 vue3-ts-demo） npm create vue@latest vue3-ts-demo
在交互式创建过程中，关键选择：
- 选择
TypeScript→ Yes（核心，开启 TS 支持） - 可选：
Vue Router、Pinia（示例中会用到） - 其余选项（如 ESLint、Prettier）按需选择
2. 安装依赖并启动项目
cd vue3-ts-demo npm install npm run dev
启动成功后，访问控制台输出的本地地址（如 http://localhost:5173）即可看到项目运行效果。
二、TypeScript 在 Vue3 项目中的核心应用示例
Vue3 + TypeScript 最常用的是 <script setup lang="ts"> 语法，以下是核心场景的示例：
1. 基础类型 + 接口（Interface）—— 定义数据结构
创建 src/components/UserCard.vue：
<template>
<div class="user-card">
<h3>{{ user.name }}</h3>
<p>年龄：{{ user.age }}</p>
<p>职业：{{ user.job }}</p>
<button @click="updateAge(1)">年龄+1</button>
<p>爱好：{{ hobbies.join('、') }}</p>
</div>
</template>
<script setup lang="ts">
// 1. 定义接口（TS 核心，约束对象结构）
interface User {
id: number;
name: string;
age: number;
job?: string; // 可选属性
}
// 2. 基础类型声明（string/number/boolean/array）
const userName: string = "张三";
const userAge: number = 25;
const isAdult: boolean = userAge >= 18;
const hobbies: string[] = ["编程", "阅读", "运动"]; // 数组类型
// 3. 符合接口约束的对象
const user: User = {
id: 1,
name: userName,
age: userAge,
job: "前端工程师",
};
// 4. 函数类型约束（参数+返回值）
const updateAge = (step: number): void => {
// void 表示无返回值
user.age += step;
};
// 5. 联合类型
type Status = "active" | "inactive" | "pending";
const userStatus: Status = "active";
// 6. 类型断言（明确指定类型）
const userJob = user.job as string; // 断言 job 是 string 类型
console.log(`用户职业：${userJob}`);
</script>
<style scoped>
.user-card {
border: 1px solid #eee;
padding: 20px;
border-radius: 8px;
max-width: 300px;
margin: 20px auto;
}
</style>
2. 组合式 API + TypeScript（Ref/Reactive）
创建 src/components/Counter.vue，演示 Vue3 响应式 API 结合 TS 的用法：
<template>
<div class="counter">
<h3>计数器（TS + 响应式）</h3>
<p>计数：{{ count }}</p>
<p>双倍计数：{{ doubleCount }}</p>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
// 1. Ref 类型（基础类型响应式）
// 显式指定类型（TS 会自动推导，但复杂场景建议显式声明）
const count = ref<number>(0);
// 2. Computed 计算属性 + 类型
const doubleCount = computed<number>(() => {
return count.value * 2;
});
// 3. Reactive 类型（对象/数组响应式）
interface CounterState {
history: number[];
}
const state = reactive<CounterState>({
history: [],
});
// 4. 函数逻辑（带类型约束）
const increment = (): void => {
count.value++;
state.history.push(count.value);
};
const decrement = (): void => {
count.value--;
state.history.push(count.value);
};
// 打印历史记录（验证类型）
console.log("计数历史：", state.history);
</script>
3. 路由参数 + TypeScript（Vue Router）
如果创建项目时选择了 Vue Router，修改 src/router/index.ts 并新增页面组件，演示路由参数的类型约束：
// src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import UserDetail from "../views/UserDetail.vue"; // 新增的详情页
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/user/:id", // 动态路由参数
name: "userDetail",
component: UserDetail,
props: true, // 开启 props 传参，方便 TS 约束
},
],
});
export default router;
创建 src/views/UserDetail.vue：
<template>
<div class="user-detail">
<h3>用户详情页</h3>
<p>用户ID：{{ id }}</p>
</div>
</template>
<script setup lang="ts">
// 1. 定义 props 类型（TS 约束路由参数）
interface Props {
id: string; // 路由参数默认是 string 类型
}
// 2. 声明 props 并指定类型
const props = defineProps<Props>();
// 3. 类型转换（将 string 转为 number）
const id = Number(props.id);
// 验证类型
console.log("用户ID类型：", typeof id); // number
</script>
4. 在根组件 App.vue 中引入组件
<template> <router-link to="/">首页</router-link> | <router-link to="/user/1001">用户1001详情</router-link> <router-view /> <UserCard /> <Counter /> </template> <script setup lang="ts"> import UserCard from "./components/UserCard.vue"; import Counter from "./components/Counter.vue"; </script>
三、关键配置说明（TS 生效的核心）
Vue 脚手架已自动配置好 TS 相关文件，无需手动修改，但可以了解核心文件：
tsconfig.json：TS 的核心配置文件，定义了编译目标（target: ESNext）、模块规范（module: ESNext）、类型检查规则等；package.json：包含 TS 依赖（typescript、@vue/tsconfig）；vite.config.ts：Vite 构建配置（TS 版本），内置对 TS 的编译支持，无需额外配置 Babel；env.d.ts：全局类型声明文件，用于扩展 Vue 相关类型（如import.meta.env）。
总结
- Vue3 + TypeScript 项目可通过官方脚手架
create-vue一键初始化，只需在创建时选择TypeScript: Yes即可； - 核心用法是
<script setup lang="ts">语法，结合 TS 的接口（Interface）、基础类型、联合类型 约束数据结构，结合 Vue3 的ref/reactive/computed实现类型安全的响应式开发； - 对于路由参数、Props 等场景，通过 TS 显式声明类型，可提前发现类型错误，提升项目的健壮性和可维护性。
启动项目后，你可以点击页面上的路由链接、按钮等交互元素，直观看到 TS 约束下的代码运行效果，控制台也不会出现类型相关的报错，这就是 Vue3 + TypeScript 开发的核心体验。