配置一个 TypeScript(TS)的编写环境涉及多个步骤,包括安装必要的软件、配置项目文件以及选择适合的开发工具。以下是一个详细的配置指南:
一、安装 Node.js 和 npm
- 下载 Node.js:
- 访问 Node.js 官网 下载最新的 LTS 版本。
- 根据操作系统选择对应的安装程序进行安装。
- 检查安装结果:
- 打开终端(或命令提示符),输入
node -v
和npm -v
,检查 Node.js 和 npm 是否已成功安装。
- 打开终端(或命令提示符),输入
二、安装 TypeScript 编译器
- 全局安装 TypeScript:
- 在终端中运行
npm install -g typescript
,全局安装 TypeScript 编译器。 - 安装完成后,可以通过
tsc -v
命令检查安装是否成功。
- 在终端中运行
- 在项目中安装 TypeScript:
- 创建一个新的项目文件夹,并进入该文件夹。
- 初始化一个新的 npm 项目,生成
package.json
文件。 -
npm init -y
- 在项目中运行
npm install typescript --save-dev
,将 TypeScript 作为开发依赖安装到项目中。
三、配置 TypeScript 项目
无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称:tsc --init执行时提示“无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。”问题解决 - vickylinj - 博客园
- 创建
tsconfig.json
文件:- 在项目根目录下,使用
tsc --init
命令自动生成tsconfig.json
文件。 - 根据需要编辑
tsconfig.json
文件,配置编译选项,如目标 JavaScript 版本、模块系统、严格类型检查等。
- 在项目根目录下,使用
常见配置项
一、compilerOptions
compilerOptions
是一个对象,用于指定编译器应如何编译TypeScript代码。它包含了许多子选项,以下是一些常见的配置项:
target
- 作用:指定编译输出的JavaScript版本,如"ES3"、"ES5"、"ES2015"(即"ES6")等。
- 示例:
"target": "ES6"
module
- 作用:指定模块解析方式,如"commonjs"、"amd"、"system"、"umd"、"es6"、"es2015"、"esnext"等。
- 示例:
"module": "commonjs"
outDir
- 作用:指定编译输出的目录。
- 示例:
"outDir": "./dist"
strict
- 作用:启用所有严格的类型检查选项。
- 示例:
"strict": true
lib
- 作用:指定编译过程中需要包含的类型定义库,如"es2015"、"dom"等。
- 示例:
"lib": ["es6", "dom"]
rootDir
- 作用:指定输入文件的根目录,用于控制输出目录结构。
- 示例:
"rootDir": "./src"
include
- 作用:指定需要编译的文件路径或文件夹路径,可以使用通配符。
- 示例:
"include": ["src/**/*"]
extends
- 作用:允许一个
tsconfig.json
文件继承另一个tsconfig.json
文件的配置。- 示例:
"extends": "./configs/base"
files
- 作用:明确列出需要编译的文件列表。当使用files时,include和exclude将被忽略。
- 示例:
"files": ["src/index.ts", "src/app.ts"]
baseUrl
- 作用:用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响。
- 示例:
"baseUrl": "./"
paths
- 作用:用于设置模块名到基于baseUrl的路径映射。
- 示例:
"paths": { "*": ["./node_modules/@types", "./typings/*"] }
- 创建项目结构:
- 在项目根目录下创建
src
文件夹,用于存放 TypeScript 源代码。 - 在
src
文件夹中创建一个index.ts
文件,作为项目的入口文件。
- 在项目根目录下创建
四、选择开发工具
- 集成开发环境(IDE):
- 可以选择 Visual Studio Code、WebStorm 等支持 TypeScript 的 IDE。
- 在 IDE 中打开项目文件夹,开始编写 TypeScript 代码。
- 编辑器插件:
- 如果使用不支持 TypeScript 的编辑器,可以安装相应的 TypeScript 插件以获得语法高亮、代码补全等功能。
五、编写和运行 TypeScript 代码
- 编写 TypeScript 代码:
- 在
src/index.ts
文件中编写 TypeScript 代码。
- 在
- 编译 TypeScript 代码:
- 在终端中运行
tsc
命令,根据tsconfig.json
文件的配置编译 TypeScript 代码。 - 编译生成的 JavaScript 文件会存放在指定的输出目录中(如
dist
目录)。
- 在终端中运行
- 运行 JavaScript 代码:
- 使用 Node.js 运行编译后的 JavaScript 文件,例如
node dist/index.js
。 - 或者,可以使用
ts-node
直接运行 TypeScript 文件,而无需手动编译。安装ts-node
和@types/node
后,在终端中运行npx ts-node src/index.ts
即可。
- 使用 Node.js 运行编译后的 JavaScript 文件,例如
六、集成 ESLint(可选)
- 安装 ESLint 及其 TypeScript 插件:
- 在项目中运行
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
。
- 在项目中运行
- 初始化 ESLint 配置:
- 使用
npx eslint --init
命令初始化 ESLint 配置。 - 选择适合项目的配置选项,并生成
.eslintrc.json
文件。
- 使用
- 编辑
.eslintrc.json
文件:- 在
.eslintrc.json
文件中添加 TypeScript 插件和规则。
- 在
- 检查代码:
- 使用
npx eslint src/**/*.ts
命令检查 TypeScript 代码中的语法和风格问题。
- 使用
通过以上步骤,你可以成功配置一个 TypeScript 编写环境,并开始编写、编译和运行 TypeScript 代码。