TypeScript 安装与使用教程

发布时间：2023-03-30 08:41:41 所属栏目：教程来源：

导读：本节介绍 TypeScript 的安装与两种使用方式，大家根据本节所介绍的流程一步步操作，相信很快就能编写自己的 TypeScript 代码。

环境准备：

安装 Node.js 环境（version: 8.14.0+)
确保 npm 或者 yarn 可用
到

本节介绍 TypeScript 的安装与两种使用方式，大家根据本节所介绍的流程一步步操作，相信很快就能编写自己的 TypeScript 代码。

环境准备：

安装 Node.js 环境（version: 8.14.0+)
确保 npm 或者 yarn 可用
到 nodejs官网根据自己的操作系统下载对应 Node.js 版本，Node.js 自带 npm。安装后，在终端执行如下命令，检查是否安装成功：

~ node -v
v10.16.3
~ npm -v
6.9.0

通过 npm 全局安装 TypeScript：

npm install -g typescript
如果提示权限不足，请使用超管权限安装

TypeScript 在全局安装后，我们可以在任意位置使用 tsc 命令，tsc 命令负责编译 TypeScript 文件为 JavaScript 文件。

文中所用 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 文件的编译过程即可。

在进行简单的语法练习时，可以通过上面介绍的 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 文件夹，里面的内容就是项目的编译结果了！

本节主要介绍了 TypeScript 的安装与两种使用方式：

全局 tsc 命令直接编译 ts 文件。
工程化方案，通过 script 脚本运行编译。
其中第二种工程化方案是我们在实际开发中使用较多的，毕竟 TypeScript 就是为大型项目而生的。希望大家多加练习，熟练使用。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!