TypeScript - 类型：初学者指南

你好啊，未来的编程超级巨星！今天，我们将深入探索TypeScript类型的迷人世界。如果你之前从未写过一行代码，也不用担心——我会作为你在这段激动人心旅程中的友好向导。在本教程结束时，你会对自己学到的东西感到惊讶。那么，让我们开始吧！

TypeScript中的类型是什么？

在我们跳入深水区之前，让我们先谈谈类型是什么，以及为什么它们很重要。可以把类型看作是我们贴在数据上的标签。就像我们用不同的区域来组织衣柜里的衬衫、裤子和鞋子一样，类型帮助我们组织代码，防止我们把一个隐喻性的袜子放进衬衫抽屉！

TypeScript是JavaScript的一个超集，它添加了可选的静态类型。这意味着我们可以告诉TypeScript我们正在处理的数据类型，这有助于在代码运行之前捕获错误。这就像有一个乐于助人的朋友在你肩膀上看着，指出你潜在的错误，在你犯之前就提醒你。

任何类型：TypeScript的王牌

让我们从TypeScript中最灵活的类型开始：any。它就像一副牌中的小丑——它可以代表任何东西！

let myVariable: any = 42;
myVariable = "Hello, World!";
myVariable = true;

在这个例子中，myVariable可以是一个数字，然后是一个字符串，然后是一个布尔值。它非常灵活，但权力越大，责任越大。过度使用any会削弱使用TypeScript的意义，所以请谨慎使用！

内置类型：TypeScript的构建块

TypeScript带有很多内置类型，覆盖了我们的大多数需求。让我们一个一个地探索它们：

1. Number

let age: number = 30;
let price: number = 9.99;

TypeScript中的数字可以是整数或浮点值。不需要担心像其他一些语言中那样的不同数字类型！

2. String

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;

字符串可以用单引号、双引号或反引号定义。反引号允许我们使用${}嵌入表达式。

3. Boolean

let isStudent: boolean = true;
let hasPassedExam: boolean = false;

布尔值很简单——它们要么是true，要么是false。可以把它们看作是代码中的是/非问题。

4. Array

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

数组可以容纳多个相同类型的值。我们可以使用方括号或Array<T>语法来定义它们。

5. Tuple

let person: [string, number] = ["Alice", 30];

元组是具有固定数量元素的数组，其中每个元素可以有不同类型。它们就像一个带有特定隔间的小型有序盒子，每个项目都有指定的位置。

6. Enum

enum Color {
Red,
Green,
Blue
}
let favoriteColor: Color = Color.Blue;

枚举允许我们定义一组命名常量。它们非常适合表示一组固定的选项。

7. Void

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

Void用于表示函数不返回任何东西。就像发送一封不需要回复的信。

8. Null 和 Undefined

let notDefined: undefined = undefined;
let empty: null = null;

这些类型表示值的缺失。它们就像空盒子——一个是故意留空的（null），一个还没有填满（undefined）。

下面是我们讨论过的内置类型的总结表：

类型	描述	示例
number	数值（整数或浮点数）	let age: number = 30;
string	文本数据	let name: string = "Alice";
boolean	真或假值	let isStudent: boolean = true;
array	同类型值的集合	let numbers: number[] = [1, 2, 3];
tuple	固定长度数组，元素类型特定	let person: [string, number] = ["Alice", 30];
enum	命名常量集合	enum Color { Red, Green, Blue }
void	函数中没有返回值	function logMessage(message: string): void { ... }
null	故意没有对象值	let empty: null = null;
undefined	变量尚未被赋值	let notDefined: undefined = undefined;

用户定义类型：打造自己的工具

现在我们已经覆盖了内置类型，让我们谈谈如何创建你自己的自定义类型。这是TypeScript真正闪耀的地方！

1. 接口

接口允许我们定义对象的结构。可以把它们看作是对象的蓝图。

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

let alice: Person = {
name: "Alice",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};

在这个例子中，我们定义了一个Person接口，并创建了一个符合这种结构的对象。就像创建一个表格，让人们需要填写——每个人都需要提供相同的信息。

2. 类

类是一种创建可重用组件的方式。它们就像饼干模具——你定义一次形状，然后可以制作尽可能多的饼干（对象）！

class Student {
name: string;
grade: number;

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

study() {
console.log(`${this.name} is studying hard!`);
}
}

let bob = new Student("Bob", 10);
bob.study(); // 输出："Bob is studying hard!"

在这里，我们创建了一个Student类，它有属性（name和grade）和一个方法（study）。我们可以使用这个类创建尽可能多的学生。

3. 类型别名

类型别名允许我们为类型创建新的名称。它们在创建复杂类型或给现有类型提供更有意义的名称时很有用。

type Point = {
x: number;
y: number;
};

let center: Point = { x: 0, y: 0 };

在这个例子中，我们创建了一个Point类型，它代表二维空间中的一个点。这是将相关属性分组在一起的一个简单方法。

4. 联合类型

联合类型允许一个值是几种类型中的一种。就像说，“这个可以是这个或那个。”

type Result = number | string;

function getResult(value: boolean): Result {
return value ? "Success" : 404;
}

在这里，Result可以是数字或字符串。这在值根据某些条件可能是不同类型时很有用。

5. 交叉类型

交叉类型将多个类型组合成一个类型。就像说，“这个必须是这个AND那个。”

interface Colorful {
color: string;
}

interface Circle {
radius: number;
}

type ColorfulCircle = Colorful & Circle;

let myCircle: ColorfulCircle = {
color: "red",
radius: 5
};

在这个例子中，ColorfulCircle既是Colorful也是Circle。它必须有color和radius。

就这样！我们已经覆盖了TypeScript类型的基础，从灵活的any类型到内置类型和用户定义类型。记住，TypeScript中的类型就像你的编程超能力——它们帮助你编写更干净、更可靠的代码，并在它们成为问题之前捕获错误。

在你继续TypeScript之旅时，请尝试以不同的方式组合这些类型。不要害怕犯错——这是我们学习的方式！在你意识到之前，你将像专业人士一样快速编写代码，创建健壮且无错误的代码。

快乐编码，愿你的类型始终强大！

Credits: Image by storyset