如何基于 JSON Modules 提案直接异步导入原始配置数据并保持类型一致性-js教程-PHP中文网

json modules 提案已进入 stage 4，支持通过 import json from "./file.json" assert { type: "json" } 直接导入并自动推导精确类型；typescript 4.5+ 需启用 "resolvejsonmodule": true，node.js 17.1+ 原生支持，vite/webpack 5+ 默认兼容。

如何基于 json modules 提案直接异步导入原始配置数据并保持类型一致性

可以使用 JSON Modules 提案（已进入 Stage 3，现代 TypeScript 和主流浏览器/打包工具普遍支持）直接 import JSON 文件，并在编译期保留类型推导，无需额外声明或运行时解析。关键在于启用相应配置并正确使用 assert（ES 模块规范）或工具链适配。

确保环境支持 JSON Modules

TypeScript 4.5+ 原生支持 JSON 导入（需 "resolveJsonModule": true 和 "esModuleInterop": true）；Node.js 17.1+ 原生支持 import ... from "./config.json" assert { type: "json" }；Vite、Webpack 5+、esbuild 等也默认兼容。

TSConfig 中启用："resolveJsonModule": true 和 "moduleResolution": "node16" 或 "bundler"
Node.js 运行时需加 --experimental-json-modules（v18.12+ 已默认启用）
Vite 项目无需额外配置，直接 import 即可获得类型和 HMR 支持

同步导入（推荐用于构建时确定的配置）

最简方式：TypeScript 会自动为 JSON 文件生成精确类型，零成本、强类型、无运行时开销。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

// config.json
{
  "apiUrl": "https://api.example.com",
  "timeoutMs": 5000,
  "features": {
    "darkMode": true,
    "analytics": false
  }
}

直接导入即得完整类型：

import config from "./config.json";
// config 的类型为自动推导的 { apiUrl: string; timeoutMs: number; features: { darkMode: boolean; analytics: boolean } }
console.log(config.apiUrl); // ✅ 类型安全，IDE 自动补全

异步导入原始 JSON（适用于动态路径或条件加载）

使用 import() 动态导入 + assert { type: "json" }，可在运行时按需加载，且仍保持类型安全（TypeScript 5.0+ 支持动态导入断言的类型推导）：

async function loadConfig(env: "prod" | "dev") {
  const mod = await import(`./config.${env}.json`, {
    assert: { type: "json" }
  });
  return mod.default as typeof import("./config.prod.json").default;
}

// 或更简洁地利用类型守卫（推荐）
type Config = typeof import("./config.prod.json").default;

async function loadConfigTyped(env: "prod" | "dev"): Promise<config> {
  const mod = await import(`./config.${env}.json`, {
    assert: { type: "json" }
  });
  return mod.default;
}</config>