T> 本指南继续沿用起步指南中的代码示例。
TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通的 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行集成。
基础安装
首先，执行以下命令，安装 TypeScript 编译器(compiler)和 loader：
--- ------- ---------- ---------- ---------
现在，我们将修改目录结构和配置文件：
project
------------
-- ------------
- -- -------------
-- -----------------
-- -----
-- ---------
-- ----------
-- ----
-- --------
- -- --------
-- -------------
tsconfig.json
这里我们设置一个基本的配置，来支持 JSX，并将 TypeScript 编译到 ES5……
-
------------------ -
--------- ----------
---------------- -----
--------- ------
--------- ------
------ --------
---------- ----
-
-
查看 TypeScript 官方文档了解更多关于 tsconfig.json 的配置选项。
想要了解 webpack 配置的更多信息，请查看配置相关概念。
现在让我们在 webpack 配置中处理 TypeScript：
webpack.config.js
----- ---- - ---------------
-------------- - -
------ -----------------
------- -
------ -
-
----- ----------
---- ------------
-------- --------------
-
-
--
-------- -
----------- - ------- ------ ----- -
--
------- -
--------- ------------
----- ----------------------- -------
-
-
这会直接将 webpack 的入口起点指定为 ./index.ts，然后通过 ts-loader 加载所有的 .ts 和 .tsx 文件，并且在当前目录输出一个 bundle.js 文件。
Loader
在本指南中，我们使用 ts-loader，因为它能够很方便地启用额外的 webpack 功能，例如将其他 web 资源导入到项目中。
source map
想要了解 source map 的更多信息，请查看开发指南。
要启用 source map，我们必须配置 TypeScript，以将内联的 source map 输出到编译过的 JavaScript 文件。必须在 TypeScript 配置中添加下面这行：
tsconfig.json
-
------------------ -
--------- ----------
- ------------ -----
---------------- -----
--------- -----------
--------- ------
------ --------
---------- ----
-
-
现在，我们需要告诉 webpack 提取这些 source map，并内联到最终的 bundle 中。
webpack.config.js
----- ---- - ---------------
-------------- - -
------ -----------------
- -------- --------------------
------- -
------ -
-
----- ----------
---- ------------
-------- --------------
-
-
--
-------- -
----------- - ------- ------ ----- -
--
------- -
--------- ------------
----- ----------------------- -------
-
-
查看 devtool 文档以了解更多信息。
使用第三方库
当从 npm 安装第三方库时，一定要牢记同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。
举个例子，如果想安装 lodash 这个库的类型声明文件，我们可以运行下面的命令：
--- ------- ---------- -------------
想了解更多，可以查看这篇文章。
导入其他资源
要在 TypeScript 里使用非代码资源，我们需要告诉 TypeScript 如何兼容这些导入类型。那么首先，我们需要在项目里创建 custom.d.ts 文件，这个文件用来编写自定义的类型声明。让我们将 .svg 文件进行声明设置：
custom.d.ts
------- ------ ------- - ----- -------- --- ------ ------- ------- -
这里，我们通过指定任何以 .svg 结尾的导入，并将模块的 content 定义为 any，将 SVG 声明一个新的模块。我们可以通过将类型定义为字符串，来更加显式地将它声明为一个 url。同样的理念适用于其他资源，包括 CSS, SCSS, JSON 等。
构建性能
W> 这可能会降低构建性能。
关于构建工具，请查看构建性能指南。
---- -- --------------------------------------------------------------------- --------------- ------------------ ---- -------- ----------- ------------------------------------------------------------ ----------- ---