iT邦幫忙

0

請問在Vue框架中使用TypeScript以及Zod,發生錯誤Unresolvable type reference or unsupported built-in utility type

  • 分享至 

  • xImage

我這樣寫,但我的專案發生錯誤,請問大大該如何解決這個錯誤。
謝謝 辛苦了。

程式碼範例:
inputBase.ts 共用的基本定義:

import { z } from 'zod';

export const PropsBaseSchema = () =>
  z.object({
    placeholder: z.string().optional(),
    rules: z.array(z.any()).optional(),
    disable: z.boolean().optional(),
    readonly: z.boolean().optional(),
  });

export type PropsBase = z.infer<ReturnType<typeof PropsBaseSchema>>;

largeDto.ts 擴展了基本定義:

import { z } from 'zod';
import { PropsBaseSchema } from './base/inputBase';

export const PropsSchema = () =>
  PropsBaseSchema().extend({
    type: z.enum(['text', 'password', 'textarea', 'email', 'search', 'tel', 'url']).optional(),
  });

export type PropsDto = z.infer<ReturnType<typeof PropsSchema>>;

LargeComponent.vue 基於Quasar的自訂輸入元件:

<script setup lang="ts">
import { PropsSchema } from './dto/largeDto';
import type { PropsDto } from './dto/largeDto';

const props = withDefaults(defineProps<PropsDto>(), {
  type: 'text',
});

PropsSchema().parse(props);
</script>

為了方便大大提供建議可查看下列程式碼:

<script setup lang="ts">
import { z } from 'zod';

const PropsBaseSchema = () =>
  z.object({
    placeholder: z.string().optional(),
    rules: z.array(z.any()).optional(),
    disable: z.boolean().optional(),
    readonly: z.boolean().optional(),
  });

const PropsSchema = () =>
  PropsBaseSchema().extend({
    type: z.enum(['text', 'password', 'textarea', 'email', 'search', 'tel', 'url']).optional(),
  });

type PropsDto = z.infer<ReturnType<typeof PropsSchema>>;

const props = withDefaults(defineProps<PropsDto>(), {
  type: 'text',
});

PropsSchema().parse(props); // Runtime validation
</script>

package.json

  "dependencies": {
    "@quasar/extras": "^1.16.16",
    "axios": "^1.7.9",
    "loglevel": "^1.9.2",
    "pinia": "^2.3.1",
    "quasar": "^2.17.7",
    "vue": "^3.5.13",
    "vue-i18n": "^11.0.1",
    "vue-router": "^4.5.0",
    "winston": "^3.17.0",
    "winston-daily-rotate-file": "^5.0.0",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.18.0",
    "@intlify/unplugin-vue-i18n": "^6.0.3",
    "@quasar/app-vite": "^2.0.8",
    "@types/node": "^22.10.9",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.3.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.18.0",
    "eslint-plugin-vue": "^9.32.0",
    "globals": "^15.14.0",
    "husky": "^9.1.7",
    "openapi-typescript-codegen": "^0.29.0",
    "prettier": "^3.4.2",
    "typescript": "~5.7.3",
    "vite-plugin-checker": "^0.8.0",
    "vue-tsc": "^2.1.6"
  },

https://ithelp.ithome.com.tw/upload/images/20250206/20135667P13ZE0UbGk.png

.

1 個回答

0

目前看起來是很明顯的宣告類型錯誤。

目前看來是這邊造成問題

type PropsDto = z.infer<ReturnType<typeof PropsSchema>>;

這邊會無法判斷類型而報您這個錯誤。

或許你可以改成直接調用的方式試試看

const PropsSchema = () => PropsBaseSchema().extend({ ... });

type PropsDto = z.infer<typeof PropsSchema>;

我最近也正在摸索TS的宣告類型寫法,碰了不少坑。
也不太確定這樣子做對不對,你試試吧。

我要發表回答

立即登入回答