TypeScript - 类型注解：初学者指南

你好啊，未来的编码超级巨星！? 欢迎加入我们的TypeScript和类型注解的精彩旅程。作为你友好的邻居计算机科学老师，我很高兴能引导你进行这次冒险。别担心你编程新手——我们将从最基础的内容开始，一起逐步学习。所以，拿起你的虚拟背包，让我们一起跳进去吧！

TypeScript - Type Annotations

类型注解是什么？

想象你正在为旅行打包。你为不同的物品准备了不同的包——一个装衣服，一个装洗漱用品，一个装电子产品。TypeScript中的类型注解就像这些包上的标签。它们告诉我们和计算机我们正在处理什么样的“东西”（数据）。

在TypeScript的世界中，类型注解是一种明确告诉编译器一个变量、函数参数或对象属性可以持有哪种类型值的方式。就像是给计算机一个关于预期的提示。

为什么使用类型注解？

及早捕捉错误：它们帮助我们运行代码之前发现错误。
更好的代码文档：它们使我们的代码更容易理解。
改进的开发体验：它们在我们的代码编辑器中提供更好的自动完成和智能提示。

现在，让我们看看我们可以如何使用类型注解。

变量类型注解

当我们创建一个TypeScript变量时，我们可以添加一个类型注解来指定它应该持有哪种类型的值。

基本语法

let 变量名: 类型 = 值;

让我们看一些例子：

let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;

在这些例子中，我们告诉TypeScript：

myName 只应包含文本（字符串）
myAge 只应是一个数字
isStudent 只应是真或假（布尔值）

如果我们稍后尝试分配一个不同类型的值，TypeScript会警告我们：

myName = 42; // 错误：类型 'number' 不能分配给类型 'string'

数组和特殊类型

我们也可以注解数组和使用特殊类型：

let favorites: string[] = ["披萨", "编程", "猫咪"];
let anything: any = "我可以是任何东西！";
let maybe: unknown = 4;

string[] 意味着字符串数组
any 是一个可以是任何东西的特殊类型（谨慎使用！）
unknown 是any的一个更安全的替代品

函数类型注解

函数可以有参数和返回值的类型注解。

基本语法

function 函数名(参数1: 类型1, 参数2: 类型2): 返回类型 {
// 函数体
}

让我们看一些例子：

function greet(name: string): string {
return `你好，${name}！`;
}

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

function logMessage(message: string): void {
console.log(message);
}

在这些例子中：

greet 接受一个字符串并返回一个字符串
add 接受两个数字并返回一个数字
logMessage 接受一个字符串但不返回任何东西（void）

箭头函数

箭头函数也可以有类型注解：

const multiply = (a: number, b: number): number => a * b;

对象属性类型注解

当处理对象时，我们可以注解它们的属性。

基本语法

let 对象名: { 属性1: 类型1; 属性2: 类型2 } = {
属性1: 值1,
属性2: 值2
};

让我们看一个例子：

let user: { name: string; age: number; isAdmin: boolean } = {
name: "Bob",
age: 25,
isAdmin: false
};

在这里，我们定义了一个具有特定属性类型的对象。

接口用于复杂对象

对于更复杂的对象，我们可以使用接口：

interface Person {
name: string;
age: number;
hobbies: string[];
greet: () => void;
}

let employee: Person = {
name: "Charlie",
age: 30,
hobbies: ["阅读", "游戏"],
greet: () => console.log("你好！")
};

接口帮助我们定义可重用的对象结构。

一切结合在一起

现在我们已经学习了不同类型的注解，让我们通过一个更复杂的例子来看它们的应用：

interface Book {
title: string;
author: string;
pages: number;
isPublished: boolean;
}

function createBookList(books: Book[]): string[] {
return books.map(book => `${book.title} by ${book.author}`);
}

const myBooks: Book[] = [
{ title: "TypeScript 101", author: "代码巫师", pages: 200, isPublished: true },
{ title: "JavaScript冒险", author: "JS忍者", pages: 150, isPublished: false }
];

const bookTitles: string[] = createBookList(myBooks);
console.log(bookTitles);

这个例子结合了我们学到的各种概念：

我们定义了一个接口Book
我们创建了一个函数createBookList，它接受一个Book对象数组并返回一个字符串数组
我们创建了一个Book对象数组
我们调用这个函数并将结果存储在具有正确类型注解的变量中

结论

恭喜你！你刚刚迈出了进入TypeScript类型注解世界的第一步。记住，这些注解就像友好的路标，引导你和你的代码走向安全。它们一开始可能看起来有点令人畏惧，但通过实践，它们会变得习以为常。

在你继续编码旅程的同时，不断尝试不同的类型和注解。不要害怕犯错误——这是我们学习和成长的方式！

这里有一个方便的表格，总结了我们已经覆盖的类型注解：

类型注解	示例	描述
基础类型	`let name: string = "Alice";`	对于像字符串、数字、布尔值这样的简单值
数组类型	`let numbers: number[] = [1, 2, 3];`	对于特定类型的数组
函数类型	`function add(a: number, b: number): number`	对于函数的参数和返回值
对象类型	`let user: { name: string; age: number }`	对于对象属性
接口	`interface Person { name: string; age: number }`	对于定义复杂的对象结构

继续编码，保持好奇心，记住——每一个大师都曾是一个初学者。快乐TypeScript编程！??‍??‍?

Credits: Image by storyset