一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

第一步

在自己的工作目录 npm init 初始化项目,填写项目相关信息。

第二步

安装 TypeScript

我本人最近喜欢使用 pnpm 包管理工具。

在终端输入安装命令 pnpm add -g typescript 这里我选择全局安装，因为 ts 本生自带了一个叫tsc的编译工具,我安装在全局是为了后续的使用方便。

上面的两步就已经搭建了最简单的开发环境

我们来测试一下

创建一个ts结尾的文件。

在ts文件中,可以写任何的 js 代码, ts 并非是一种强制的类型检查,所以你可以用也可以不使用(这样就没意义了)

    //表示 say 是一个字符创类型
    const say:string = 'hello';

上面写好 ts 代码之后,接下来使用 tsc 编译上面的 ts 代码。

    tsc index.ts

执行完之后就会发现,在目录下多了一个同名的 js 文件。

js文件就是ts编译之后的代码。

从上面的截图,细心的你可能已经发现了问题,ts文件中有一个明显的错误,我们来查看是什么错误。

意思就是,这个变量 say 经存在了,不能从新在声明.

为什么会出现这样的错误?

ts 不知道你现在所处的是什么环境,默认情况下,ts会做出下面几种假设:

1.假设当前的执行环境是 dom (浏览器环境) 代码提示会有浏览器中的对象

2.如果代码中没有使用模块化语句 （import、export),便认为改代码是全局执行的(所以就能检测到其他文件中的变量重名)--这也是报错的原因

3.编译的目标代码是ES3(最大的兼容性)

更改以上的假设

1.使用tsc命令行的时候加上选项(不推荐)

2.使用ts配置文件,来更改编译选项(推荐)

创建ts配置文件

可以使用手动创建 tsconfig.json 也可以使用 tsc --init自动生成 tsconfig.json 文件(推荐)

通过命令行生成的配置文件里面大量配置信息

介绍一些简单的配置

compilerOptions 对象下就是默认的编译选项的配置

compilerOptions.target 表示编译的结果使用那一套 ES 标准(默认ES3), 我们可以修改为 ES7 但是注意不能直接写 ES7 以为官网对于版本的叫法是按照-年份来命名的,所以这里的 ES7 实际上是就是 es2016
compilerOptions.module 表示编译目标使用的 模块化 标准。

配置好上面的信息,就不错报错了,因为 const 编译为 es2016 还是 const,因为配置了 module 所以 ts 认为开始了模块化,所以就不会检测其它文件中的重名变量

当我们再次使用 tsc 命令的时候,这里需要注意:使用了配置文件之后,使用 tsc 进行编译时, 不能跟上文件名, 如果跟上文件名, 就会忽略配置文件。（所以再次编译就需要输入 tsc 即可）

我们来查看这次编译的结果

到这里算是解决的全局变量冲突的问题 但是代码提示依旧会有浏览器的对象存在(因为 ts 默认浏览器环境)

compilerOptions.lib 表示默认情况下所使用的环境, 改配置的取值很多所以使用一个 [] 来表示。

我们可以配置为 ["ES2016"],这时去 ts 文件中就没有浏览器环境的对象了,因为没有配置,想要使用浏览器环境可以配置为 ["ES2016","DOM"] 这代表着, 既可以使用 ES2016 的语法, 也可以使用 浏览器 环境的对象

注意: lib 没有 node 环境的配置(ts出现的时间要早与nodejs)。怎么再能使用 node 环境的配置呢?

这里需要安装一个第三方库 @types/node

@types 是一个 ts 官方的类型库,其中包含了很多对 js 代码的类型描述,解释这句话:比如我们想使用 lodash 来配合开发我们的程序,但是这些第三方库不是使用 ts 语言编写的, 我们在 ts 文件中可以使用 js 库但问题在于,用 js 书写的代码是没有 类型检查 的,所以我们希望可以对第三方库进行 类型检查, 所以这个时候就可以去 @types 这个库里面找一找有没有 lodash 的类型库。

我们能在找到 @types/lodash 它就可以为我们的 lodash 库添加 类型定义

安装 node 环境的类型定义库 @types/node

pnpm add -D @types/node

安装完成之后, 不需要配置 lib 选项, 我们就可以在 ts 文件中使用 node 环境的对象了。

进行到这里我们要对工程目录进行统一, 必须所有的代码我们都需要放在 src 目录下, 但是将代码放入 src 目录下之后, 执行 tsc 命令,它会将整个工程的 ts 代码都编译一遍,这并不是我们想要的,所以需要配置一下。

include 是一个 [] 表示需要编译的文件夹。

这里配置为 ["./src"] 之后, 在运行 tsc 命令, 除了 ./src 下面的代码会被编译, 其他 ts 文件将不会被编译。

如果想配置编译指定文件,可以配置 files = ["./src/index.ts"] 那么 tsc 只会编译 ./src/index.ts 文件以及改文件所依赖的其它文件。

目前的编译结果是放在编译文件的同路径下,为了将编译的结果放在指定的目录下可以配置:

compilerOptions.outDir 一般配置为 "./dist"

到这里我们的配置文件大概是下面的样子

    {
      "compilerOptions": {
        "target": "es2016",
        "module": "CommonJS",
        "lib": ["ES2016"],
        "outDir": "./dist"
      },
      "include": ["./src/"]
    }

现在执行文件的步骤为

    tsc
    node ./dist/index.js

每次改动代码都要编译一遍在执行一遍, 有点太繁琐了, 所以我们要学会偷懒, 简化流程。

使用第三库简化流程

ts-node: 将 ts 代码在内存中完成编译, 同时完成运行

安装一下: pnpm add -g ts-node

然后就可以执行 ts-node src/index.ts 这样就可以编译 ts 并运行

但是依旧感觉很麻烦, 我们在偷懒一下, 有没有什么可以监听文件的变化并且编译运行的手段呢?(必须的有)

nodemon: 检测文件变化并执行指定的程序

安装一下: pnpm add -D nodemon

命令行使用: nodemon --exce ts-node src/index.ts

翻译: 监听文件变化，当文件变化的时候去运行 ts-node src/index.ts 命令, 到这里写代码就很快乐了

优化: 可以将上面的命令写在 package.json 形成一个脚本。

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

就可以使用 npm run dev 来启动工程了

再次优化: nodemon 监听的范围太广了, 默认是整个工程。但是我只希望监听 src 目录的 ts 文件变化。可以在修改脚本为

"scripts": {
    "dev": "nodemon --watch src -e ts --exec ts-node src/index.ts"
 }

翻译: nodemon 之监听 src 下面的 ts 后缀名的文件变化, 在执行 ts-node src/index.ts 命令。

到此一个在 node 中简单的 ts 开发环境已经搭建好了

总结

该搭建流程适合初学 ts 的小白同志, 大佬出门右拐。至于 ts 中的其他配置请自行前往官网了解。

小白在node中搭建 typescript 开发环境

第一步

第二步