TypeScript 类型声明

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

一、善用类型推断（30% 场景免声明）

typescript">// ❌ 冗余写法
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 判断即类型）

typescript">// 自定义类型守卫
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       # 工具类型

typescript">// user.d.ts
export type UserRole = 'admin' | 'user';export interface BaseUser {id: string;name: string;role: UserRole;
}

五、泛型优化重复代码

typescript">// 通用响应类型
interface ApiResponse<T = unknown> {code: number;data: T;message?: string;
}// 使用示例
type UserResponse = ApiResponse<User>;
type ListResponse = ApiResponse<User[]>;

六、第三方类型工具库

Zod (运行时类型校验)

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

TypeFest (高级工具类型)

typescript">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

typescript">// 自动推断 ref 类型
const count = ref(0); // Ref<number>
const user = ref<User>(); // Ref<User | undefined>

九、处理第三方库类型

DefinitelyTyped：
```
npm install --save-dev @types/lodash
```

框架内置类型：

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

十、终极简化方案

typescript">// 使用 satisfies 运算符（TS 4.9+）
const routes = {home: '/',about: '/about'
} satisfies Record<string, string>;type Routes = keyof typeof routes; // "home" | "about"