简体中文

TypeScript 基础

TypeScript 基础类型

TypeScript 控制流

TypeScript 函数

TypeScript 接口

TypeScript 类与对象

TypeScript 高级类型

TypeScript 类型操作

TypeScript 泛型

TypeScript 杂项

TypeScript入门教程：让JavaScript更强大的初学者指南

你好，未来的编程巨星！? 欢迎来到我们的TypeScript教程。我非常高兴能成为你进入TypeScript世界的向导。作为一位有着多年教学经验的编程讲师，我迫不及待地想分享我的知识，并帮助你解锁这门令人惊叹的语言的力量。

TypeScript - Home

TypeScript是什么？

让我们从基础开始。TypeScript就像是JavaScript更酷、更成熟的表亲。它是一种建立在JavaScript之上的编程语言，增加了新特性并帮助在问题成为麻烦之前捕捉到错误。想象JavaScript穿上了一套华丽的西装和单片眼镜——那就是TypeScript！

一个简单的例子

让我们直接从一个简单的例子开始：

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

greet("Alice"); // 输出: Hello, Alice!
greet(123); // 错误: 参数的类型 'number' 无法赋给参数的类型 'string'。

在这个例子中，我们定义了一个名为greet的函数，它接受一个name参数。name: string部分告诉TypeScript，name应该是一个字符串。当我们尝试用数字调用greet时，TypeScript会在我们甚至运行代码之前就捕捉到错误！

为什么学习TypeScript？

你可能在想，“既然已经有了JavaScript，我为什么要麻烦去学习TypeScript？”这是个好问题！以下是一些令人信服的理由：

  1. 及早捕捉错误：TypeScript帮助你发现并修复代码运行之前的错误。
  2. 更好的工具：在编辑器中获取更智能的代码提示和自动完成。
  3. 更清晰的代码：TypeScript使你的代码更容易阅读和理解。
  4. 可扩展性：它非常适合大型项目和团队。

谁应该学习TypeScript？

TypeScript适合每个人！无论你是：

  • 编程的完全初学者
  • 想要提升技能的JavaScript开发者
  • 参与大型应用程序开发的团队一员

TypeScript都能为你提供帮助。它就像是在学习骑自行车时带有辅助轮——在你学习时给你额外的支持，但仍然可以做所有酷炫的动作！

学习TypeScript的前置条件

在我们深入了解之前，以下是你应该了解的内容：

  • 对编程概念（变量、函数等）的基本理解
  • 对JavaScript的熟悉（如果你不太熟悉也没关系！）

如果你没有这些知识，没问题！我们会一边学习一边覆盖这些基础。

TypeScript入门

安装

首先，让我们在电脑上安装TypeScript。打开你的终端并运行：

npm install -g typescript

这将在你的机器上全局安装TypeScript。现在你可以开始编码了！

你的第一个TypeScript程序

让我们写一个计算圆面积的简单程序：

function calculateCircleArea(radius: number): number {
const pi: number = 3.14159;
return pi * radius * radius;
}

const area: number = calculateCircleArea(5);
console.log(`圆的面积是 ${area.toFixed(2)} 平方单位。`);

让我们分解一下：

  1. 我们定义了一个名为calculateCircleArea的函数，它接受一个radius参数，类型为number。
  2. 函数声明后面的: number指定该函数将返回一个数字。
  3. 我们使用公式πr²来计算面积。
  4. 我们用半径5调用该函数并将结果存储在area中。
  5. 最后，我们输出结果，使用toFixed(2)将结果四舍五入到两位小数。

要运行这个程序，将其保存为circle.ts，然后编译并运行它：

tsc circle.ts
node circle.js

你应该看到输出："圆的面积是 78.54 平方单位。"

TypeScript类型

TypeScript的一个超能力就是它的类型系统。让我们探索一些常见的类型：

类型 描述 示例
number 数值 let age: number = 30;
string 文本值 let name: string = "Alice";
boolean 布尔值 let isStudent: boolean = true;
array 值的列表 let fruits: string[] = ["apple", "banana"];
object 键值对 let person: { name: string, age: number } = { name: "Bob", age: 25 };
any 任何类型（谨慎使用！） let data: any = 42;

以下是一个使用多个类型的更复杂例子：

interface Student {
name: string;
age: number;
grades: number[];
isActive: boolean;
}

function printStudentInfo(student: Student): void {
console.log(`姓名: ${student.name}`);
console.log(`年龄: ${student.age}`);
console.log(`平均成绩: ${calculateAverage(student.grades)}`);
console.log(`活跃: ${student.isActive ? "是" : "否"}`);
}

function calculateAverage(grades: number[]): number {
const sum = grades.reduce((acc, grade) => acc + grade, 0);
return sum / grades.length;
}

const alice: Student = {
name: "Alice",
age: 20,
grades: [85, 90, 92],
isActive: true
};

printStudentInfo(alice);

这个例子展示了：

  1. 使用interface定义复杂类型（Student）。
  2. 使用数组和对象。
  3. 在函数参数和返回类型中使用类型注解。
  4. 使用三元运算符进行简洁的if/else逻辑。

编译和执行TypeScript程序

要运行TypeScript程序，你需要先将它们编译成JavaScript。以下是过程：

  1. 编写你的TypeScript代码（例如，app.ts）。
  2. 编译它：tsc app.ts。
  3. 运行生成的JavaScript：node app.js。

专业提示：使用tsc --watch app.ts可以让你在保存更改时自动重新编译！

TypeScript在真实世界中的应用

TypeScript不仅仅用于学习——它在许多流行的库和框架中都有应用：

  • Angular（Google的Web应用程序框架）
  • React（支持TypeScript）
  • Node.js（服务器端JavaScript）
  • Vue.js（支持TypeScript）

学习TypeScript将为使用这些强大的工具打开大门！

结论

恭喜你！你已经迈出了进入TypeScript世界的第一步。我们覆盖了基础知识，但还有更多内容等待你去探索。记住，学习编码就像学习一门新语言——练习、耐心和坚持是关键。

在你继续TypeScript之旅时，不要害怕犯错误。每个错误都是一个学习的机会。继续编码，继续尝试，最重要的是，享受乐趣！

快乐编码，愿你的TypeScript冒险之旅没有错误，充满喜悦！?✨

Credits: Image by storyset

 
下一教程:
TypeScript - 概览