vuejs2 - "Kan inte hitta namn" på global instansegenskap när man använder Composition API med TypeScript i Vue 2.7
Jag arbetar med att uppgradera ett gammalt Vue-projekt som använder TypeScript och class component definition-stilen. Efter att ha uppgraderat Vue till version 2.7.13 försöker jag migrera komponenter till Composition API-stilen, men jag har ett specifikt problem - globala instansegenskaper verkar inte fungera längre.
Till exempel har jag en global instansegenskap som heter $capitalize tillagd på Vue.prototype och när jag använder komponenter i den gamla klass-stilen fungerar appen bra. Jag kan också få full typkontroll och Intellisense genom att använda modulaugmentering:
declare module 'vue/types/vue' {
interface Vue {
$capitalize: (string: string) => string,
}
}
Vue.prototype.$capitalize = capitalize
men om jag omstrukturerar samma komponenter för att använda Composition API visar VSCode ett fel som följer:
Cannot find name '$capitalize'. ts(2304)
och komponenten renderas inte heller på grund av att den egenskapen saknas.
Jag använder VSCode med Volar och Volar TypeScript Vue Plugin och den inbyggda TypeScript and JavaScript Language Features-tillägget inaktiverad, enligt Volar-dokumentationen.
Jag vet att i Vue 3 är man tänkt att använda app.config.globalProperties men detta har uppenbarligen inte bakåtkompatibilitet till Vue 2.7.
Jag försökte använda denna shim i types/sfc.d.ts:
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
Jag försökte också pilla med tsconfig.json, genom att lägga till och ta bort dessa:
compilerOptions.jsx = "preserve"
compilerOptions.typeRoots
include
files
Jag försökte använda olika varianter av Composition API - med och utan defineComponent, med och utan <script setup>.
Jag såg i den här kommentaren att jag faktiskt kan komma åt root-instansen i onMounted, så i det sammanhanget skulle this.$capitalize fungera, men vad händer om jag vill använda det utanför onMounted? Vad skulle vara det "korrekta" sättet att tillhandahålla något globalt i setup-funktionen för alla komponenter i Vue 2?