安装TypeScript开发环境详解（新手必看）

TypeScript 程序无法在浏览器或者 Node 环境中直接运行，这一点可以通过实操来证实。

先创建一个名为 typescript-setup 的空目录，然后在此目录下新建一个 TypeScript 程序文件 helloWorld.ts，并编写一段简单的 TypeScript 代码，指定变量 hi 的类型为字符串类型。

typescript-setup/helloWorld.ts 文件代码如下：

const hi: string = '你好，这是TypeScript 程序文件';
console.log(hi);

现在新建一个 index.html 网页，并在该网页中利用 script 标签引入 helloWorld.ts 文件，打开 Vue 开发者调试工具的控制台，则会看到错误内容显示，表明无法正常运行 TypeScript 程序文件，如下图所示。

图 1 控制台提示错误

typescript-setup/index.html 文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TypeScript</title>
</head>
<body>
    <script src="./helloWorld.ts"></script>
</body>
</html>

读者可能会想，通过 node 命令运行代码是不是就不会报错了呢？下面尝试在 Node 环境中运行代码，命令如下：

node helloWorld.ts

运行代码后发现，程序依旧报错，表明在 Node 环境下，TypeScript 程序文件也无法直接正常运行，如下图所示。

图 2 在Node环境下运行代码后程序依旧报错

安装TypeScript环境并测试

在操作系统全局环境下安装 TypeScript 命令行工具，命令如下：

npm install -g typescript

执行上方命令后，系统会在全局环境下提供 tsc 命令。安装完成之后，我们就可以在任意环境下执行 tsc 命令将 .ts 文件编译为 .js 文件。

再来编译前面的 TypeScript 程序文件只需执行下方命令即可：

tsc helloWorld.ts

此时在 helloWorld.ts 文件的同级目录下会产生一个 helloWorld.js 文件，代码内容已经被编译成下方的 JavaScript 代码：

var hi = '你好，这是TypeScript 程序文件';
console.log(hi);

那么在 HTML 中也不能再引入“.ts”文件了，而是需要替换成编译以后的“.js”文件，此时浏览器能够正常运行当前的程序。

修改后的 typescript-setup/index.html 文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TypeScript</title>
</head>
<body>
    <script src="./helloWorld.js"></script>
</body>
</html>

在 Node 环境下测试“.js”文件，运行的结果也是正常的，命令如下：

node helloWorld.js

因此，无论是在浏览器环境下，还是在 Node 环境下，TypeScript 程序都是不能直接运行的。

安装TypeScript开发环境详解（新手必看）

安装TypeScript环境并测试

相关文章