我這樣寫,但我的專案發生錯誤,請問大大該如何解決這個錯誤。
謝謝 辛苦了。
程式碼範例:
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"
},
目前看起來是很明顯的宣告類型錯誤。
目前看來是這邊造成問題
type PropsDto = z.infer<ReturnType<typeof PropsSchema>>;
這邊會無法判斷類型而報您這個錯誤。
或許你可以改成直接調用的方式試試看
const PropsSchema = () => PropsBaseSchema().extend({ ... });
type PropsDto = z.infer<typeof PropsSchema>;
我最近也正在摸索TS的宣告類型寫法,碰了不少坑。
也不太確定這樣子做對不對,你試試吧。