Sanity Typed 项目教程
项目地址: https://gitcode.com/gh_mirrors/sa/sanity-typed 1. 项目介绍
Sanity Typed 是一个开源项目，旨在通过 TypeScript 增强 Sanity 的开发者体验。它提供了多种工具和库，帮助开发者在使用 Sanity 时获得更好的类型安全性和开发效率。Sanity Typed 不仅支持类型推断，还提供了离线开发和运行时验证等功能，极大地提升了开发者的生产力。
2. 项目快速启动
安装依赖
首先，你需要安装 Sanity Typed 的相关依赖。你可以通过 npm 或 yarn 来安装：
npm install @sanity-typed/client @sanity-typed/types
或者
yarn add @sanity-typed/client @sanity-typed/types
配置 Sanity 项目
在你的 Sanity 项目中，创建一个新的 TypeScript 文件（例如 sanity.ts），并配置 Sanity Typed：
import { createClient } from '@sanity-typed/client';
import { defineType } from '@sanity-typed/types';
// 定义你的 Sanity 模式
const post = defineType({
name: 'post',
title: 'Post',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'content',
title: 'Content',
type: 'text',
},
],
});
// 创建 Sanity 客户端
const client = createClient({
projectId: 'your-project-id',
dataset: 'your-dataset',
apiVersion: '2023-10-01',
useCdn: true,
});
// 使用客户端进行查询
client.fetch(`*[_type == "post"]`).then((posts) => {
console.log(posts);
});
运行项目
确保你的 Sanity 项目已经配置好，并且 Sanity Typed 的客户端已经正确初始化。你可以通过以下命令启动你的项目：
sanity start
3. 应用案例和最佳实践
应用案例
假设你正在开发一个博客平台，使用 Sanity Typed 可以帮助你更好地管理博客文章的类型安全。你可以定义文章的结构，并通过 Sanity Typed 提供的类型推断功能，确保在查询和操作数据时不会出现类型错误。
最佳实践
- 类型推断：使用
@sanity-typed/types定义你的 Sanity 模式，并通过@sanity-typed/client进行类型安全的查询。 - 离线开发：使用
@sanity-typed/client-mock进行本地开发和测试，避免频繁访问远程数据库。 - 运行时验证：使用
@sanity-typed/zod生成 Zod 模式，确保在运行时对数据进行验证。
4. 典型生态项目
@sanity-typed/next-sanity
@sanity-typed/next-sanity 是一个与 Next.js 集成的库，提供了类型安全的 Sanity 客户端。它可以帮助你在 Next.js 项目中无缝集成 Sanity，并享受类型推断带来的好处。
@sanity-typed/preview-kit
@sanity-typed/preview-kit 是一个用于预览功能的库，提供了类型安全的 GROQ 查询结果。它可以帮助你在开发过程中实时预览数据变化，提升开发效率。
@portabletext-typed/react
@portabletext-typed/react 是一个与 React 集成的库，提供了类型安全的 Portable Text 组件。它可以帮助你在 React 项目中更好地处理 Sanity 的 Portable Text 数据。
通过这些生态项目，你可以进一步扩展 Sanity Typed 的功能，提升开发体验。