编写简洁代码的 7 个技巧

关键在于保持代码的简洁性和可读性（当然，这本身就很重要）。所以，我想和大家分享一些技巧。欢迎在评论区指正或分享你们自己的技巧，让我们共同学习。那么，让我们开始吧：

1. 评论、评论，还有更多评论

我不是那种代码人人都能看懂的理想开发者，我猜你也不是。与其解释具体该怎么做，不如我来告诉你哪些事情不该做。我们来看一些示例代码：

// Created a constant variable "foo" and assigned a value of "bar"
const foo = "bar";

2. 有意义的名字

你希望使用那种读者会说“是的！我完全明白这是做什么的”的名称。

// NEVER DO THIS
const abc = validateEmail('writecleancode@gmail.com')

// Good Job!
const isEmailValidated = validateEmail('writecleancode@gmail.com');

3. 控制台警告/错误

这是一个非常严重的问题，我多次看到开发者提交的代码存在 ESLint 警告。事实上，几个月前，我开始参与一个现有项目。编译前端时，我发现 jsx-ally、eslint 等工具发出了超过 100 个警告。

我们可以使用husky和​​lint-staged，这样在你清除所有警告和错误之前，就不会允许你提交代码。

4.as unknown在 TypeScript 中

TypeScript 很智能，但有时它还不够智能！我在 TypeScript 代码中见过很多// @ts-ignore`s` 或as unknown`s`。所以，与其这样做：

const user = dog as unknown;

这样做：

const user dog as IUser

虽然这样做并不可取，但至少能获得一定的安全保障。

5. 使用 Babel 代替 tsc

从版本 7 开始，Babel 增加了对 TypeScript 的支持，这意味着你不再需要使用 TypeScript 编译器来tsc构建你的项目，而是可以直接使用 Babel，它会从所有 TypeScript 文件中提取类型，然后将结果作为 JavaScript 输出。

这不仅比 tsc 快得多，尤其是在大型项目中，而且还允许你在项目中使用整个 Babel 生态系统。例如，当你想要使用仍处于 Stage 3 阶段的 React 或 JavaScript 功能时，它就非常有用。

对于后端项目而言，这意味着您可以简化笨拙的文件监视脚本，只需使用 babel-node 来监视更改即可。

6. 使用 SonarJS 和 ESLint

ESLint 有许多规则可以强制执行最佳实践和约定，并且还有助于防止错误。

（TSLint 正在被弃用，取而代之的是 typescript-eslint；TSLint 插件 SonarTS 已被采用，现在是 SonarJS 的一部分）。

除了 ESLint 的功能之外，SonarJS 还为您的代码添加了一些复杂性检查，这有助于您编写代码，然后将方法拆分成更小的部分。

7. 不透明类型

我不打算解释，直接演示给你看。

假设我们正在构建一个银行API。

// Account.ts

export type PaymentAmt = number;
export type Balance = number;
export type AccountNumberType = number;

function spend(accountNo: AccountNumberType, amount: PaymentAmt) {
  const account = getAccount(accountNo);
  account.balance -= amount;
}

// controller.ts
import {spend} from "./accounting";

type Request = {
  body: {
    accountNumber: number,
    amount: number
  }
};

export function withdrawAmt(req: Request) {
  const {accountNumber, amount} = req.body;

  spend(amount, accountNumber);
}

你发现 bug 了吗？如果没有，请检查我们调用spend()函数的地方。我（故意）把金额放在了账号之前，但 TypeScript 没有报错。

如果你想知道为什么会发生这种情况，这是因为AccountNumberType和PaymentAmt可以相互赋值，因为它们都是 类型number。

TypeScript 代码库中长期存在这个问题。在 TypeScript 团队解决这个问题之前，我们可以使用以下临时解决方案。

// Can be used with any type
type Opaque<K, T> = T & { __TYPE__: K };

type Uuid = Opaque<"Uuid", string>;

实用函数 Opaque 定义了一种新类型，除了变量的值之外，它还存储一个（唯一的）键，例如 Uuid。

结论

感谢阅读！欢迎关注我的推特，我（尽量）每天都会分享一些小技巧。拜拜🤟