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.