在前端开发中，JSON 文件是经常使用的一种数据格式。而 TypeScript 作为一种类型化的 JavaScript，也支持读取 JSON 文件。本文将介绍 TypeScript 中如何读取 JSON 文件，以及一些相关的注意事项。
读取 JSON 文件
在 TypeScript 中，我们可以使用 import 语句来读取 JSON 文件。具体来说，我们可以使用相对路径或绝对路径来指定文件路径，然后在 import 语句中使用 json 关键字来指定读取 JSON 文件。例如：
import myJson from './myJson.json';
这样，我们就可以将 myJson.json 文件中的内容读取到 myJson 变量中。需要注意的是，读取 JSON 文件时，TypeScript 会自动进行类型推断，因此我们可以直接使用 myJson 变量，并且 TypeScript 会自动将其解析成 JSON 对象。
如果 JSON 文件中包含了复杂的数据结构，例如数组、嵌套对象等，TypeScript 也能够正确地进行解析。例如：
-- -------------------- ---- -------
-
------- --------
------ ---
---------- ----------- ------------
---------- -
------- ----------
--------- ----- -------
-
-上述 JSON 对象中包含了一个数组 hobbies 和一个嵌套对象 address。在 TypeScript 中读取该 JSON 文件时，我们可以直接访问这些属性：
console.log(myJson.name); // "Alice" console.log(myJson.age); // 30 console.log(myJson.hobbies[0]); // "reading" console.log(myJson.address.city); // "Beijing"
注意事项
在读取 JSON 文件时，有一些注意事项需要我们注意。
首先，JSON 文件中的属性名必须是双引号括起来的字符串，而不能使用单引号或者不加引号的方式。例如，下面的 JSON 文件是不合法的：
{
name: "Alice",
age: 30
}其次，如果 JSON 文件中存在循环引用的情况，TypeScript 将无法正确地解析该文件。例如：
-- -------------------- ---- -------
-
------- --------
---------- -
-
------- ------
---------- --
--
-
------- ----------
---------- -
-
------- --------
---------- --
-
-
-
-
-上述 JSON 文件中，Alice 和 Charlie 互相引用了对方，这将导致 TypeScript 无法正确地解析该文件。在实际开发中，我们应该避免出现循环引用的情况。
最后，需要注意的是，如果 JSON 文件不存在或者格式不正确，TypeScript 将会抛出异常。因此，在读取 JSON 文件时，我们应该确保文件存在且格式正确，以避免运行时错误。
示例代码
下面是一个完整的 TypeScript 示例代码，演示了如何读取一个包含复杂数据结构的 JSON 文件：
-- -------------------- ---- ------- --------- ------- - ----- ------- ------- ------- - --------- ------ - ----- ------- ---- ------- -------- --------- -------- -------- - ------ ------ ---- ---------------- ----- ------ ------ - ------- ------------------------ -- ------- ----------------------- -- -- ------------------------------ -- --------- -------------------------------- -- ---------
在上述代码中，我们首先定义了一个包含两个接口的 TypeScript 类型，分别对应了 JSON 文件中的两个数据结构。然后，我们使用 import 语句读取了 myJson.json 文件，并将其赋值给 alice 变量。最后，我们可以直接访问 alice 变量中的属性，并且 TypeScript 会自动进行类型推断。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d934f7a941bf71340bf01e