72小时带你光速入门TypeScript - 环境搭建02

上篇文章里，我们初接触了TypeScript。再一起回顾下上篇文章的知识点：

Ts默认的运行容器是DOM环境，所以有些情况下，声明全局变量会报错。
编译Ts的方式有2种，一种是 没有tsconfig配置文件 、一种是 有tsconfig配置文件 。无配置文件，编译文件需要使用tsc+文件名的方式；有配置文件，直接使用 tsc即可。

如何搭建简易Ts后端环境？

阶段一

首先，你肯定要有个目录，目录名称无所谓，只要是英文就行。这里我就暂时取一个"EnvBuild"吧。

然后在当前目录下初始化工作区域，执行以下命令：

csharp 复制代码

npm init -y

上面的命令执行成功后，我们在根目录下新建一个src目录，然后在src下新建一个index.ts文件。

在上一节我们还说过，由于Ts默认的运行环境是浏览器，导致声明的部分变量会报错，因此我们需要配置tsconfig来绕过这一设定。

最后整个项目的形态应该是这样的：

css 复制代码

| - EnvBuild
    | - package.json
    | - tsconfig.json
    | - src
        | - index.ts

现在我们来一点点的看一下目前的项目有什么问题。

首先，编写src下的index.ts文件内容：

ini 复制代码

let name:string = 'hello world!';
console.log('name:', name);

首先你会看到name报错了。因为Ts默认的运行环境是浏览器环境，而浏览器下存在了name这个全局变量，因此报错合理。又因为我们此刻搭建的是后端环境，所以，我们这里采取的方案是更改这个项目的Ts运行环境。这里有个细节啊，上篇文章我们知道通过"lib"选项可以指定当前Ts的运行环境。要么浏览器环境，要么非浏览器环境。但是"lib"选项的值里面可没有"node"选项，所以我们只能选择非"dom"的选项，比如"es2016"。

json 复制代码

{
    "compilerOptions": {
        "lib": ["es2016"]
    }
}

现在再回到index.ts文件里，我们发现name变量的问题倒是解决了，但是console对象又报错了。因为全局对象里没有console对象。是的，这是怪异的，所以在lib选项的解释里我说的是"要么是浏览器环境，要么是非浏览器环境"。那我就想指定当前环境是node环境，我该如何操作呢？我们可以通过安装@types/node这个第三方库来解决。

bash 复制代码

npm install -D @types/node

安装成功后，我们发现console也不报错了。这是因为Ts默认会从node_modules目录下的@types文件夹下面读取模块的类型定义。

这里再多说一嘴：

1、@types是Ts官方推出的类型库，可以用来获取代码提示与类型检查。当我们使用一些第三方库，比如axios，我们想要获取一些方法的提示，那就可以安装@types/axios来达到这一个效果。

2、安装这个库，仅仅是让你的代码在编译阶段能够过去。Ts的项目的运行流程分为2个步骤，第一步是编译（也就是将Ts转换为Js），第二步执行Js文件。

阶段二

现在代码不报错了，我们来运行一下项目：

bash 复制代码

1、tsc
2、node src/index.js

试想一下，我们每次修改文件内容，都要重新执行上面的步骤，麻不麻烦。如果不麻烦，那这个阶段你可以直接跳过。如果你觉得麻烦，我们可以使用ts-node来将上面的命令合成一条命令。

ts-node这个第三方库有以下好处：

一条命令当两条命令使用，无需我们手动再去执行node命令。
它会将编译结果保存到内存里，这也更符合项目开发的预期。因为编译后的文件只有在打包时对开发者有用，在开发时我们可以直接看到源代码。

安装命令如下：

npm install -g ts-node

修改项目启动命令如下：

bash 复制代码

ts-node src/index.js

不出意外的话，你的项目应该已经成功运行了。这个命令对我们来说可能还有点长，是否还有优化的空间？

答案是肯定的，我们可以将这个命令移动到npm scripts里。

修改package.json文件里的scripts字段如下：

json 复制代码

// package.json文件
{
    "scripts": {
        "start": "ts-node src/index.ts"
    }
}

以后我们再启动项目时，就可以直接使用"npm run start"来启动了。

阶段三

每次修改文件内容，我们都要终止当前进程，然后再重启项目才能看到最新的代码运行情况，是否可以加上热更新呢？答案也是肯定的。Nodemon这个库就是干这件事的。它可以监听文件内容变化，并且自动重启服务。同时它也支持了多种配置，我们就不在这里细说，只做基础配置。想要了解Nodemon的详细用法，可以查看官网。

首先安装Nodemon，命令如下：

npm install -g nodemon

然后，我们修改一下我们的启动命令如下：

json 复制代码

{
    "scripts": {
        "start": "nodemon --exec ts-node src/index.ts"
    }
}

//上面的命令表示：使用nodemon来启动并监测项目文件的改动，只要文件发生改动，就执行"ts-node src/index.t"命令。

从此以后，当我们修改index.ts文件后，控制台都能够实时的看到最新的代码效果。

阶段四

上面都是一些开发态的一些命令，我们来新增一条打包命令（build），修改package.json文件里的scripts字段：

json 复制代码

{
    "scripts": {
        "start": "nodemon --exec ts-node src/index.ts",
        "build": "tsc"
    }
}

此时我们在src目录下新增一个page目录，然后再随便写点ts文件，并且执行一下build命令，效果如下：

我们会发现build后的js文件到处都是，不方便我们提取。所以我们需要通过outDir命令将打包后的文件放到具体的位置。修改tsconfig.json文件内容如下：

json 复制代码

{
    "compilerOptions": {
        "lib": ["es2016"],
        "outDir": "./dist"
    }
}

此时我们再去执行打包命令发现，打包后的js文件都以相同的目录格式放到了指定的位置。

至此，一个简易的Ts运行环境搭建完毕。

如何搭建Ts前端运行环境？

我们以React项目为例，create-react-app支持创建TypeScript项目，执行命令如下：

lua 复制代码

npx create-react-app <project-name> --template typescript

当然，如果你是从0搭建的前端环境，现代主流的项目构建工具都支持接入TypeScript。我们以webpack为例，ts-loader可以充当Ts的翻译官。

安装ts-loader命令如下：

npm install -D typescript ts-loader

webpack配置如下：

css 复制代码

module.exports = {
    module: {
        rules: [
            { test: /.ts$/, use: 'ts-loader' }
        ]
    }
}

然后根据项目需要，动态配置tsconfig文件即可。

当然，接入Ts的方法很多，这里只是说了其中一种方法。

最后

好啦，本期内容到这里就结束啦，后面的文章我们来讲解具体的Ts使用方法。希望我的内容对你有帮助～～