Type safe improvements (#489)

* improvement: more type safe

* WIP: build passing

* WIP: composer type-safe implementation

* more updates

* updates

* updates

* export APIs

* tweak types

* add legacy API type safe

* add createI18n and useI18n typesafe

* tweak

* tweak

* more tweaks

* updates

* updates

* update

* update component injection APIs

* add type-safe example

* update processor for api-docs-gen

* tweaks

* update docs

* tweak

* more tweaks

* update type-safe example

Author: kazupon

.gitignore

@@ -1,7 +1,7 @@
 dist
 docs/api/*.md
 !docs/api/injection.md
-types
+packages/vue-i18n/index.html
 temp
 coverage
 node_modules

.vscode/settings.json

@@ -10,5 +10,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "volar.tsPlugin": true
 }

examples/lazy-loading/vite/package.json

@@ -6,15 +6,15 @@
     "dev": "vite"
   },
   "dependencies": {
-    "vue": "^3.0.7",
-    "vue-i18n": "^9.0.0",
-    "vue-router": "^4.0.5"
+    "vue": "^3.0.11",
+    "vue-i18n": "link:../../packages/vue-i18n",
+    "vue-router": "^4.0.8"
   },
   "devDependencies": {
-    "@intlify/vite-plugin-vue-i18n": "^2.0.2",
-    "@vitejs/plugin-vue": "^1.1.5",
-    "@vue/compiler-sfc": "^3.0.7",
-    "vite": "^2.0.5"
+    "@intlify/vite-plugin-vue-i18n": "^2.1.2",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.11",
+    "vite": "^2.3.0"
   },
   "private": true
 }

examples/lazy-loading/vite/src/App.vue

@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, watch, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -50,7 +50,7 @@ export default defineComponent({
 
     // sync to switch locale from router locale path
     watch(router.currentRoute, route => {
-      currentLocale.value = route.params.locale
+      currentLocale.value = route.params.locale as string
     })
 
     /**
@@ -61,7 +61,7 @@ export default defineComponent({
      */
     watch(currentLocale, val => {
       router.push({
-        name: router.currentRoute.value.name,
+        name: router.currentRoute.value.name!,
         params: { locale: val }
       })
     })

examples/lazy-loading/vite/src/i18n.ts

@@ -6,7 +6,7 @@ import type { I18n, I18nOptions, Composer } from 'vue-i18n'
 export const SUPPORT_LOCALES = ['en', 'ja']
 
 export function setupI18n(options: I18nOptions = { locale: 'en' }): I18n {
-  const i18n = createI18n(options) as I18n
+  const i18n = createI18n(options)
   setI18nLanguage(i18n, options.locale!)
   return i18n
 }
@@ -24,12 +24,12 @@ export function setI18nLanguage(i18n: I18n, locale: string): void {
    *
    * axios.defaults.headers.common['Accept-Language'] = locale
    */
-  document.querySelector('html').setAttribute('lang', locale)
+  document.querySelector('html')!.setAttribute('lang', locale)
 }
 
 export async function loadLocaleMessages(i18n: I18n, locale: string) {
   // load locale messages
-  const messages = await import(/* @vite-ignore */ `./locales/${locale}.yaml`)
+  const messages = await import(/* @vite-ignore */ `./locales/${locale}.json`)
 
   // set locale and locale message
   i18n.global.setLocaleMessage(locale, messages.default)