当前位置：首页 > article >正文

TypeScript 类型声明

article 2025/3/3 16:33:29

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