Modifiers for custom directives don't give correct types in template, is it just me?

[ozzyfromspace]

This may be a bug, but I chose to start here in case I'm missing something.

TL;DR: I can't figure out how to declare a custom directive with an OPTIONAL set of modifiers. Any advice?

Detailed:

Lets say we have:

<script setup lang="ts"> import type { ObjectDirective } from "vue"  type Both = ObjectDirective<HTMLInputElement, number, "lazy" | "trim"> const vCustom: Both = {} </script> <template> <input v-custom.lazy="1" > </template>

you should get a TS error where the directive is used:

Property 'trim' is missing in type '{ lazy: true; }' but required in type 'DirectiveModifiers<"lazy" | "trim">'.ts-plugin(2741) runtime-core.d.ts(402, 5): The expected type comes from property 'modifiers' which is declared here on type 'DirectiveBinding<number, "lazy" | "trim", string>' (property) lazy: boolean

Essentially, the type checker (via DirectiveBinding in runtime-core.d.ts) wants both modifiers to be specified, i.e.

<template> <input v-custom.lazy.trim="1" > </template>

I checked the types in runtime-core.d.ts and the modifiers type boils down to a record like:

Record<Modifiers, boolean> // Modifiers is a string literal like "trim" | "lazy"

This gives the full object type with required keys, which the type-checker is complaining about.

Now, the catch is that v-model.trim is perfectly fine (type-safe and no issues). this begs the question....

Am I doing something when declaring the modifier types for my hypothetical v-custom directive? This could be a bug. But then again, maybe it's just me misunderstanding something about how types work for custom directives.

Many thanks for any insights 🙏🏽

Context: I'm really into exact types ✨

[ozzyfromspace]

additional info in case you find it helpful ☮️. this is the tsconfig in vue project where I failed to create a directive with optional modifiers:

{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "moduleResolution": "Node", "strict": true, "noUncheckedIndexedAccess": true, "noFallthroughCasesInSwitch": true, "noEmitOnError": true, "noImplicitAny": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noUncheckedSideEffectImports": true, "noUnusedLocals": true, "noUnusedParameters": true, "useUnknownInCatchVariables": true, "exactOptionalPropertyTypes": true, "noImplicitReturns": true, "noImplicitThis": true, "pretty": true, "removeComments": false, "strictBuiltinIteratorReturn": true, "strictFunctionTypes": false, "esModuleInterop": true, "emitDeclarationOnly": false, "declaration": true, "skipLibCheck": true, "baseUrl": ".", "isolatedModules": true, "forceConsistentCasingInFileNames": true, "incremental": false }, "include": [ "src", "types" ], "exclude": [ "dist", "node_modules", "playground", ".nuxt" ] }

Again, thank you!

[jh-leong]

This is a known issue, you can address it at #12604

[ozzyfromspace]

This is a known issue, you can address it at #12604

I appreciate the context @jh-leong, I was gonna propose a pr but an awesome contributor beat me to it haha. Thanks, and take care.