ym  ·  03月31日

大家好,

請問使用 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 則留言

我很少用 typescript 也不熟 zod

幫你貼到群組問問看,哈哈

話說回來,一定要用 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 本身的屬性