「Type '{}' has no call signatures.」を解決したい

Question

実現したいこと

• 「Vue: This expression is not callable. Type '{}' has no call signatures.」のエラーが出ないようにする

前提

vue3.xでTypeScriptの勉強をしています。
main.tsにてdayjsをインポートして、provideし、別のvueコンポーネントでinjectして使用する際に、
下記のエラーメッセージが表示されました。

発生している問題・エラーメッセージ

Vue: This expression is not callable. Type '{}' has no call signatures.

該当のソースコード

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/'
import store from '@/store/'

import dayjs from 'dayjs'
import 'dayjs/locale/ja'
dayjs.locale('ja')

const app = createApp(App)
app.use(store)
app.use(router)
app.provide('dayjs', dayjs)
app.mount('#app')

<template></template>
<script setup lang="ts">
import { ref, inject } from 'vue'
const dayjs = inject('dayjs')
const currentTime = ref('')

const bbb = () => {
  currentTime.value = dayjs().format('YYYY')
}
</script>

試したこと

const dayjs = inject('dayjs', null)

にすることで、エラーを回避することはできましたが、とりあえずの対策でしかないような気がします。
根本解決するにはどうしたらよいでしょうか。

また、Day.vueにて、下記のように、型を指定しても、
「Vue: This expression is not callable. Type '{Dayjs}' has no call signatures.」
が発生しました。

import { Dayjs } from 'dayjs'
const dayjs = inject<Dayjs>('dayjs')

補足情報（FW/ツールのバージョンなど）

"dayjs": "^1.11.9"
"vue": "^3.3.4"
"typescript": "~5.1.6"

Answer 1

SPAでいきなり依存関係にある変数を注入しているからです。なのでdayjsは初期値が決まっていない状態で、provideから受け取った値に対し、
this expression is not callable. Type '{}' has no call signatures.*
(型宣言してねえから、この式は呼び出せない！）
って怒ってるのです。

なので、公式マニュアルにもある通り、初期値を設定しておけば、いちおうは問題なく通ります。
const dayjs = inject('dayjs', null)

https://ja.vuejs.org/guide/components/provide-inject.html#provide

ちなみに、型を宣言しようとしてエラーになった件ですが

import {Dayjs } from 'Day.js' //これだとDay.jsの中にDayjsと定義された定義変数のオブジェクトが存在しているという前提になる

Dayjsが本当に型を宣言しているのかどうか確認してみてください。どうも別のものを指している気がします。

https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject

Comments

[like_any_other]

回答ありがとうございます。
import { Dayjs } from のDayjsを調べてみたところ、見る限りでは型定義オブジェクトっぽかったのですが、
エラーが発生するので、初期値をnullで設定するようにしました。

const dayjs = inject('dayjs', null)

ご丁寧な回答、ありがとうございました。