记录:typescript错误提示请考虑使用 “--resolveJsonModule“ 导入带 “.json“ 扩展的模块。

在ts文件中导入本地json文件,其中一种方式为


import serverJson from '../../public/static/config.json'

提示错误import serverJson from '../../public/static/config.json',无法导入json文件

解决方案:

tsconfig.json文件中增加"resolveJsonModule": true,

然后红色的报错就会消失,就可以正常导入并使用了

### 小满zs的 `tsconfig.json` 配置示例 以下是基于 TypeScript 官方文档以及常见项目实践的小满zs可能使用的 `tsconfig.json` 配置文件内容。此配置适用于大多数前端开发场景,尤其是涉及声明文件 `.d.ts` 和内置对象类型支持的情况。 #### 默认配置示例 ```json { "compilerOptions": { "target": "ES6", "module": "commonjs", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "outDir": "./dist", "rootDirs": ["src"], "typeRoots": ["node_modules/@types", "./custom-types"], "declaration": true, "sourceMap": true, "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "noImplicitAny": true, "forceConsistentCasingInFileNames": true, "noResolve": false // 注意这里设置为false以避免自身调用自身文件时报错[^1] }, "include": [ "src/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ] } ``` #### 关键字段解释 - **`target`:** 指定编译后的 JavaScript 版本,在这里是 ES6[^3]。 - **`module`:** 模块解析策略,默认使用 CommonJS。 - **`strict`:** 启用严格模式,帮助捕获潜在错误- **`esModuleInterop`:** 改善与 CommonJS 模块系统的兼容性。 - **`skipLibCheck`:** 跳过对库文件的类型检查,提升构建速度。 - **`outDir`:** 编译后文件输出目录。 - **`rootDirs`:** 提供根目录路径,用于结构化项目的源码管理。 - **`typeRoots`:** 自定义类型声明文件的位置,便于扩展全局类型[^4]。 - **`declaration`:** 是否生成 `.d.ts` 声明文件。 - **`sourceMap`:** 是否生成 source map 文件以便调试。 - **`resolveJsonModule`:** 允许导入 JSON 文件作为模块- **`allowSyntheticDefaultImports`:** 支持默认导入选项。 - **`noImplicitAny`:** 禁止隐式的 `any` 类型。 - **`forceConsistentCasingInFileNames`:** 强制文件名大小写一致性。 - **`noResolve`:** 设置为 `false` 可防止因自身引用导致的错误--- ### 使用任意属性接口的例子 如果小满zs需要动态添加属性到某个对象上,则可以利用任意属性接口来实现: ```typescript interface DynamicObject { name: string; age?: number; [key: string]: any; // 动态添加其他属性 } const user: DynamicObject = { name: "小满zs", age: 25, location: "上海" // 动态添加的新属性 }; console.log(user); ``` 上述代码展示了如何通过 `[key: string]: any` 来允许额外的属性被赋值给对象实例。 --- ### 结合 Unocss 的预设功能 假设小满zs正在使用 UnoCSS 并希望集成其原子化样式框架的功能,可以通过如下方式引入并配置: ```javascript import { defineConfig } from '@unocss/core'; import presetUno from '@unocss/preset-uno'; export default defineConfig({ presets: [ presetUno(), // 使用默认的 UnoCSS 预设[^2] ], }); ``` 这使得开发者能够轻松访问一系列流行的原子化 CSS 属性集合。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值