Webextkits Docs

Appearance

如何定义 Schema ​

和消息管理一样，你想让数据支持 typesafe，就必须定义它的类型。为了让它能自动填充缺失字段，我们还需要编写一个 JSON Schema 描述文件（大部分可以由 ChatGPT 生成）

定义一个 schema ​

假设我们需要一个 key 来存放当前登录用户的信息，命名为 user，它包含两个字段 name: string 和 age: number

建立 schema 文件 ​

我们在 /src/schema 文件夹下面新建 user.ts 文件，内容如下

typescript
//  user.ts
import { JSONSchemaType } from "@webextkits/storage-local";

export type UserSchemaType = {
  name: string;
  age: number;
};

export const UserSchema: JSONSchemaType<UserSchemaType> = {
  type: "object",
  properties: {
    name: {
      type: "string",
      default: "default name",
    },
    age: {
      type: "number",
      default: 18,
    },
  },
  default: {},
  required: ["name", "age"],
};
//  user.ts
import { JSONSchemaType } from "@webextkits/storage-local";

export type UserSchemaType = {
  name: string;
  age: number;
};

export const UserSchema: JSONSchemaType<UserSchemaType> = {
  type: "object",
  properties: {
    name: {
      type: "string",
      default: "default name",
    },
    age: {
      type: "number",
      default: 18,
    },
  },
  default: {},
  required: ["name", "age"],
};

尽量保持命名统一

比如在 user.ts 文件中，应该导出的两个命名为 UserSchemaType 和 UserSchema

UserSchemaType ​

UserSchemaType 用于描述这个 user 的 JSON 格式，它主要用于在操作 storage 时的 typescript 提示和检测

UserSchema ​

UserSchema 用于自动填充数据库中的缺失字段。它是一个 JSON Schema 结构（当前最流行的结构描述格式），你可以直接让 ChatGPT 帮你生成。比如我是这样问的

text
我：请按照下面这个 type 生成对应的 ajv 格式
export type UserSchemaType = {
  name: string;
  age: number;
};
我：请按照下面这个 type 生成对应的 ajv 格式
export type UserSchemaType = {
  name: string;
  age: number;
};

chatGPT 回答说

typescript
import Ajv, { JSONSchemaType } from "ajv";

// 定义UserSchemaType的ajv格式
const userSchema: JSONSchemaType<UserSchemaType> = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" },
  },
  required: ["name", "age"],
};

// 创建一个新的ajv实例
const ajv = new Ajv();

// 编译UserSchemaType的ajv格式
const validate = ajv.compile(userSchema);

export { validate };
import Ajv, { JSONSchemaType } from "ajv";

// 定义UserSchemaType的ajv格式
const userSchema: JSONSchemaType<UserSchemaType> = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" },
  },
  required: ["name", "age"],
};

// 创建一个新的ajv实例
const ajv = new Ajv();

// 编译UserSchemaType的ajv格式
const validate = ajv.compile(userSchema);

export { validate };

我们只需要将

typescript
const userSchema: JSONSchemaType<UserSchemaType> = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" },
  },
  required: ["name", "age"],
};
const userSchema: JSONSchemaType<UserSchemaType> = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" },
  },
  required: ["name", "age"],
};

复制粘贴过来即可

注意事项 ​

为了让 schema 能正确补齐缺失字段，需要给每个属性添加 default 值

typescript
export const UserSchema: JSONSchemaType<UserSchemaType> = {
  type: "object",
  properties: {
    name: {
      type: "string",
      //  添加默认值
      default: "default name",
    },
    age: {
      type: "number",
      //  添加默认值
      default: 18,
    },
  },
  //  添加默认值
  default: {},
  required: ["name", "age"],
};
export const UserSchema: JSONSchemaType<UserSchemaType> = {
  type: "object",
  properties: {
    name: {
      type: "string",
      //  添加默认值
      default: "default name",
    },
    age: {
      type: "number",
      //  添加默认值
      default: 18,
    },
  },
  //  添加默认值
  default: {},
  required: ["name", "age"],
};

WARNING

每个 schema 文件都需要导出一个 type 和对应的 JSON Schema 描述对象，storageLocal 才能正常运行

注册 schema ​

我们回到 src/schema/index.ts 文件中，对刚刚定义的 schema user 进行注册导出

typescript
import { UserSchemaType, UserSchema } from "./user";

export type SchemaType = {
  user: UserSchemaType;
};

export const schema = {
  user: UserSchema,
};
import { UserSchemaType, UserSchema } from "./user";

export type SchemaType = {
  user: UserSchemaType;
};

export const schema = {
  user: UserSchema,
};

WARNING

SchemaType 和 schema 中的 key 必须保持一致

Powered by Vitepress