TypeScript环境搭建与编译执行

PiZriY
287 阅读2分钟

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

环境搭建

TypeScript 编写的程序不能直接通过浏览器执行，我们需要通过编辑器把TypeScript代码编译为JavaScript代码

TypeScript的编译器是基于Node.js的，所以我们先安装Node.js

安装Node.js

Node.js官网：nodejs.org/zh-cn/

安装过程就不多说了，安装完成之后，通过命令行工具查看Node版本

    查看当前Node版本命令
    node -v

安装TypeScript编译器

通过NPM包管理工具安装TypeScript编译器

npm i -g typescript

安装完成之后，我们可以通过tsc来调用编译器

查看当前编译器版本命令
tsc -v

初体验

默认情况下，TypeScript的文件后缀为.ts

TypeScript代码

let str: string = '韩雷雷'

编译执行

使用我们安装的TypeScript编译器tsc对.ts文件进行编译

tsc ./test.ts

默认情况下会在当前文件所在的目录下生成同名的js文件

编译选项

编译命令tsc 还支持许昌的编译选项，这里我们先看几个常用的，后续用到的我会在后边的文章中记录下来

outDir

指定编译文件输出目录

tsc --outDir ./dist ./test.ts

target

指定编译的代码版本，默认是ES3

tsc --outDir ./dist --target ES6 ./test.ts

watch

在监听模式下运行，当文件发生改变，自动编译

tsc --outDir ./dist --target ES6 --watch ./test.ts

我们也算是基本上了解tsc命令，但是这样每次编译都输入这么长的命令会很麻烦，并且很容易出错，还好TypeScript为我们提供了一个简单快捷的方式，编译配置文件:tsconfig.json，我们可以把我们需要的配置项配置到这个文件中

编译配置文件

我们可以把编译的一些选项保存在一个指定的 json 文件中，默认情况下 tsc 命令运行的时候会自动 去加载运行命令所在的目录下的 tsconfig.json 文件，配置文件格式如下

{
    "compilerOptions":{
        "outDir":"./dist",
        "target":"ES2016",
        "watch":true
    }
    //**：所有目录(包括子目录),
    // *: 所有文件，也可以指定文件类型，比如：*.ts
    "include":["./**/*"]
}

有了单独的配置文件，我们就可以直接运行了

tsc

指定加载的配置文件

使用--project或-p指定配置文件目录，或默认加载该目录下的tsconfig.json文件

当前命令就代表 执行configs目录下的tsconfig.json
tsc -p ./configs

也可以指定某个具体的配置文件

当前命令就代表 执行configs目录下的ts.json文件
tsc -p ./configs/ts.json
avatar
文章
阅读
粉丝