最佳实践与陷阱

- · -

1. 使用严格模式

使用严格模式可以帮助你避免一些常见的错误，例如：

• 未声明的变量
• 未使用的变量、参数、属性、导入等

// 在tsconfig.json中启用strict模式
{
  "compilerOptions": {
    "strict": true
  }
}

2. 避免使用 any 类型

any类型虽然很方便，但是它会导致类型检查失效，因此不推荐使用。以下是一些常见的滥用 any 类型的情况：

function fetchData(): Promise<any> {
  // 返回未知类型的数据（不推荐）
  return fetch("https://api.example.com/data").then((response) =>
    response.json()
  );
}

// 改进的版本，使用具体的类型注解
interface Data {
  value: number;
}

async function fetchData(): Promise<Data> {
  const response = await fetch("https://api.example.com/data");
  const data: Data = await response.json();
  return data;
}

3. 避免类型断言的滥用

只在必要的情况下使用类型断言，例如：

function formatDate(input: string | number | Date) {
  // 不经过判断直接使用类型断言（不推荐）
  return (input as Date).toISOString();
}

4. 使用 readonly 属性和参数

使用 readonly 可以避免意外修改对象的属性和参数，例如：

interface Point {
  readonly x: number;
  readonly y: number;
}

const point: Point = { x: 10, y: 20 };

// 以下操作会导致编译错误
point.x = 30;

function greet(name: string, readonly message: string): void {
  console.log(`Hello, ${name}! ${message}`);
}

greet("John", "Welcome!"); // Output: Hello, John! Welcome!

5. 遵循命名约定

使用一致的命名约定可以提高代码的可读性，以下是一些常见的命名约定：

interface User {
  id: number;
  firstName: string;
  lastName: string;
}

6. 使用类型检查工具

使用类型检查工具可以帮助你避免一些常见的错误，例如EsLint

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "plugins": ["@typescript-eslint", "react"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react/prop-types": "off"
  }
}

7. 编写清晰的文档和注释

编写清晰的文档和注释可以帮助你的团队成员更好地理解你的代码。

/**
 * 两数相加.
 * @param num1 第一个数
 * @param num2 第二个数
 * @returns 两数的和
 */
function add(num1: number, num2: number): number {
  return num1 + num2;
}

8. 使用测试

测试的覆盖率越高，测试用例越多，你的代码就越健壮。

import { sum } from "./utils";

describe("测试工具函数", () => {
  test("测试sum函数", () => {
    expect(sum(1, 2)).toBe(3);
  });
});

持续学习和关注社区：你可以参与 TypeScript 社区的论坛、社交媒体和博客，并关注 TypeScript 的官方文档和 GitHub 仓库，以获取最新的使用建议和最佳实践。