前言
TypeScript 是一个由微软开发的静态类型检查的 JavaScript 超集语言，它可以在代码编写时即时提示语法错误，提高了开发效率，并且可以有效减少运行时出错。Webpack 是一个模块打包器，它可以将各种模块和资源打包成最终的静态资源。本文将介绍如何使用 Webpack 打包 TypeScript 应用。
配置 Webpack
首先，我们需要在项目里安装 Webpack 和 TypeScript：
npm install webpack webpack-cli typescript --save-dev
安装完成后，我们需要创建一个 webpack.config.js 文件来配置 Webpack。其中，我们需要使用 ts-loader 将 TypeScript 转换成 JavaScript。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
----- -------------
------- -
------ -
-
----- ----------
---- ------------
-------- ---------------
--
--
--
-------- -
----------- -------- ------ -------
--
------- -
--------- ------------
----- ----------------------- --------
--
--我们可以通过运行 npm run build 来打包我们的应用程序。
配置 TypeScript
在我们的项目中，还需要一个 tsconfig.json 文件，它将告诉 TypeScript 编译器如何编译我们的代码。
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- ------
------------------- -------
------------------------- -----
------------------------ -----
---------------- -----
------------ -----
--------- -----
----------------- -----
--------------------- -----
------------ ------------------------
------ ------- ----------
------ -----------
--
---------- ----------------
-其中，experimentalDecorators 和 emitDecoratorMetadata 开启了装饰器，noImplicitAny 开启了严格的类型检查。
示例代码
下面是一个简单的 TypeScript 示例代码，我们可以声明类 User，使用 extends 来继承它。然后我们创建了一个新的 AdminUser 类，它从 User 中继承了所有属性和方法。
-- -------------------- ---- -------
--------- ----- -
----- -------
---- -------
-
----- ---- ---------- ----- -
------ ----- -------
------ ---- -------
----------------- ------- ---- ------- -
--------- - -----
-------- - ----
-
------ ---------- -
------------------- -- ---- -- ----------------
-
-
----- --------- ------- ---- -
----------------- ------- ---- ------- -
----------- -----
-
------ ------------ -
--------------------- ---- ---------------
-
-
----- ---- - --- ------------ ----
----------------
----- ----- - --- ------------------ ----
-----------------
-------------------总结
本文介绍了如何使用 Webpack 打包 TypeScript 应用程序。我们需要配置 webpack.config.js 和 tsconfig.json 文件，并使用 ts-loader 将 TypeScript 转换为 JavaScript。示例代码展示了如何使用 TypeScript 声明类和继承。希望本文可以帮助您更好地使用 TypeScript 和 Webpack。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64620b28968c7c53b035f911