大家好，
請問使用 zod 來定義元件 props 的型別，要怎麼樣達到這樣的形式呢？
type Props {
title: string;
description?: string;
}
我想要做的是：description 不一定要傳入元件
用 zod 的 .optional() 來定義：
const postProps = z.object({
title: z.string(),
description: z.string().optional()
});
type Props = z.infer<typeof postProps>;
這樣產生的型別是：
type Props {
title: string;
description: string | undefined;
}
要使用這個元件的時候，如果只傳入 title，
<Component title="標題字串" />
就出現錯誤：
Property 'description' is missing in type '{ title: string; }' but required in type '{ title: string; description: string | undefined; }'
Google 一陣後，有人用 .partial({ description: true })，但是改寫後也還是得到 string | undefined
想知道應該如何設定型別？謝謝！
按讚的人：
共有 6 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
話說回來，一定要用 zod 來達成嗎？
const Component = ({ title, description = '' }) => {
return (
// ...
);
}
直接這樣，給預設值，是不是效果也一樣呢？
感謝回答！這個方法確實可以通過。
繼續 Google 下去是發現 TypeScript 設定了
{
"compilerOptions": {
"strictNullChecks": true
}
}
就不能用
type Props {
description?: string;
}
的方法
我自己的解決方法是使用元件時，用不到的 props，得明確指出是 undefined：
<Component title="標題字串" description={undefined} />
按讚的人：
hi
zod 通常是拿來做表單或 api 資料的型別驗證， 我看到的大多作法是自己定義 type， 加上使用 react 的 ComponentProps， 這樣還可以獲得 html 的原始 props。
import { ComponentProps } from "react";
type MyDivProps = ComponentProps<"div"> & {
myProp: string;
};
const MyDiv = ({ myProp, ...props }: MyDivProps) => {
console.log(myProp!);
return <div {...props} />;
};
參考 : https://www.totaltypescript.com/react-component-props-type-helper
按讚的人：
感謝回應！
一開始選用 zod 來管理型別，是因為源頭從 API 取得 20 個 key 左右的資料，在有些元件只須使用一小部份，還有變換成 optional、改 key 名稱的需求，剛好這些在 zod 都有方便的語法達成，就開始用了，確實沒考慮到 DOM 本身的屬性
按讚的人：
熱門文章
我很少用 typescript 也不熟 zod
幫你貼到群組問問看，哈哈