TypeScript 安装与配置：从零开始搭建开发环境

一、安装 Node.js

在开始安装和配置 TypeScript 之前，我们首先需要安装 Node.js。因为 TypeScript 是基于 Node.js 运行的，Node.js 提供了一个 JavaScript 运行时环境，使得我们可以在本地开发环境中使用 TypeScript。

下载 Node.js 安装包
- 访问 Node.js 官方网站（https://nodejs.org/）。在网站上，你会看到两个主要的版本分支：长期支持（LTS）版本和最新版本。对于大多数开发者，建议下载 LTS 版本，因为它具有更好的稳定性和兼容性。
- 选择适合你操作系统的安装包进行下载。Node.js 支持 Windows、macOS 和 Linux 等多种操作系统。
安装 Node.js
- Windows 系统：
  - 下载完成后，双击安装包启动安装向导。在安装向导中，你可以选择安装路径等选项。一般情况下，保持默认设置即可，直接点击“Next”按钮。
  - 安装过程中，你可以选择是否将 Node.js 添加到系统路径中。强烈建议勾选此选项，这样在命令行中就可以直接使用 node 和 npm 命令，而无需指定完整路径。
  - 安装完成后，打开命令提示符（CMD），输入 node -v 和 npm -v 命令。如果安装成功，你将看到 Node.js 和 npm 的版本号输出。例如：

C:\Users\yourusername>node -v
v14.17.0
C:\Users\yourusername>npm -v
6.14.13

macOS 系统：
- 下载完成后，双击 .pkg 文件启动安装向导。按照向导提示完成安装，默认情况下会将 Node.js 安装到 /usr/local/bin 目录下，并自动将其添加到系统路径中。
- 打开终端，输入 node -v 和 npm -v 命令来验证安装是否成功。输出结果类似于：

yourusername@yourmacbook:~$ node -v
v14.17.0
yourusername@yourmacbook:~$ npm -v
6.14.13

Linux 系统：
- 在大多数 Linux 发行版中，可以通过包管理器来安装 Node.js。例如，在 Ubuntu 系统中，可以使用以下命令安装：

sudo apt update
sudo apt install nodejs npm

 - 安装完成后，同样通过 `node -v` 和 `npm -v` 命令验证安装结果。

二、安装 TypeScript

安装好 Node.js 后，我们就可以使用 npm（Node Package Manager）来安装 TypeScript。npm 是 Node.js 的默认包管理器，它可以帮助我们轻松地安装、管理和分享 JavaScript 包。

全局安装 TypeScript 在命令行中输入以下命令来全局安装 TypeScript：

npm install -g typescript

-g 参数表示全局安装，这样在系统的任何目录下都可以使用 tsc（TypeScript 编译器）命令。安装过程可能需要一些时间，npm 会从 npm 仓库下载 TypeScript 及其依赖包并进行安装。
安装完成后，可以通过输入 tsc -v 命令来验证 TypeScript 是否安装成功。如果安装成功，你将看到 TypeScript 的版本号输出，例如：

C:\Users\yourusername>tsc -v
Version 4.4.4

局部安装（可选） 除了全局安装，有时我们也会选择在项目局部安装 TypeScript。这在多个项目使用不同版本 TypeScript 时非常有用。
- 首先，创建一个新的项目目录，例如 my - project，并进入该目录：

mkdir my - project
cd my - project

然后，初始化一个 package.json 文件，这个文件用于管理项目的依赖和配置信息。在项目目录下运行以下命令：

npm init -y

-y 参数表示使用默认配置快速初始化，package.json 文件将被创建并包含一些基本的项目信息。
接下来，在项目目录下安装 TypeScript：

npm install --save - dev typescript

--save - dev 参数表示将 TypeScript 作为开发依赖安装，这些依赖主要用于开发过程，而在生产环境可能不需要。安装完成后，你会发现项目目录下的 node_modules 文件夹中包含了 TypeScript 及其依赖，并且 package.json 文件中新增了 devDependencies 字段，其中包含了 TypeScript 的版本信息。

三、配置 TypeScript

安装好 TypeScript 后，我们需要对其进行配置，以满足项目的特定需求。TypeScript 的配置主要通过一个名为 tsconfig.json 的文件来完成。

生成 tsconfig.json 文件
- 如果是全局安装的 TypeScript，可以在项目根目录下运行以下命令生成 tsconfig.json 文件：

tsc --init

如果是局部安装的 TypeScript，需要通过 npx 命令来调用 TypeScript 编译器生成配置文件。npx 是 npm 5.2.0 及以上版本自带的一个工具，用于临时运行 npm 包中的可执行文件。在项目根目录下运行：

npx tsc --init

执行上述命令后，会在项目根目录生成一个 tsconfig.json 文件，这个文件包含了大量的配置选项，不过大部分都是注释掉的，你可以根据需要取消注释并修改。

常用配置选项
- target：指定编译后的 JavaScript 版本。常见的值有 es5、es6（或 es2015）、es2016、es2017 等。例如，如果项目需要兼容较旧的浏览器，可能选择 es5；如果目标是现代浏览器，可以选择 es6 或更高版本。

{
  "compilerOptions": {
    "target": "es6"
  }
}

module：指定生成的 JavaScript 模块系统。常见的值有 commonjs、es6、amd、umd 等。commonjs 是 Node.js 使用的模块系统，适合在 Node.js 环境中运行；es6 是 ECMAScript 6 标准的模块系统，常用于浏览器环境。

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

strict：启用严格类型检查模式。开启后，TypeScript 会执行更严格的类型检查，有助于发现更多的类型错误。建议在项目中始终启用该选项。

{
  "compilerOptions": {
    "strict": true
  }
}

outDir：指定编译后的 JavaScript 文件输出目录。例如，将编译后的文件输出到 dist 目录：

{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

rootDir：指定 TypeScript 源文件的根目录。如果你的项目结构比较复杂，通过该选项可以明确指定源文件的位置。

{
  "compilerOptions": {
    "rootDir": "./src"
  }
}

include：指定需要编译的文件或目录。可以使用通配符，例如 ["src/**/*.ts"] 表示包含 src 目录下所有 .ts 文件。

{
  "include": ["src/**/*.ts"]
}

exclude：指定不需要编译的文件或目录。例如，["node_modules", "dist"] 表示排除 node_modules 和 dist 目录。

{
  "exclude": ["node_modules", "dist"]
}

四、使用 TypeScript 进行开发

配置好 TypeScript 后，我们就可以开始编写 TypeScript 代码并进行编译了。

创建 TypeScript 文件 在项目目录中，例如在 src 目录下创建一个新的 TypeScript 文件，命名为 hello.ts：

// src/hello.ts
let message: string = "Hello, TypeScript!";
console.log(message);

在上述代码中，我们声明了一个类型为 string 的变量 message，并赋值为 "Hello, TypeScript!"，然后通过 console.log 输出该变量。

编译 TypeScript 文件
- 如果是全局安装的 TypeScript，在项目根目录下运行 tsc 命令。TypeScript 编译器会根据 tsconfig.json 文件的配置，将 src/hello.ts 文件编译为 JavaScript 文件。如果 outDir 配置为 dist，编译后的 hello.js 文件将出现在 dist 目录中。
- 如果是局部安装的 TypeScript，使用 npx tsc 命令进行编译。编译结果同样会根据 tsconfig.json 的配置输出到相应目录。
运行编译后的 JavaScript 文件 编译完成后，在 Node.js 环境中运行编译后的 JavaScript 文件。例如，如果编译后的 hello.js 文件在 dist 目录中，在命令行中进入 dist 目录并运行以下命令：

cd dist
node hello.js

你将在控制台看到输出：Hello, TypeScript!

五、在不同开发场景中的配置优化

前端项目（使用 Webpack）
- 安装 Webpack 相关依赖：
  - 首先确保项目中已经初始化了 package.json 文件。然后安装 Webpack 和 Webpack - CLI：

npm install --save - dev webpack webpack - cli

 - 为了支持 TypeScript，还需要安装 `ts - loader`：

npm install --save - dev ts - loader

配置 Webpack：在项目根目录创建一个 webpack.config.js 文件，内容如下：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts - loader',
        exclude: /node_modules/
      }
    ]
  }
};

调整 tsconfig.json：为了与 Webpack 更好地配合，tsconfig.json 中的 module 选项可以设置为 es6，因为 Webpack 会处理模块打包。同时，outDir 选项可以根据实际情况调整，例如可以设置为 dist 与 Webpack 的输出目录一致。

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "dist"]
  }
}

运行 Webpack：在 package.json 的 scripts 字段中添加如下命令：

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

然后在命令行中运行 npm run build，Webpack 会根据配置将 TypeScript 文件编译并打包成 bundle.js 文件，输出到 dist 目录。

Node.js 项目
- 项目结构：对于 Node.js 项目，常见的项目结构可能如下：

my - node - project/
├── src/
│   ├── main.ts
│   └── utils/
│       └── helper.ts
├── dist/
├── package.json
└── tsconfig.json

tsconfig.json 配置：在 tsconfig.json 中，target 可以设置为 es6 或更高版本，module 设置为 commonjs，因为 Node.js 使用 commonjs 模块系统。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "dist"]
  }
}

运行项目：在 package.json 的 scripts 字段中添加如下命令：

{
  "scripts": {
    "start": "tsc && node dist/main.js"
  }
}

这样，当运行 npm start 时，首先会执行 tsc 命令编译 TypeScript 文件到 dist 目录，然后通过 node 命令运行编译后的 main.js 文件。

六、TypeScript 与 IDE 的集成

Visual Studio Code
- 安装插件：打开 Visual Studio Code，在扩展商店中搜索并安装 “TypeScript” 插件。该插件为 TypeScript 开发提供了丰富的功能，如语法高亮、代码自动完成、类型检查等。
- 项目设置：打开项目文件夹，Visual Studio Code 会自动检测到 tsconfig.json 文件，并根据其配置进行项目设置。在编辑 TypeScript 文件时，编辑器会实时进行类型检查，并在有类型错误时在代码中显示红色波浪线提示。例如，如果你在 hello.ts 文件中编写如下错误代码：

let num: number = "123"; // 类型不匹配
console.log(num);

Visual Studio Code 会立即提示 "Type'string' is not assignable to type 'number'."。 2. WebStorm

安装支持： WebStorm 对 TypeScript 有很好的内置支持。在创建新项目时，可以选择 “TypeScript” 项目模板。如果是现有项目，WebStorm 也会自动识别 tsconfig.json 文件。
配置检查：在 WebStorm 的设置中，可以进一步配置 TypeScript 检查的严格程度等选项。例如，在 “Settings” -> “Languages & Frameworks” -> “TypeScript” 中，可以调整 “TypeScript language level” 等设置，以适应项目的需求。

通过以上步骤，你已经学会了如何从零开始安装和配置 TypeScript 开发环境，并且了解了在不同开发场景中的优化配置以及与常用 IDE 的集成。TypeScript 强大的类型系统和工具链将帮助你编写更健壮、可维护的代码。无论是前端开发还是后端 Node.js 开发，TypeScript 都能为项目带来诸多好处。在实际开发过程中，你可以根据项目的具体需求进一步调整配置，充分发挥 TypeScript 的优势。