我这样写，但我的专案发生错误，请问大大该如何解决这个错误。谢谢 辛苦了。
程式码范例：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"
},
1 个回答
0
㊣浩瀚星空㊣
iT邦大神 1 级 ‧ 2025-02-07 11:29:09
目前看起来是很明显的宣告类型错误。
目前看来是这边造成问题
type PropsDto = z.infer<ReturnType<typeof PropsSchema>>;
这边会无法判断类型而报您这个错误。
或许你可以改成直接调用的方式试试看
const PropsSchema = () => PropsBaseSchema().extend({ ... });
type PropsDto = z.infer<typeof PropsSchema>;
我最近也正在摸索TS的宣告类型写法，碰了不少坑。
也不太确定这样子做对不对，你试试吧。