# TypeScript 标准
在 React 前端代码中实现类型安全和可维护性的 TypeScript 最佳实践。
---
## 严格模式 (Strict Mode)
### 配置
项目中已**启用** TypeScript 严格模式：
// tsconfig.json
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}
**这意味着：**
- 不允许隐式 `any` 类型
- 必须显式处理 Null/undefined
- 强制执行类型安全
---
## 禁止使用 `any` 类型
### 规则
typescript
// ❌ 永远不要使用 any
function handleData(data: any) {
return data.something;
}
// ✅ 使用具体类型
interface MyData {
something: string;
}
function handleData(data: MyData) {
return data.something;
}
// ✅ 或者对于完全未知的数据使用 unknown
function handleUnknown(data: unknown) {
if (typeof data === 'object' && data !== null && 'something' in data) {
return (data as MyData).something;
}
}
**如果你确实不知道类型：**
- 使用 `unknown`（强制进行类型检查）
- 使用类型守卫进行收窄
- 记录为什么类型是未知的
---
## 显式返回类型
### 函数返回类型
typescript
// ✅ 正确 - 显式返回类型
function getUser(id: number): Promise {
return apiClient.get(`/users/${id}`);
}
function calculateTotal(items: Item[]): number {
return items.reduce((sum, item) => sum + item.price, 0);
}
// ❌ 避免 - 隐式返回类型（不够清晰）
function getUser(id: number) {
return apiClient.get(`/users/${id}`);
}
### 组件返回类型
typescript
// React.FC 已经提供了返回类型 (ReactElement)
export const MyComponent: React.FC = ({ prop }) => {
return
{prop}
;
};
// 对于自定义 Hook
function useMyData(id: number): { data: Data; isLoading: boolean } {
const [data, setData] = useState
(null);
const [isLoading, setIsLoading] = useState(true);
return { data: data!, isLoading };
}
---
## 类型导入
### 使用 'type' 关键字
typescript
// ✅ 正确 - 显式标记为类型导入
import type { User } from '~types/user';
import type { Post } from '~types/post';
import type { SxProps, Theme } from '@mui/material';
// ❌ 避免 - 混合值和类型导入
import { User } from '~types/user'; // 不清楚是类型还是值
**优势：**
- 清晰区分类型与值
- 更好的 Tree-shaking
- 防止循环依赖
- TypeScript 编译器优化
---
## 组件 Props 接口
# 
粤公网安备44030002003366号