头图

今天我们要一起动手写一个简单的 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 这将是一个字符串类型的变量。

这个类型注解有两个好处:

  1. 编译时检查:如果我们在代码中错误地将 message 赋值为一个数字或其他非字符串的类型,TypeScript 会在编译时就报错,帮我们避免了可能的运行时错误。
  2. 提高可读性:类型注解使代码更加清晰,让别人一眼就知道 message 应该是一个字符串。

2.3 问题:为什么不直接写 JavaScript?

你可能会问:既然 TypeScript 最终会被编译成 JavaScript,为什么还要使用 TypeScript 呢?为什么不直接写 JavaScript?

下面是 TypeScript 相比于纯 JavaScript 的几个好处:

  1. 静态类型检查:在 TypeScript 中,你可以为变量、函数等指定类型,编译器会提前帮你检查类型是否正确。而 JavaScript 没有这个特性,运行时才会出错。
  2. 更好的开发体验:TypeScript 提供了代码补全、类型推断等功能,开发工具(如 VS Code)能更加智能地帮你编写代码。这让你在编程时更高效、更少出错。
  3. 更适合大型项目: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 之旅才刚刚开始!


轻口味
25.1k 声望4.2k 粉丝

移动端十年老人,主要做IM、音视频、AI方向,目前在做鸿蒙化适配,欢迎这些方向的同学交流:wodekouwei