本节介绍 TypeScript 的安装与两种使用方式,大家根据本节所介绍的流程一步步操作,相信很快就能编写自己的 TypeScript 代码。
1. 解释
环境准备:
- 安装
Node.js
环境(version: 8.14.0+) - 确保
npm
或者yarn
可用
到 nodejs官网 根据自己的操作系统下载对应 Node.js 版本,Node.js 自带 npm。安装后,在 终端
执行如下命令,检查是否安装成功:
~ node -v v10.16.3 ~ npm -v 6.9.0
2. TypeScript 安装
通过 npm 全局安装 TypeScript:
npm install -g typescript
如果提示权限不足,请使用超管权限安装
TypeScript 在全局安装后,我们可以在任意位置使用 tsc
命令,tsc
命令负责编译 TypeScript 文件为 JavaScript 文件。
3. TypeScript 使用
3.1 通过全局 tsc 命令编译 TypeScript 代码
文中所用 shell 命令在 Windows 环境可以安装 git bash
创建一个练习目录:
mkdir ts-practice && cd ts-practice
创建一个 ts 文件:
touch enums.ts
文件中写入内容:
// enums.ts export enum TokenType { ACCESS = 'accessToken', REFRESH = 'refreshToken' }
然后通过 tsc
命令编译 ts 文件:
tsc enums.ts
可以看到在同级目录下,生成了一个 enums.js 文件。文中涉及的 TypeScript 语法之后会详细介绍,这里清楚 ts 文件的编译过程即可。
3.2 工程化编译方案
在进行简单的语法练习时,可以通过上面介绍的 tsc
命令来编译 ts 文件,而在实际项目工程中,可以采取另一种工程化方案:
① 在 ts-practice 目录下创建 src 目录:
mkdir src && touch src/index.ts
② 接下来用 npm 进行项目初始化(初始化过程中的交互命令有兴趣可自行查阅相关资料,目前一路按“回车键”即可):
npm init
你会发现目录中多了一个 package.json
文件,它定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、作者、license等信息)。
将 package.json 中入口文件选项改为刚刚创建的 index.ts:
{ "main": "src/index.ts", }
③ 然后,使用 tsc 命令进行初始化:
tsc --init
这时候你会发现目录下又多了一个 tsconfig.json
文件,它指定了用来编译这个项目的根文件和编译选项。
Tips:
- 不带任何输入文件的情况下调用 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"] }
④ 在 package.json 文件中,加入 script 命令以及依赖关系:
{ "name": "ts-practice", "version": "1.0.0", "description": "", "main": "src/index.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "tsc": "tsc" }, "author": "", "license": "ISC", "devDependencies": { "@types/node": "^13.1.1", "typescript": "^3.7.4" } }
⑤ 根据配置文件 package.json 中的配置选项,下载所需模块,也就是配置项目所需的运行和开发环境:
npm install
你会看到多了一个 node_modules 文件夹和一个 package-lock.json 文件,node_modules 文件夹是项目的所有依赖包,package-lock.json 文件将项目依赖包的版本锁定,避免依赖包大版本升级造成不兼容问题。
⑥ 与介绍 tsc 命令时一样,将以下内容写入 index.ts 文件:
// src/index.ts export enum TokenType { ACCESS = 'accessToken', REFRESH = 'refreshToken' }
⑦ 在项目根目录输入编译命令:
npm run tsc
这时候可以看到多了一个 lib
文件夹,里面的内容就是项目的编译结果了! ???
4. 小结
本节主要介绍了 TypeScript 的安装与两种使用方式:
- 全局
tsc
命令直接编译 ts 文件。 - 工程化方案,通过
script 脚本
运行编译。
其中第二种工程化方案是我们在实际开发中使用较多的,毕竟 TypeScript 就是为大型项目而生的。希望大家多加练习,熟练使用。