目录1. 基础类型声明2. 接口与类型别名3. 联合类型与字面量类型4. 泛型 - 封装网络请求5. 枚举6. Vue 组件 Props 的类型定义7. Composition API 与 Ref 的类型9. 高级工具类型Pick / 交叉类型- 复杂表单参数的组装8. 类型断言 - 初始化空对象与类型转换9. uni-app/微信小程序原生 API 的类型在 uni-app 微信小程序项目开发中使用 TypeScript (TS) 相比传统的 JavaScript (JS) 最大的优势在于静态类型检查、代码提示更完善以及在开发阶段捕获潜在错误。1. 基础类型声明TS 最基础的功能是给变量、函数参数和返回值添加类型约束。JS 写法let count 0; function add(a, b) { return a b; }TS 写法let count: number 0; // 约束参数和返回值类型防止传入字符串导致意外行为 function add(a: number, b: number): number { return a b; }2. 接口与类型别名在处理小程序后端返回的数据或复杂对象时定义结构至关重要。JS 写法// JS 只能靠注释说明没有约束 function getUser() { return { id: 1, name: 张三, age: 18 }; } let user getUser(); console.log(user.nme); // 拼写错误JS运行时才报错或静默失败TS 写法// 定义接口 interface User { id: number; name: string; age?: number; // 可选属性带问号 readonly createTime: string; // 只读属性 } function getUser(): User { return { id: 1, name: 张三, createTime: 2023-01-01 }; } let user getUser(); console.log(user.nme); // 编译报错Property nme does not exist on type User3. 联合类型与字面量类型小程序中常有状态值如订单状态1待付款2已付款或固定类型的参数。JS 写法let status 1; // 可能被误赋值为 1 或其他无关数字 function setTheme(theme) {} // theme是什么完全不知道TS 写法// 联合类型 let status: number | string 1; status success; // 允许 // 字面量联合类型常用于状态机、枚举替代 type OrderStatus unpaid | paid | shipped | completed; function setOrderStatus(status: OrderStatus) { // ... } setOrderStatus(paid); // 正确 setOrderStatus(cancel); // 编译报错4. 泛型 - 封装网络请求封装uni.request时泛型是 TS 最强大的功能之一能让你在不同的接口调用中获得不同的数据类型提示。JS 写法// 封装 function request(url, data) { return new Promise((resolve, reject) { uni.request({ url, data, success: res resolve(res.data), fail: err reject(err) }); }); } // 调用 const res await request(/api/user, {}); console.log(res.name); // 没有提示不知道res里有什么TS 写法// 封装使用泛型 T 表示返回的数据结构 function requestT any(url: string, data?: any): PromiseT { return new Promise((resolve, reject) { uni.request({ url, data, success: (res) resolve(res.data as T), fail: (err) reject(err) }); }); } // 定义接口数据类型 interface UserInfo { id: number; name: string; } // 调用传入具体类型res 自动推导为 UserInfo const res await requestUserInfo(/api/user, {}); console.log(res.name); // 有完美代码提示5. 枚举用于管理项目中全局的常量如 tabBar 的 pagePath、错误码等。JS 写法const Color { RED: red, GREEN: green }; console.log(Color.RED);TS 写法enum Color { RED red, GREEN green, BLUE blue } console.log(Color.RED); // 代码提示更好且防止使用未定义的枚举值6. Vue 组件 Props 的类型定义在 uni-app 中Vue 3 的组件 Props 定义是高频场景。JS 写法export default { props: { title: String, user: Object // 不知道user里面有什么字段 } }TS 写法import { defineComponent, PropType } from vue; interface UserProps { id: number; name: string; } export default defineComponent({ props: { title: { type: String, required: true }, // 使用 PropType 断言对象类型 user: { type: Object as PropTypeUserProps, required: true }, // 验证数组类型 list: { type: Array as PropTypestring[], default: () [] } }, setup(props) { console.log(props.user.name); // 完美提示 } })7. Composition API 与 Ref 的类型在 uni-app 的 Vue3 开发中ref和reactive的类型定义。JS 写法import { ref, reactive } from vue; const count ref(0); // 自动推断为数字 const user ref(null); // 推断为 null后续赋值对象无提示TS 写法import { ref, reactive } from vue; interface UserInfo { name: string; age: number; } // 1. ref 的泛型用法 const user refUserInfo | null(null); user.value { name: 张三, age: 18 }; // 正确 user.value.age 20; // 提示正常 // 2. reactive 直接有类型推导 const state reactive({ list: [] as string[] // 在对象内部断言 });9. 高级工具类型Pick / 交叉类型- 复杂表单参数的组装在 uni-app 小程序开发中经常遇到“编辑个人资料”表单。我们需要从完整的用户详情ProfileDetail中提取部分字段再合并一些特有的省市编码字段用于提交给后端。此时Pick和交叉类型能大显身手。Pick它是 TypeScript 的内置工具类型。它的作用就像“挑水果”一样从一个已有的类型中精准挑选出你指定的几个属性丢弃其他属性从而生成一个新的子类型。JS 写法// JS 无法复用已有对象结构只能手写全部字段极易遗漏或写错 /** * typedef {Object} ProfileParams * property {string} nickname - 昵称 * property {string} gender - 性别 * property {string} provinceCode - 省份编码 (可选) * ... */ function updateProfile(params) { console.log(params.nickname); }TS 写法// 假设这是从后端获取的用户详情结构 interface ProfileDetail { id: string; nickname: string; gender: string; birthday: string; profession: string; // ... 其他几十个字段 } // 1. 使用 Pick 挑出需要编辑的字段使用 补充提交时需要的额外字段 export type ProfileParams Pick ProfileDetail, nickname | gender | birthday | profession { /** 省份编码 */ provinceCode?: string /** 城市编码 */ cityCode?: string /** 区县编码 */ countyCode?: string } // 2. 提交函数约束 function updateProfile(params: ProfileParams) { console.log(params.nickname); // 完美提示 // console.log(params.id); // 编译报错防止误传 id 给后端 } // 调用时严格校验字段 updateProfile({ nickname: 张三, gender: 男, birthday: 2000-01-01, profession: 码农, // cityCode: 110100 // 可选字段不传也不报错 });优势如果后端修改了ProfileDetail中的birthday字段名为birthDate你的ProfileParams会立刻在编译阶段红线报错彻底杜绝前后端字段对不上的隐患。8. 类型断言 - 初始化空对象与类型转换在页面初始渲染时我们常定义一个空对象用来存放稍后从后端请求回来的数据。但在 TS 中如果直接给ref赋空对象{}会报错提示缺少必填属性。此时使用as关键字进行类型断言相当于告诉编译器“我知道它是空对象但你先按这个类型给我提示”。JS 写法import { ref } from vue; // JS 毫无提示后续给 profile 赋值时打错字也不会报错 const profile ref({});TS 写法import { ref } from vue; // 1. 定义详情接口 interface ProfileDetail { id: number; nickname: string; gender: string; } // 2. 使用 as 进行类型断言初始化为空对象但拥有完整类型提示 const profile refProfileDetail({} as ProfileDetail); // 3. 模板中使用 profile.nickname 会有代码提示 // 4. 异步获取数据后赋值 profile.value { id: 1, nickname: 张三, gender: 男 }; // 注意断言是双刃剑。如果用 as 强行断言错误类型会骗过编译器 // let a hello as number; // 报错TS不允许差异过大的断言 // let b ({} as any) as number; // 滥用 any 断言会导致运行时错误需谨慎优势完美解决了“声明时还没数据用空对象初始化会报错”的尴尬同时保证了后续业务代码拥有完美的类型推导和防错能力。9. uni-app/微信小程序原生 API 的类型uni-app 官方提供了完整的 d.ts 文件所有的uni.xxxAPI 都有类型支持。JS 写法uni.getSystemInfo({ success: function(res) { console.log(res.model); // 靠记忆或查文档才知道有model console.log(res.windowWidth); // 拼错完全没提示 } });TS 写法uni.getSystemInfo({ success: (res) { // res 自动推断为 UniApp.GetSystemInfoResult console.log(res.model); // 有提示 console.log(res.windowWidth); // 有提示 // console.log(res.windowHight); // 拼错会有红线报错 } });