Back to Details

nextfriday-code-style

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Next Friday Code Style

Next Friday 代码风格规范

Rules for code formatting, structure, and readability.
本规范涵盖代码格式、结构与可读性的相关规则。

Control Flow

控制流

Guard Clauses

卫语句

Use early returns instead of nested if statements.
typescript
// Bad:
function processData(data: Data | null): Item[] {
  if (data) {
    if (data.items) {
      return data.items.map(formatItem);
    }
  }
  return [];
}

// Good:
function processData(data: Data | null): Item[] {
  if (!data) return [];
  if (!data.items) return [];

  return data.items.map(formatItem);
}
使用提前返回替代嵌套if语句。
typescript
// Bad:
function processData(data: Data | null): Item[] {
  if (data) {
    if (data.items) {
      return data.items.map(formatItem);
    }
  }
  return [];
}

// Good:
function processData(data: Data | null): Item[] {
  if (!data) return [];
  if (!data.items) return [];

  return data.items.map(formatItem);
}

No Nested Ternary

禁止嵌套三元表达式

Use functions with early returns instead.
typescript
// Bad:
const status = isLoading ? "loading" : hasError ? "error" : "success";

// Good:
function getStatus(): string {
  if (isLoading) return "loading";
  if (hasError) return "error";

  return "success";
}
改用带提前返回的函数。
typescript
// Bad:
const status = isLoading ? "loading" : hasError ? "error" : "success";

// Good:
function getStatus(): string {
  if (isLoading) return "loading";
  if (hasError) return "error";

  return "success";
}

Async Code

异步代码

Prefer async/await

优先使用async/await

No 
.then()
promise chains.
typescript
// Bad:
fetchData(url)
  .then((response) => response.json())
  .then((data) => setData(data));

// Good:
async function loadData(): Promise<void> {
  const response = await fetchData(url);
  const data = await response.json();
  setData(data);
}
禁止使用
.then()
Promise链式调用。
typescript
// Bad:
fetchData(url)
  .then((response) => response.json())
  .then((data) => setData(data));

// Good:
async function loadData(): Promise<void> {
  const response = await fetchData(url);
  const data = await response.json();
  setData(data);
}

Functions

函数

Function Declarations

函数声明

Use declarations over arrow functions in 
.ts
files.
typescript
// Bad:
const formatDate = (date: Date): string => {
  return date.toLocaleDateString();
};

// Good:
function formatDate(date: Date): string {
  return date.toLocaleDateString();
}
在.ts文件中优先使用函数声明而非箭头函数。
typescript
// Bad:
const formatDate = (date: Date): string => {
  return date.toLocaleDateString();
};

// Good:
function formatDate(date: Date): string {
  return date.toLocaleDateString();
}

Separate Exports

分离导出

Declare first, export after.
typescript
// Bad:
export function fetchData() {}

// Good:
function fetchData() {}
export { fetchData };
先声明函数，再进行导出。
typescript
// Bad:
export function fetchData() {}

// Good:
function fetchData() {}
export { fetchData };

Formatting

格式规范

Curly Braces

大括号

Single-line: no braces. Multi-line: require braces.
typescript
// Bad:
if (!data) { return null; }

// Good:
if (!data) return null;
单行语句：无需大括号。多行语句：必须使用大括号。
typescript
// Bad:
if (!data) { return null; }

// Good:
if (!data) return null;

Extract Complexity

提取复杂逻辑

Move complex expressions out of return statements and function parameters.
typescript
// Bad:
return isActive ? "Active" : "Inactive";
processData(value ?? defaultValue);

// Good:
const label = isActive ? "Active" : "Inactive";
return label;

const data = value ?? defaultValue;
processData(data);
将复杂表达式从return语句和函数参数中提取出来。
typescript
// Bad:
return isActive ? "Active" : "Inactive";
processData(value ?? defaultValue);

// Good:
const label = isActive ? "Active" : "Inactive";
return label;

const data = value ?? defaultValue;
processData(data);

Blank Lines

空行

Add blank lines after multi-line blocks and before return statements.
typescript
// Good:
const config = {
  baseUrl: process.env.API_URL,
  timeout: 5000,
};

const item = items.find((item) => item.id === id);

return item;
在多行代码块后和return语句前添加空行。
typescript
// Good:
const config = {
  baseUrl: process.env.API_URL,
  timeout: 5000,
};

const item = items.find((item) => item.id === id);

return item;

Sorted Destructuring

有序解构

Alphabetical order, defaults first.
typescript
// Good:
const { count = 0, status = "active", id, name } = data;
按字母顺序排列，默认值优先。
typescript
// Good:
const { count = 0, status = "active", id, name } = data;