介绍
TypeScript 是一种强类型的 JavaScript 超集，它可以帮助开发者在开发过程中更好地管理代码，减少错误并提高代码的可维护性。但是，在实际开发中，我们通常需要引用一些非 TypeScript 的文件，比如 JavaScript、CSS、JSON 等等。本文将介绍 TypeScript 中引用非 TS 文件的技巧及示例代码，帮助大家更好地开发 TypeScript 项目。
引用 JavaScript 文件
在 TypeScript 中引用 JavaScript 文件通常有两种方式：使用模块加载器或者使用 declare 关键字。
使用模块加载器
在 TypeScript 中，我们可以使用模块加载器来加载 JavaScript 文件。常用的模块加载器有 RequireJS、SystemJS 和 webpack 等等。这里以 webpack 为例，演示如何在 TypeScript 中引用 JavaScript 文件。
首先，在 webpack 配置文件中添加以下代码：
-------------- - -
-- ---
-------- -
----------- ------- ------
--
-- ---
-这里的 extensions 属性指定了 webpack 在查找模块时，会按照指定的后缀名顺序查找。因此，我们在 TypeScript 中引用 JavaScript 文件时，只需要在文件名后面加上 .js 后缀即可。
然后，在 TypeScript 代码中，使用 import 语句来引用 JavaScript 文件：
------ - -- --- ---- -----------
这里的 * 表示将整个模块导入为一个对象，foo 表示对象的名称，./foo.js 是 JavaScript 文件的路径。
使用 declare 关键字
在 TypeScript 中，我们还可以使用 declare 关键字来引用 JavaScript 文件。declare 关键字的作用是告诉 TypeScript 编译器，某个变量、函数、类等等的类型是已经存在的，不需要重新定义。
下面是一个示例代码：
------- --- ------- ---------- ------- -- ---- ---------------
这里的 declare var jQuery 表示告诉 TypeScript 编译器，jQuery 变量的类型已经存在，不需要重新定义。然后，我们就可以在 TypeScript 代码中使用 jQuery 变量了。
引用 CSS 文件
在 TypeScript 中引用 CSS 文件也有两种方式：使用模块加载器或者使用 declare 关键字。
使用模块加载器
在 TypeScript 中，我们可以使用模块加载器来加载 CSS 文件。常用的模块加载器有 RequireJS、SystemJS 和 webpack 等等。这里以 webpack 为例，演示如何在 TypeScript 中引用 CSS 文件。
首先，在 webpack 配置文件中添加以下代码：
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
--
-- ---
-这里的 rules 属性表示 webpack 在编译时会按照指定的规则来处理文件。test 属性表示匹配的文件类型，use 属性表示使用的 loader。
然后，在 TypeScript 代码中，使用 import 语句来引用 CSS 文件：
------ --------------
这里的 ./style.css 是 CSS 文件的路径。
使用 declare 关键字
在 TypeScript 中，我们还可以使用 declare 关键字来引用 CSS 文件。和引用 JavaScript 文件类似，我们可以使用 declare 关键字告诉 TypeScript 编译器，某个变量、函数、类等等的类型是已经存在的，不需要重新定义。
下面是一个示例代码：
------- ------ ------- - ----- -------- ---- ------ ------- -------- - ------ ----- ---- -------------- -------------------
这里的 declare module '*.css' 表示告诉 TypeScript 编译器，所有以 .css 结尾的文件都是 CSS 文件，其内容的类型是 any。然后，我们就可以在 TypeScript 代码中使用 import 语句来引用 CSS 文件了。
引用 JSON 文件
在 TypeScript 中引用 JSON 文件非常简单，只需要使用 import 语句即可。下面是一个示例代码：
------ ---- ---- -------------- ------------------
这里的 ./data.json 是 JSON 文件的路径。
总结
本文介绍了在 TypeScript 中引用非 TS 文件的技巧及示例代码，包括引用 JavaScript、CSS 和 JSON 文件。在实际开发中，我们经常需要引用非 TS 文件，这些技巧可以帮助我们更好地管理代码，提高项目的可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f354012b3ccec22fbd59bb