构建你的 Helloworld

以经典的 helloworld 演示，如何构建你的第一个 TypeScript 应用。

首先，安装 TypeScript：首先，确保在本地系统上安装了 Node.js。然后打开终端或命令提示符并运行以下命令安装 TypeScript

npm install -g typescript

创建项目文件夹：在计算机上选择一个适当的位置创建一个新的项目文件夹，并进入该文件夹。
初始化项目：在项目文件夹中运行以下命令，初始化一个新的 Node.js 项目：
创建 TypeScript 文件：在项目文件夹中创建一个名为index.ts的 TypeScript 文件，并将以下代码复制到文件中：

typescript

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

let userName = "World";
sayHello(userName);

编译 TypeScript 文件：在终端或命令提示符中，进入项目文件夹并运行以下命令，将 TypeScript 文件编译为 JavaScript 文件：

bash

tsc index.ts

这将生成一个名为index.js的 JavaScript 文件。 6. 运行程序：运行以下命令来执行生成的 JavaScript 文件：

bash

node index.js

此时，控制台将输出Hello, World! 恭喜！您已经成功使用 TypeScript 构建了一个简单的 Hello World 程序。值得一提的是，如果您希望在开发过程中自动编译 TypeScript 文件，可以在终端或命令提示符中使用以下命令：

bash

tsc index.ts --watch

这将在 TypeScript 文件被修改时自动重新编译它。

在 web 项目中使用时

首先，使用的方式有很多种，但最基础的就是编译为 js，在 html 文件中应用。除此之外，还可以在 webpack 中配置 loader 进行打包。下面我们以直接引用举例。在上面的代码中 index.ts 通过编译后，输出 js 文件，此时，创建一个 HTML 文件，并引用 index.js，就可以直接运行了。

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./index.js"></script>
    <script>
      window.onload = function () {
        sayHello("World");
      };
    </script>
  </head>
  <body></body>
</html>

保存为index.html 在浏览器里打开运行这个应用！

构建你的 Helloworld ​

在 web 项目中使用时 ​

构建你的 Helloworld

在 web 项目中使用时