Back to Details

typescript

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

TypeScript Professional

TypeScript 专业开发规范

Strict TypeScript patterns for professional development.
适用于专业开发的严格TypeScript范式。

Instructions

说明

1. Strict Mode Configuration

1. 严格模式配置

Always enable strict mode in 
tsconfig.json
:
json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}
始终在
tsconfig.json
中启用严格模式：
json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

2. Naming Conventions

2. 命名约定

TypeConventionExample
InterfacePascalCase, prefix with I (optional)
User
, 
IUserService
TypePascalCase
UserRole
, 
ApiResponse
EnumPascalCase
Status
, 
Direction
FunctioncamelCase
getUserById
, 
calculateTotal
VariablecamelCase
userName
, 
isLoading
ConstantUPPER_SNAKE_CASE
MAX_RETRY_COUNT
, 
API_URL
类型约定示例
接口大驼峰命名，可前缀I（可选）
User
, 
IUserService
类型别名大驼峰命名
UserRole
, 
ApiResponse
枚举大驼峰命名
Status
, 
Direction
函数小驼峰命名
getUserById
, 
calculateTotal
变量小驼峰命名
userName
, 
isLoading
常量大写蛇形命名
MAX_RETRY_COUNT
, 
API_URL

3. Type vs Interface

3. Type 与 Interface 对比

typescript
// ✅ Interface for object shapes
interface User {
  id: string;
  name: string;
  email: string;
}

// ✅ Type for unions, intersections, primitives
type Status = 'pending' | 'active' | 'inactive';
type ApiResponse<T> = { data: T; error: null } | { data: null; error: string };
typescript
// ✅ 用Interface定义对象结构
interface User {
  id: string;
  name: string;
  email: string;
}

// ✅ 用Type定义联合类型、交叉类型、原始类型
type Status = 'pending' | 'active' | 'inactive';
type ApiResponse<T> = { data: T; error: null } | { data: null; error: string };

4. Never Use 
any

4. 禁止使用
any
类型

typescript
// ❌ Bad
function process(data: any) { ... }

// ✅ Good - use unknown and narrow
function process(data: unknown) {
  if (typeof data === 'string') {
    return data.toUpperCase();
  }
}

// ✅ Good - use generics
function process<T>(data: T): T { ... }
typescript
// ❌ 不推荐
function process(data: any) { ... }

// ✅ 推荐 - 使用unknown并收窄类型
function process(data: unknown) {
  if (typeof data === 'string') {
    return data.toUpperCase();
  }
}

// ✅ 推荐 - 使用泛型
function process<T>(data: T): T { ... }

5. Utility Types

5. 工具类型

typescript
// Partial - all optional
type PartialUser = Partial<User>;

// Required - all required
type RequiredUser = Required<User>;

// Pick - select specific
type UserName = Pick<User, 'name'>;

// Omit - exclude specific
type UserWithoutId = Omit<User, 'id'>;

// Record - key-value mapping
type UserMap = Record<string, User>;
typescript
// Partial - 所有属性可选
type PartialUser = Partial<User>;

// Required - 所有属性必填
type RequiredUser = Required<User>;

// Pick - 选择指定属性
type UserName = Pick<User, 'name'>;

// Omit - 排除指定属性
type UserWithoutId = Omit<User, 'id'>;

// Record - 键值对映射
type UserMap = Record<string, User>;

6. Function Types

6. 函数类型

typescript
// ✅ Explicit return types for public APIs
function getUser(id: string): Promise<User | null> {
  // ...
}

// ✅ Arrow function with types
const add = (a: number, b: number): number => a + b;
typescript
// ✅ 公共API需显式声明返回类型
function getUser(id: string): Promise<User | null> {
  // ...
}

// ✅ 带类型的箭头函数
const add = (a: number, b: number): number => a + b;

7. Generics

7. 泛型

typescript
// ✅ Constrained generics
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// ✅ Default generic types
interface ApiResponse<T = unknown> {
  data: T;
  status: number;
}
typescript
// ✅ 带约束的泛型
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// ✅ 带默认类型的泛型
interface ApiResponse<T = unknown> {
  data: T;
  status: number;
}

References

参考资料