Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cfcd171

Browse files
authored
docs(directives): using global custom directives with typescript (#2640)
1 parent 0e51f49 commit cfcd171

File tree

3 files changed

+48
-1
lines changed

3 files changed

+48
-1
lines changed

‎src/guide/reusability/custom-directives.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@ app.directive('highlight', {
110110
})
111111
```
112112

113+
グローバルカスタムディレクティブは `vue` の `ComponentCustomProperties` インターフェースを拡張することで型付けすることが可能です
114+
115+
詳細: [カスタムグローバルディレクティブの型付け](/guide/typescript/composition-api#typing-global-custom-directives) <sup class="vt-badge ts" />
116+
113117
## カスタムディレクティブを使用するタイミング {#when-to-use}
114118

115119
カスタムディレクティブは DOM を直接操作することでしか必要な機能を実現できない場合にのみ使用してください。

‎src/guide/typescript/composition-api.md

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -468,7 +468,8 @@ import { useTemplateRef } from 'vue'
468468
import MyGenericModal from './MyGenericModal.vue'
469469
import type { ComponentExposed } from 'vue-component-type-helpers'
470470
471-
const modal = useTemplateRef<ComponentExposed<typeof MyGenericModal>>('modal')
471+
const modal =
472+
useTemplateRef<ComponentExposed<typeof MyGenericModal>>('modal')
472473
473474
const openModal = () => {
474475
modal.value?.open('newValue')
@@ -477,3 +478,41 @@ const openModal = () => {
477478
```
478479

479480
なお、`@vue/language-tools` 2.1 以降では、静的テンプレート参照の型は自動的に推論されるので、上記はエッジケースでのみ必要となります。
481+
482+
## カスタムグローバルディレクティブの型付け {#typing-global-custom-directives}
483+
484+
`app.directive()` で宣言されたグローバルカスタムディレクティブで型ヒントと型チェックを取得するために、`ComponentCustomProperties` を拡張することができます
485+
486+
```ts [src/directives/highlight.ts]
487+
import type { Directive } from 'vue'
488+
489+
export type HighlightDirective = Directive<HTMLElement, string>
490+
491+
declare module 'vue' {
492+
export interface ComponentCustomProperties {
493+
// v をプレフィックスとして付ける(v-highlight)
494+
vHighlight: HighlightDirective
495+
}
496+
}
497+
498+
export default {
499+
mounted: (el, binding) => {
500+
el.style.backgroundColor = binding.value
501+
}
502+
} satisfies HighlightDirective
503+
```
504+
505+
```ts [main.ts]
506+
import highlight from './directives/highlight'
507+
// ...その他のコード
508+
const app = createApp(App)
509+
app.directive('highlight', highlight)
510+
```
511+
512+
コンポーネントでの使用方法
513+
514+
```vue [App.vue]
515+
<template>
516+
<p v-highlight="'blue'">This sentence is important!</p>
517+
</template>
518+
```

‎src/guide/typescript/options-api.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,3 +291,7 @@ declare module 'vue' {
291291
参照:
292292

293293
- [コンポーネントの型拡張の TypeScript の単体テスト](https://github.com/vuejs/core/blob/main/packages-private/dts-test/componentTypeExtensions.test-d.tsx)
294+
295+
## カスタムグローバルディレクティブの型付け {#typing-global-custom-directives}
296+
297+
参照: [カスタムグローバルディレクティブの型付け](/guide/typescript/composition-api#typing-global-custom-directives) <sup class="vt-badge ts" />

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /