Recursive types(typescript and zod validation)

要寫程式，不要學程式

正在把 react-hook-form和tiptap 做結合，用 zod作為驗證手段，發現有關 tiptap的 content type如下

type JSONContent = {  
  type?: string  
  attrs?: Record<string, any>  
  content?: JSONContent[]  
  marks?: {  
    type: string  
    attrs?: Record<string, any>  
    [key: string]: any  
  }[]  
  text?: string  
  [key: string]: any  
}

content本身呈現 recursive的相互引用，而用zod作為驗證工具則要先定義schema，參考官方文件改寫為驗證content的schema如下

const baseContent = z.object({  
  type: z.string(),  
  attrs: z.record(z.any())  
    .optional(),  
  marks: z.array(  
    z.object({  
      type: z.string(),  
      attrs: z.record(z.any())  
        .optional(),  
    })  
  ).optional(),  
  text: z.string().optional()  
});  
  
type Content = z.infer<typeof baseContent>  
  
const EditorSchema : z.ZodType<Content> = baseContent.extend({  
  content: z.array(z.lazy(() => EditorSchema)).optional()  
})

1. 把不重複的欄位先定義成base
2. 將base定義成一個type
3. 將base extend 會 recursive的key

程式都是寫出來的，一個實際的問題，堆疊了很多用法來解決，最好的學習就是實際的寫，用批判的方式，尋找所有可行性，問題的解法永遠都不只一種，更不能止於一種。