zod-i18n 项目教程

zod-i18n 项目教程

zod-i18n Useful for translating zod error messages. 项目地址: https://gitcode.com/gh_mirrors/zo/zod-i18n

1. 项目的目录结构及介绍

zod-i18n/
├── dist/
│   ├── index.d.ts
│   ├── index.js
│   └── locales/
│       ├── en.json
│       ├── it.json
│       └── ...
├── src/
│   ├── index.ts
│   └── locales/
│       ├── en.ts
│       ├── it.ts
│       └── ...
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

• dist/: 编译后的文件目录，包含 TypeScript 编译生成的 JavaScript 文件和类型定义文件。
  • index.d.ts: TypeScript 类型定义文件。
  • index.js: 编译后的 JavaScript 入口文件。
  • locales/: 包含不同语言的错误消息 JSON 文件。
• src/: 源代码目录，包含 TypeScript 源文件。
  • index.ts: 项目的入口文件。
  • locales/: 包含不同语言的错误消息 TypeScript 文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，该文件是整个项目的入口点。它主要负责初始化 Zod 的错误消息映射，并导出相关的功能模块。

// src/index.ts

import { z } from 'zod';
import { makeZodI18nMap } from './locales';
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      errors: {
        // 错误消息定义
      }
    },
    it: {
      errors: {
        // 错误消息定义
      }
    }
  }
});

z.setErrorMap(makeZodI18nMap(i18n));

export { z };

启动文件功能介绍

• 导入依赖: 导入了 zod、makeZodI18nMap 和 createI18n 等依赖。
• 创建 i18n 实例: 使用 createI18n 创建了一个国际化实例，并配置了不同语言的错误消息。
• 设置错误消息映射: 使用 z.setErrorMap 方法将国际化实例传递给 makeZodI18nMap，从而实现错误消息的国际化。
• 导出模块: 导出了 z 模块，供其他文件使用。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本命令和其他元数据。

{
  "name": "zod-i18n",
  "version": "1.0.0",
  "description": "Translating Zod error messages with Vue I18n",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  },
  "dependencies": {
    "zod": "^3.0.0",
    "vue-i18n": "^9.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项和项目结构。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

配置文件功能介绍

• package.json:

  • name: 项目名称。
  • version: 项目版本。
  • description: 项目描述。
  • main: 项目的入口文件。
  • scripts: 定义了项目的脚本命令，如 build 和 start。
  • dependencies: 项目的运行时依赖。
  • devDependencies: 项目的开发依赖。

• tsconfig.json:

  • compilerOptions: 定义了 TypeScript 编译器的选项，如目标 ECMAScript 版本、模块系统、输出目录等。
  • include: 指定包含的文件或目录。
  • exclude: 指定排除的文件或目录。

zod-i18n Useful for translating zod error messages. 项目地址: https://gitcode.com/gh_mirrors/zo/zod-i18n