TypeScript 中导入 JSON 文件的正确方法

TypeScript 导入 JSON 概述

前言

TypeScript 由微软开发，基于 ActionScript 语法构建，旨在为 JavaScript 提供类型约束。尽管作者出身于弱类型语言背景，但逐渐意识到 JavaScript 缺乏接口定义，难以通过 class 语法实现纯粹的面向对象编程，因此转向 TypeScript。本文核心探讨在 TypeScript 环境中正确导入 JSON 格式文件的方法。

基本导入方法的问题

首先尝试基本方法

import * as variable from './fooooooo.json'

直接使用标准导入语法时，编译器报错提示找不到该模块（Cannot find module）。这与 JavaScript 环境中能正常运行的情况形成对比，令人困惑。

解决方案一：类型声明

经过查阅资料，找到了一种解决方案。

创建一个名为 typings.d.ts 的类型声明文件。

declare module "*.json" {
 const value: any;
 export default value;
}

理论上，完成上述配置后即可正常使用 JSON 模块，例如：

import * as variable from './fooooooo.json'
const data = (variable as any).data

解决方案二：使用 Node.js 类型定义

然而，由于误写了配置文件名导致上述方法未生效，因此需要寻找其他替代方案。

另一种方法是结合 @types/node 库使用 require 函数进行引入。如果项目配置中禁用了 any 类型，这种方法也是一个可行的选择。

其他方法对比

还可以选择手动编写代码读取文件，但这种方式显得较为繁琐且不够优雅。相比之下，前两种方法更为推荐。

总结

以上内容涵盖了在 TypeScript 中处理 JSON 导入的主要方式。希望这些内容能对读者在学习或工作中有所帮助。如有疑问，欢迎留言交流，感谢支持。