726 字
4 分钟
TypeScript 类型标注
概述
在现代软件开发中，静态类型检查成为了一项重要的工具，可以帮助开发人员在编码阶段捕获潜在的错误，提高代码的可靠性和可维护性。TypeScript 作为一种强类型的编程语言，为 JavaScript 代码提供了类型标注的能力，使开发人员能够明确指定变量、函数和对象的类型。
无论您是已经熟悉 JavaScript 并希望进一步提高代码质量，还是想要学习 TypeScript 并掌握其类型系统的知识，通过掌握类型标注的技巧，使我们能够编写更可靠、可维护和可扩展的代码。
优势
通过使用类型标注，您可以获得以下好处：
- 错误检测：TypeScript可以在编码阶段捕获潜在的类型错误，帮助您避免在运行时出现意外的错误。
- 代码提示：类型标注提供了更准确的代码提示和自动补全功能，提高了开发效率和代码可读性。
- 文档化代码：通过类型标注，您可以清楚地了解代码中每个变量、函数和对象的用途和预期行为，使代码更易于理解和维护。
- 重构支持：在重构代码时，类型标注可以帮助您更准确地修改和调整代码，减少引入错误的风险。
开始
函数的标注
使用别名
interface AddFunction { (a: number, b: number): number;}//ortype AddFunction = (a: number, b: number) => number;
const add: AddFunction = (a, b) => { return a + b;};不使用别名
const add = (a: number, b: number): number => { return a + b;};//orfunction add(a: number, b: number): number { return a + b;}变量的标注
使用别名
interface Person { name: string; age: number; hobbies: string[]; address: { street: string; number: number; };}//ortype 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;//orinterface 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",}; TypeScript 类型标注
https://fuwari.vercel.app/posts/2023年/typescript-类型标注/