TypeScript类型声明

在 TypeScript 开发中简化类型声明，可以通过以下 7 种实用技巧 显著提升效率：

---

一、善用类型推断（30% 场景免声明） // ❌ 冗余写法 const user: { name: string; age: number } = { name: 'Jack', age: 25 }; // ✅ 自动推断（hover 变量可见类型） const user = { name: 'Jack', age: 25 };

---

二、实用类型工具（20% 代码量） 类型工具应用场景示例Partial<T>所有属性变为可选type Draft = Partial<Article>;Pick<T, K>选取部分属性type Preview = Pick<Article, 'title'>Omit<T, K>排除指定属性type SafeUser = Omit<User, 'password'>ReturnType<T>获取函数返回值类型type Result = ReturnType<typeof fetch>Record<K, T>快速定义键值类型type Pages = Record<string, React.FC>

---

三、类型守卫简化逻辑（if 判断即类型） // 自定义类型守卫 function isAdmin(user: User): user is AdminUser { return 'privileges' in user; } // 使用示例 const handleUser = (user: User) => { if (isAdmin(user)) { user.manageSystem(); // 自动识别为 AdminUser 类型 } }

---

四、模块化类型管理 types/ ├── user.d.ts # 用户相关类型 ├── api.d.ts # API 响应类型 └── utils.d.ts # 工具类型 // user.d.ts export type UserRole = 'admin' | 'user'; export interface BaseUser { id: string; name: string; role: UserRole; }

---

五、泛型优化重复代码 // 通用响应类型 interface ApiResponse<T = unknown> { code: number; data: T; message?: string; } // 使用示例 type UserResponse = ApiResponse<User>; type ListResponse = ApiResponse<User[]>;

---

六、第三方类型工具库

Zod (运行时类型校验)

import { z } from "zod"; const UserSchema = z.object({ name: z.string(), age: z.number().positive() }); type User = z.infer<typeof UserSchema>; // 自动推断类型

TypeFest (高级工具类型)

import type { CamelCase } from 'type-fest'; type ApiResponse = { user_name: string; total_count: number; }; type FrontendData = { [K in keyof ApiResponse as CamelCase<K>]: ApiResponse[K]; }; // { userName: string; totalCount: number }

---

七、IDE 高效开发技巧

快速修复： 在类型错误处按 Ctrl+. 自动生成类型声明

智能提示： 输入 user. 自动显示所有可用属性和方法

类型跳转： Ctrl+Click 跳转到类型定义

重命名重构： F2 安全修改类型名称（自动更新所有引用）

---

八、框架最佳实践 React 组件 Props // 使用 interface 自动提示 interface ButtonProps { variant?: 'primary' | 'secondary'; children: React.ReactNode; } const Button: React.FC<ButtonProps> = ({ variant = 'primary', children }) => ( <button className={`btn-${variant}`}>{children}</button> ); Vue Composition API // 自动推断 ref 类型 const count = ref(0); // Ref<number> const user = ref<User>(); // Ref<User | undefined>

---

九、处理第三方库类型

DefinitelyTyped：

npm install --save-dev @types/lodash

框架内置类型：

// Next.js 页面 Props import type { GetServerSideProps } from 'next'; export const getServerSideProps: GetServerSideProps = async () => { // ... }

---

十、终极简化方案 // 使用 satisfies 运算符（TS 4.9+） const routes = { home: '/', about: '/about' } satisfies Record<string, string>; type Routes = keyof typeof routes; // "home" | "about"

通过结合这些技巧，可使 TypeScript 开发效率提升 50% 以上。核心原则是：让类型系统为你工作，而不是对抗它。