TypeScript 类型标注

概述

在现代软件开发中，静态类型检查成为了一项重要的工具，可以帮助开发人员在编码阶段捕获潜在的错误，提高代码的可靠性和可维护性。TypeScript 作为一种强类型的编程语言，为 JavaScript 代码提供了类型标注的能力，使开发人员能够明确指定变量、函数和对象的类型。

无论您是已经熟悉 JavaScript 并希望进一步提高代码质量，还是想要学习 TypeScript 并掌握其类型系统的知识，通过掌握类型标注的技巧，使我们能够编写更可靠、可维护和可扩展的代码。

优势

通过使用类型标注，您可以获得以下好处：

• 错误检测：TypeScript可以在编码阶段捕获潜在的类型错误，帮助您避免在运行时出现意外的错误。
• 代码提示：类型标注提供了更准确的代码提示和自动补全功能，提高了开发效率和代码可读性。
• 文档化代码：通过类型标注，您可以清楚地了解代码中每个变量、函数和对象的用途和预期行为，使代码更易于理解和维护。
• 重构支持：在重构代码时，类型标注可以帮助您更准确地修改和调整代码，减少引入错误的风险。

开始

函数的标注

使用别名

interface AddFunction {
  (a: number, b: number): number;
}
//or
type AddFunction = (a: number, b: number) => number;

const add: AddFunction = (a, b) => {
  return a + b;
};

不使用别名

const add = (a: number, b: number): number => {
  return a + b;
};
//or
function add(a: number, b: number): number {
  return a + b;
}

变量的标注

使用别名

interface Person {
  name: string;
  age: number;
  hobbies: string[];
  address: {
    street: string;
    number: number;
  };
}
//or
type Person = {
    name: string;
    age: number;
    hobbies: string[];
    address: {
      street: string;
      number: number;
    };
  };
  
const person: Person = {
  name: "John",
  age: 42,
  hobbies: ["Sports", "Cooking"],
  address: {
    street: "Main Street",
    number: 123,
  },
};

不使用别名

const person: {
  name: string;
  age: number;
  hobbies: string[];
  address: {
    street: string;
    number: number;
  };
} = {
  name: "John",
  age: 42,
  hobbies: ["Sports", "Cooking"],
  address: {
    street: "Main Street",
    number: 123,
  },
};

组合类型

interface Person {
  name: string;
  age: number;
}

type Employee = {
  company: string;
  position: string;
};

type EmployeePerson = Person & Employee;
//or
interface EmployeePerson extends Person, Employee {}

const employee: EmployeePerson = {
  name: "John",
  age: 30,
  company: "ABC Inc",
  position: "Manager",
};

泛型

泛型类型参数用于定义在接口、类或函数中使用的类型，可以在尖括号 <> 中指定。

interface Box<T> {
    value: T;
}
  
const box: Box<number> = { value: 42 };

在上述示例中，我们定义了一个名为 Box 的接口，它有一个泛型类型参数 T。通过将 T 指定为 number，我们创建了一个 Box<number> 类型的变量 box，它的 value 属性的类型为 number。

多个泛型

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<number, string> = {
  first: 1,
  second: "2",
};