本节介绍 TypeScript 的安装。
TypeScript 依赖 Node.js 环境,如果你的电脑中没有 Node.js,那么首先要安装 Node.js 环境。可根据自己的操作系统去 nodejs官网 下载对应 Node.js 版本,Node.js 自带 npm。安装后,在终端执行如下命令,检查是否安装成功:
~ node -v
v12.16.1
~ npm -v
6.13.4
NPM 全局安装 TypeScript
如果你的本地环境已经安装了 npm 工具,可以使用以下命令来安装。使用国内镜像:
npm config set registry https://registry.npm.taobao.org
安装 typescript:
npm install -g typescript
如果提示权限不足,请使用超管权限安装。Mac 用户可使用如下命令安装:
sudo npm install -g typescript
安装完成后我们就可以在任意位置使用 tsc
命令,比如查看 TypeScript 的版本号:
$ tsc -v
Version 4.3.4
单文件编译
tsc
命令负责编译 TypeScript 文件为 JavaScript 文件。然后我们新建一个 app.ts 的文件,代码如下:
var message:string = "Hello World"
console.log(message)
通常使用 .ts
作为 TypeScript 代码文件的扩展名。然后执行以下命令将 TypeScript 转换为 JavaScript 代码:
tsc app.ts
这时候再当前目录下(与 app.ts 同一目录)就会生成一个 app.js 文件,代码如下:
var message = "Hello World";
console.log(message);
使用 node 命令来执行 app.js 文件:
$ node app.js
Hello World
TypeScript 转换为 JavaScript 过程如下图:
对于刚入门 TypeScript 的同学,也可以直接使用线上的 TypeScript Playground 来学习新的语法或新特性。
工程化编译
所谓工程化编译是指利用 TypeScript 开发大型系统时,会有较多的 .ts
文件需要编译,我们不可能手动一个一个敲命令,因此可以通过工程化编译方案解决这个问题。
a. 在工程目录下创建 src 目录 :
mkdir src && touch src/index.ts
b. 用 npm 进行项目初始化(初始化过程中的交互命令可自行查阅相关资料,目前只须一路按“回车键”即可):
npm init
执行命令后,你会发现目录中多了一个 package.json
文件,该文件定义了项目所需要的各种模块,以及项目的配置信息(比如名称、版本、作者、license等信息)。
用文本编辑工具打开 package.json 文件,将其中的入口文件配置改为刚刚创建的 index.ts:
{
"name": "helloworld",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
c. 使用 tsc 命令进行初始化 :
tsc --init
这时候目录下又多了一个 tsconfig.json
文件,该文件指定了用来编译这个项目的根文件和编译选项。注意:
- 不带任何输入文件的情况下调用 tsc 命令,编译器会从当前目录开始去查找 tsconfig.json 文件,逐级向上搜索父目录。
- 当命令行上指定了输入文件时,tsconfig.json 文件会被忽略。
我们将 tsconfig.json
文件稍作修改:
{
"compilerOptions": {
"target": "ESNext", /* 支持 ES6 语法 */
"module": "commonjs",
"outDir": "./lib",
"rootDir": "./src",
"declaration": true, /* 生成相应的.d.ts文件 */
"strict": true,
"strictNullChecks": false,
"noImplicitThis": true
},
"exclude": ["node_modules", "lib", "**/*.test.ts"],
"include": ["src"]
}
d. 根据配置文件 package.json 中的配置选项,下载所需模块,也就是配置项目所需的运行和开发环境 :
npm install
此时工程目录下多了一个 node_modules
文件夹和一个 package-lock.json
文件,node_modules
文件夹是项目的所有依赖包,package-lock.json
文件将项目依赖包的版本锁定,避免依赖包大版本升级造成不兼容问题。
e. 将以下内容写入 index.ts 文件:
// src/index.ts
export enum TokenType {
ACCESS = 'accessToken',
REFRESH = 'refreshToken'
}
f. 在项目根目录输入编译命令:
npm run tsc
这时候工程目录下便多了一个 lib
文件夹,里面的内容就是项目的编译结果了!
4. 小结
本节主要介绍了 TypeScript 的安装与两种使用方式:
- 全局
tsc
命令直接编译 ts 文件。 - 工程化方案,通过
script 脚本
运行编译。