构建您的第一个 Hello TypeScript 应用程序 - TypeScript 入门教程

如果你阅读了 TypeScript 教程系列的上一章，你已经学习了 如何安装 Node.js 和 TypeScript，并且可能已经安装了它们。现在，是时候更进一步学习如何用 TypeScript 编写代码了。

在本文中，我们将学习如何创建一个简单的 HelloWorld 应用，编译它并运行它。请继续阅读以了解更多信息。

入门

你可以使用记事本或其他任何文本编辑器来编写 TypeScript 代码。在这里，在这个 TypeScript 教程系列中，我们将使用 Visual Studio Code 编辑器来演示每个代码片段。你可以直接从 Microsoft 网站下载 Visual Studio Code。链接如下：https://vscode.js.cn/Download。

下载完成后，双击安装程序文件并按照逐步说明在你的系统中安装 Visual Studio Code。确保你已经 成功地在你的开发环境中安装了 Node.js 和 TypeScript。

如何操作...

打开 Visual Studio Code 编辑器并 按照简单的步骤创建你的第一个 TypeScript 应用，它将在控制台输出中打印一条消息。

• 在 Visual Studio Code 内部，点击如下图所示的 新建 图标

  

• 为文件指定一个名称，并使用 .ts 扩展名。我们将其命名为 HelloWorld.ts。Visual Studio Code 将根据提供的文件扩展名自动将其识别为 TypeScript 文件。

  

• 现在，在代码编辑器中，输入以下代码行，它将类似于以下截图

  

  // define the class with constructor
  class Author {
      constructor (public Name: string) { }
  }
  
  // create the instance of the class
  let author = new Author("Kunal Chowdhury");
  
  // print the information in the console
  console.log("\nHello Readers,");
  console.log("Thanks for visiting my blog");
  console.log(`\t~ ${author.Name}`);

• 现在打开一个控制台窗口 (cmd.exe) 并导航到你创建 HelloWorld.ts 文件的路径。
• 在控制台窗口中，输入以下命令来编译 TypeScript 文件 (HelloWorld.ts) 并生成编译器输出。tsc 代表编译器名称，后跟不带扩展名的 TypeScript 文件。这将生成与同一目录中的 HelloWorld.js 文件。tsc HelloWorld
• 现在在控制台窗口中输入以下命令来运行我们编写的 TypeScript 代码。基本上，它使用 Node.js 执行 JavaScript，并将输出写入屏幕 (使用 console.log(...) 方法)。node HelloWorld

  

工作原理

当你使用 tsc 编译器编译 TypeScript 文件 (.ts) 时，它会生成一个 JavaScript 文件 (.js)。如我们在上面的演示中所见，可以使用控制台窗口中的 node 命令来执行 JavaScript。console.log(...) 方法用于将一些 strings 写入输出窗口。我们将在 TypeScript 教程的后续部分讨论所有这些内容。

👉 TypeScript 教程 - TypeScript 入门