今天我们要一起动手写一个简单的 TypeScript 程序——就是那个大家都知道的经典“Hello World”程序。虽然很简单,但它将帮助我们确认一切设置正常,并且我们能开始使用 TypeScript 来编写代码了!
2.1 我们来写一个“Hello World”程序吧
首先,我们来创建一个简单的程序,打印一行文本:“Hello, TypeScript!”看似很简单,但在这背后,我们可以了解很多 TypeScript 的基础知识。
2.1.1 第一步:创建一个 TypeScript 文件
假设你已经安装好了 Node.js 和 TypeScript,接下来我们来创建一个文件。打开你的编辑器(推荐使用VSCode),创建一个新文件,命名为 hello.ts
。这就是我们要编写 TypeScript 代码的地方。
在 hello.ts
文件中,输入以下代码:
let message: string = "Hello, TypeScript!";
console.log(message);
这里的代码其实不难理解。我们定义了一个变量 message
,并指定它的类型是 string
(字符串)。接着,我们用 console.log()
将 message
输出到控制台。
2.1.2 第二步:编译 TypeScript 代码
接下来,我们需要将 TypeScript 编译成 JavaScript,才能在浏览器或 Node.js 中运行。你可以在终端(命令行)中执行以下命令:
tsc hello.ts
如果一切顺利,你会看到一个新的文件 hello.js
被生成出来。它是 TypeScript 编译后的 JavaScript 代码,内容类似这样:
var message = "Hello, TypeScript!";
console.log(message);
可以看到,编译后的代码和我们写的 TypeScript 很像,但是没有了类型注解,变成了标准的 JavaScript。
2.1.3 第三步:运行 JavaScript 文件
现在,运行 JavaScript 文件,看看效果!在终端中执行以下命令:
node hello.js
你应该会看到以下输出:
Hello, TypeScript!
哇,成功了!我们刚刚运行了第一个 TypeScript 程序。
2.2 深入一点:TypeScript的类型系统
虽然这个程序非常简单,但它给我们展示了 TypeScript 的一些关键特性,特别是 类型注解。我们给 message
变量加上了 string
类型的注解,告诉 TypeScript 这将是一个字符串类型的变量。
这个类型注解有两个好处:
- 编译时检查:如果我们在代码中错误地将
message
赋值为一个数字或其他非字符串的类型,TypeScript 会在编译时就报错,帮我们避免了可能的运行时错误。 - 提高可读性:类型注解使代码更加清晰,让别人一眼就知道
message
应该是一个字符串。
2.3 问题:为什么不直接写 JavaScript?
你可能会问:既然 TypeScript 最终会被编译成 JavaScript,为什么还要使用 TypeScript 呢?为什么不直接写 JavaScript?
下面是 TypeScript 相比于纯 JavaScript 的几个好处:
- 静态类型检查:在 TypeScript 中,你可以为变量、函数等指定类型,编译器会提前帮你检查类型是否正确。而 JavaScript 没有这个特性,运行时才会出错。
- 更好的开发体验:TypeScript 提供了代码补全、类型推断等功能,开发工具(如 VS Code)能更加智能地帮你编写代码。这让你在编程时更高效、更少出错。
- 更适合大型项目:TypeScript 的类型系统能帮助我们在复杂的应用中更好地管理代码,减少 bug 的产生。它适合团队合作和大型项目的开发,尤其是当你需要维护很多代码时。
2.4 小贴士:自动编译(Watch Mode)
每次修改 TypeScript 文件后,我们都需要手动运行 tsc
命令来编译。虽然这对学习来说没问题,但在实际开发中,频繁手动编译比较麻烦。
幸好,TypeScript 提供了 watch 模式,让我们在代码变动时自动进行编译。你可以运行下面的命令:
tsc -w
一旦启用 watch 模式,TypeScript 会监控所有 .ts
文件的变化,当文件发生更改时,它会自动重新编译并生成对应的 .js
文件。这就像是让 TypeScript 永远保持在线状态,帮我们省去不少麻烦。
2.5 总结:成功运行第一个程序
恭喜你!你已经成功写出了第一个 TypeScript 程序,并学会了如何将 TypeScript 代码编译成 JavaScript 运行。虽然这个程序非常简单,但它帮助我们了解了 TypeScript 的核心概念:类型注解、编译、以及如何运行我们的程序。
后面我们会逐步深入了解 TypeScript 的更多特性,包括函数、类、接口等。所以,保持热情,我们的 TypeScript 之旅才刚刚开始!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。