配置Typescript环境

配置一个 TypeScript（TS）的编写环境涉及多个步骤，包括安装必要的软件、配置项目文件以及选择适合的开发工具。以下是一个详细的配置指南：

一、安装 Node.js 和 npm

1. 下载 Node.js：
   • 访问 Node.js 官网 下载最新的 LTS 版本。
   • 根据操作系统选择对应的安装程序进行安装。
2. 检查安装结果：
   • 打开终端（或命令提示符），输入 node -v 和 npm -v，检查 Node.js 和 npm 是否已成功安装。

二、安装 TypeScript 编译器

1. 全局安装 TypeScript：
   • 在终端中运行 npm install -g typescript，全局安装 TypeScript 编译器。
   • 安装完成后，可以通过 tsc -v 命令检查安装是否成功。
2. 在项目中安装 TypeScript：
   • 创建一个新的项目文件夹，并进入该文件夹。
   • 初始化一个新的 npm 项目，生成 package.json 文件。

   • npm init -y

   • 在项目中运行 npm install typescript --save-dev，将 TypeScript 作为开发依赖安装到项目中。

三、配置 TypeScript 项目

无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称：tsc --init执行时提示“无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。”问题解决 - vickylinj - 博客园

1. 创建 tsconfig.json 文件：
   • 在项目根目录下，使用 tsc --init 命令自动生成 tsconfig.json 文件。
   • 根据需要编辑 tsconfig.json 文件，配置编译选项，如目标 JavaScript 版本、模块系统、严格类型检查等。

常见配置项

一、compilerOptions

compilerOptions是一个对象，用于指定编译器应如何编译TypeScript代码。它包含了许多子选项，以下是一些常见的配置项：

1. target

   • 作用：指定编译输出的JavaScript版本，如"ES3"、"ES5"、"ES2015"（即"ES6"）等。
   • 示例："target": "ES6"

2. module

   • 作用：指定模块解析方式，如"commonjs"、"amd"、"system"、"umd"、"es6"、"es2015"、"esnext"等。
   • 示例："module": "commonjs"

3. outDir

   • 作用：指定编译输出的目录。
   • 示例："outDir": "./dist"

4. strict

   • 作用：启用所有严格的类型检查选项。
   • 示例："strict": true

5. lib

   • 作用：指定编译过程中需要包含的类型定义库，如"es2015"、"dom"等。
   • 示例："lib": ["es6", "dom"]

6. rootDir

   • 作用：指定输入文件的根目录，用于控制输出目录结构。
   • 示例："rootDir": "./src"

1. include

   • 作用：指定需要编译的文件路径或文件夹路径，可以使用通配符。
   • 示例："include": ["src/**/*"]

1. extends

   • 作用：允许一个tsconfig.json文件继承另一个tsconfig.json文件的配置。
   • 示例："extends": "./configs/base"

2. files

   • 作用：明确列出需要编译的文件列表。当使用files时，include和exclude将被忽略。
   • 示例："files": ["src/index.ts", "src/app.ts"]

1. baseUrl

   • 作用：用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响。
   • 示例："baseUrl": "./"

2. paths

   • 作用：用于设置模块名到基于baseUrl的路径映射。
   • 示例："paths": { "*": ["./node_modules/@types", "./typings/*"] }

1. 创建项目结构：
   • 在项目根目录下创建 src 文件夹，用于存放 TypeScript 源代码。
   • 在 src 文件夹中创建一个 index.ts 文件，作为项目的入口文件。

四、选择开发工具

1. 集成开发环境（IDE）：
   • 可以选择 Visual Studio Code、WebStorm 等支持 TypeScript 的 IDE。
   • 在 IDE 中打开项目文件夹，开始编写 TypeScript 代码。
2. 编辑器插件：
   • 如果使用不支持 TypeScript 的编辑器，可以安装相应的 TypeScript 插件以获得语法高亮、代码补全等功能。

五、编写和运行 TypeScript 代码

1. 编写 TypeScript 代码：
   • 在 src/index.ts 文件中编写 TypeScript 代码。
2. 编译 TypeScript 代码：
   • 在终端中运行 tsc 命令，根据 tsconfig.json 文件的配置编译 TypeScript 代码。
   • 编译生成的 JavaScript 文件会存放在指定的输出目录中（如 dist 目录）。
3. 运行 JavaScript 代码：
   • 使用 Node.js 运行编译后的 JavaScript 文件，例如 node dist/index.js。
   • 或者，可以使用 ts-node 直接运行 TypeScript 文件，而无需手动编译。安装 ts-node 和 @types/node 后，在终端中运行 npx ts-node src/index.ts 即可。

六、集成 ESLint（可选）

1. 安装 ESLint 及其 TypeScript 插件：
   • 在项目中运行 npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev。
2. 初始化 ESLint 配置：
   • 使用 npx eslint --init 命令初始化 ESLint 配置。
   • 选择适合项目的配置选项，并生成 .eslintrc.json 文件。
3. 编辑 .eslintrc.json 文件：
   • 在 .eslintrc.json 文件中添加 TypeScript 插件和规则。
4. 检查代码：
   • 使用 npx eslint src/**/*.ts 命令检查 TypeScript 代码中的语法和风格问题。

通过以上步骤，你可以成功配置一个 TypeScript 编写环境，并开始编写、编译和运行 TypeScript 代码。