2.1.1 安装TypeScript

在踏入TypeScript与Vue的奇妙结合之旅前，首要任务是确保你的开发环境中已经安装了TypeScript。TypeScript是JavaScript的一个超集，它为JavaScript添加了类型系统和一些现代编程语言的特性，如类、接口、泛型等，极大地提高了代码的可维护性和可扩展性。本章节将详细指导你如何在不同环境中安装TypeScript，包括在Node.js环境下通过npm（Node Package Manager）安装，以及在浏览器开发环境中直接使用TypeScript的编译输出。

2.1.1.1 准备工作

在开始安装TypeScript之前，请确保你的计算机上已安装以下基础环境：

1. Node.js：TypeScript编译器（tsc）是用TypeScript编写的，但它编译成JavaScript后运行于Node.js环境中。因此，你需要先安装Node.js。访问Node.js官网下载并安装适合你操作系统的版本。

2. npm：npm是Node.js的包管理器，随Node.js一起安装。通过npm，你可以方便地安装、更新和删除项目依赖。

2.1.1.2 全局安装TypeScript

全局安装TypeScript意味着你可以在任何目录下通过命令行使用TypeScript编译器（tsc）。这对于快速尝试TypeScript或在没有项目依赖管理的情况下使用TypeScript很有用。

打开你的命令行工具（如CMD、PowerShell、Terminal等），执行以下命令：

npm install -g typescript

该命令会从npm仓库下载TypeScript的最新版本并全局安装。安装完成后，你可以通过输入tsc --version来验证TypeScript是否已正确安装及其版本号。

2.1.1.3 项目级安装TypeScript

对于大多数开发场景，特别是当你将TypeScript集成到Vue项目中时，推荐在项目级别安装TypeScript。这样做可以更好地管理项目依赖，避免版本冲突，并且使项目更易于分享和协作。

首先，确保你已经在你的工作目录中初始化了一个npm项目。如果没有，可以通过运行npm init -y快速创建一个默认的package.json文件。然后，在项目根目录下执行以下命令来安装TypeScript：

npm install typescript --save-dev

这里使用--save-dev参数是因为TypeScript是开发时依赖，不需要在生产环境中运行。安装完成后，TypeScript将被添加到你的package.json文件的devDependencies部分。

2.1.1.4 配置TypeScript

安装TypeScript后，你可能需要创建或修改一个tsconfig.json文件来配置TypeScript编译器的行为。这个文件告诉TypeScript如何编译你的代码，包括源文件的位置、编译选项等。

在项目根目录下，你可以手动创建一个tsconfig.json文件，也可以使用tsc --init命令来自动生成一个基本的配置文件。运行该命令后，TypeScript将创建一个包含默认配置的tsconfig.json文件。

tsc --init

生成的tsconfig.json文件可能看起来像这样：

{
  "compilerOptions": {
    /* 基本选项 */
    "target": "es5",                          /* 指定ECMAScript目标版本: 'ES3' (默认), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', 或 'ESNEXT'。 */
    "module": "commonjs",                     /* 指定生成哪个模块系统代码: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 或 'ESNext'。 */
    "strict": true,                           /* 启用所有严格类型检查选项。 */
    "esModuleInterop": true,                  /* 启用emit互操作性，以便CommonJS和ES模块可以无缝工作在一起。 */
    "forceConsistentCasingInFileNames": true, /* 禁用文件名的大小写敏感性。 */
    /* 类型检查选项 */
    "skipLibCheck": true,                     /* 跳过声明文件的类型检查。 */
    /* 输出选项 */
    "outDir": "./dist",                       /* 重定向输出目录。 */
    "rootDir": "./src",                       /* 用来控制输入文件的根目录。 */
    /* 源代码映射选项 */
    "sourceMap": true,                        /* 生成相应的 '.map' 文件。 */
    "inlineSourceMap": false,                 /* 生成单个sourcemaps文件，而不是将每个sourcemap生成到不同的文件中。 */
    "inlineSources": true,                    /* 将源代码与sourcemaps生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 以及 compileOnSave。 */
    /* 实验性选项 */
    "experimentalDecorators": true,           /* 启用实验性的装饰器特性。 */
    "emitDecoratorMetadata": true,            /* 为装饰器提供元数据的支持。 */
    /* 高级选项 */
    "resolveJsonModule": true,                /* 导入.json文件时作为ES模块或CommonJS模块。 */
    "allowSyntheticDefaultImports": true,     /* 允许从没有设置默认导出的模块中默认导入。 */
    "moduleResolution": "node",               /* 决定如何处理模块。 */
    "baseUrl": ".",                           /* 解析非相对模块名的基准目录。 */
    "paths": {                                /* 模块名到基于baseUrl的路径映射的列表。 */
      "*": ["types/*"]
    },
    "lib": ["esnext", "dom"]                  /* 指定要包含在编译中的库文件。 */
  },
  "include": ["src/**/*"],                    /* 指定TypeScript应该包含哪些文件。 */
  "exclude": ["node_modules"]                /* 指定TypeScript应该排除哪些文件。 */
}

你可以根据需要调整这些配置选项。例如，如果你的项目使用ES6模块，你可能需要将module选项更改为"es6"或"es2015"。如果你的Vue项目使用Vue CLI 3或更高版本，并且你希望TypeScript与Vue CLI的Webpack配置无缝集成，那么Vue CLI将为你处理大部分配置。

2.1.1.5 编译TypeScript代码

安装并配置好TypeScript后，你就可以开始编写TypeScript代码了。编写完成后，你可以使用TypeScript编译器（tsc）将你的.ts文件编译成.js文件。在项目根目录下，打开命令行工具，运行以下命令：

tsc

如果没有指定输入文件，TypeScript编译器将查找项目中的tsconfig.json文件，并根据其配置来编译项目中的所有TypeScript文件。编译完成后，你的.ts文件将被转换为.js文件，并放置在tsconfig.json中指定的outDir目录下。

2.1.1.6 小结

至此，你已经成功地在你的开发环境中安装了TypeScript，并学习了如何配置TypeScript以及编译TypeScript代码。这为后续将TypeScript集成到Vue项目中打下了坚实的基础。在后续章节中，我们将深入探讨如何在Vue项目中使用TypeScript，包括Vue组件的TypeScript化、Vuex和Vue Router的TypeScript支持等。通过逐步掌握这些技能，你将能够充分利用TypeScript的强大功能来构建更加健壮、可维护的Vue应用。