2.1.1 安装TypeScript -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

### 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官网](https://nodejs.org/)下载并安装适合你操作系统的版本。

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

#### 2.1.1.2 全局安装TypeScript

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

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

```bash
npm install -g typescript
```

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

#### 2.1.1.3 项目级安装TypeScript

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

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

```bash
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`文件。

```bash
tsc --init
```

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

```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`文件。在项目根目录下，打开命令行工具，运行以下命令：

```bash
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应用。

该分类下的相关小册推荐：

Vue面试指南

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(一)

Vue原理与源码解析

Vue源码完全解析

TypeScript和Vue从入门到精通(三)

Vue3技术解密

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(四)

移动端开发指南

Vue.js从入门到精通(四)

VUE组件基础与实战