足够且完整的TS指南

2023-11-24 10:13:14

作为一名程序员，我们与自己的小伙伴共同开发、维护于一个项目，需要保持代码的整洁、清晰，以便于其他开发人员阅读和维护。在 TypeScript 中，有很多方法可以帮助我们保持代码的整洁和清晰。

1. 使用变量类型

TypeScript 允许我们为变量指定类型，这可以帮助我们防止出现类型错误。例如，我们可以将变量 a 声明为字符串类型，如下所示：

let a: string = "hello";

这样，我们就告诉 TypeScript，变量 a 只可以存储字符串值。如果我们尝试将一个数字值赋给变量 a，TypeScript 将会报错。

2. 使用函数类型

TypeScript 也允许我们为函数指定类型，这可以帮助我们防止出现函数调用错误。例如，我们可以将函数 add 声明为接受两个数字参数并返回一个数字结果的函数，如下所示：

function add(a: number, b: number): number {
  return a + b;
}

这样，我们就告诉 TypeScript，函数 add 只可以接受两个数字参数，并且只能返回一个数字结果。如果我们尝试将一个字符串值作为参数传递给函数 add，TypeScript 将会报错。

3. 使用类

TypeScript 允许我们定义类，类可以帮助我们组织代码并使代码更易于阅读和维护。例如，我们可以定义一个 Person 类，如下所示：

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

在这个例子中，我们定义了一个 Person 类，该类具有 name 和 age 两个属性，以及一个 greet 方法。我们可以使用 new 运算符来创建 Person 类的新实例，如下所示：

const person = new Person("John Doe", 30);

现在，我们可以使用点运算符来访问 person 对象的属性和方法，如下所示：

console.log(person.name); // John Doe
console.log(person.age); // 30
person.greet(); // Hello, my name is John Doe and I am 30 years old.

4. 使用接口

TypeScript 允许我们定义接口，接口可以帮助我们定义对象应该具有的属性和方法。例如，我们可以定义一个 Person 接口，如下所示：

interface Person {
  name: string;
  age: number;
  greet(): void;
}

这个接口定义了一个 Person 对象应该具有的 name、age 和 greet 方法。我们可以使用接口来约束对象，如下所示：

function printPerson(person: Person) {
  console.log(`Hello, my name is ${person.name} and I am ${person.age} years old.`);
}

const person = {
  name: "John Doe",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

printPerson(person); // Hello, my name is John Doe and I am 30 years old.

在这个例子中，我们定义了一个 printPerson 函数，该函数接受一个 Person 对象作为参数。我们还定义了一个 person 对象，该对象实现了 Person 接口。当我们调用 printPerson 函数并传入 person 对象时，函数将打印出 person 对象的 name 和 age 属性。

5. 使用模块

TypeScript 允许我们将代码组织成模块，模块可以帮助我们使代码更易于阅读和维护。例如，我们可以将 Person 类和 printPerson 函数放到一个名为 person.ts 的模块中，如下所示：

// person.ts
export class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

export function printPerson(person: Person) {
  console.log(`Hello, my name is ${person.name} and I am ${person.age} years old.`);
}

然后，我们可以在其他模块中导入 Person 类和 printPerson 函数，如下所示：

// main.ts
import { Person, printPerson } from "./person";

const person = new Person("John Doe", 30);
printPerson(person); // Hello, my name is John Doe and I am 30 years old.

在这个例子中，我们从 person.ts 模块中导入了 Person 类和 printPerson 函数，然后我们创建了一个 Person 对象并调用 printPerson 函数来打印出 person 对象的 name 和 age 属性。

6. 使用泛型

TypeScript 允许我们定义泛型函数和泛型类，泛型可以帮助我们编写出更通用的代码。例如，我们可以定义一个 map 函数，该函数可以将一个数组中的每个元素映射到另一个值，如下所示：

function map<T, U>(array: T[], f: (item: T) => U): U[] {
  const result = [];
  for (const item of array) {
    result.push(f(item));
  }
  return result;
}

在这个例子中，我们定义了一个 map 函数，该函数接受一个数组和一个函数作为参数。函数将数组中的每个元素映射到另一个值，并将这些值返回一个新的数组。我们可以使用 map 函数来对数组中的每个元素执行各种操作，例如，我们可以将数组中的每个数字乘以 2，如下所示：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = map(numbers, (n) => n * 2); // [2, 4, 6, 8, 10]

7. 使用装饰器

TypeScript 允许我们使用装饰器来修改类和函数的行为。例如，我们可以使用 @log 装饰器来记录函数的调用，如下所示：

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with args ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Called ${propertyKey} with args ${args} and returned ${result}`);
    return result;
  };
}

class MyClass {
  @log
  greet(name: string) {
    console.log(`Hello, ${name}!`);
  }
}

const myClass = new MyClass();
myClass.greet("John Doe");