feat: global type definition (#508)

* remove message type at vue layer

* implement: global type definition for locale message

* implement: global type definition for datetime format

* refactoring

* implement: global type definition for number format

* refactoring

* update comments

* add examples

* fix lint warnings and formatting

Author: kazupon

examples/type-safe/README.md

@@ -0,0 +1,5 @@
+# global-type-definition
+
+This is one of the type-safe i18n resources examples.
+
+This example is how to usage of global type definition for i18n resources in global scope.

examples/type-safe/.gitignore renamed to examples/type-safe/global-type-definition/.gitignore

@@ -0,0 +1,21 @@
+{
+  "name": "global-type-definition",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.11",
+    "vue-i18n": "link:../../packages/vue-i18n"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.11",
+    "typescript": "^4.1.3",
+    "vite": "^2.3.4",
+    "vue-tsc": "^0.0.24"
+  }
+}

examples/type-safe/global-type-definition/README.md

@@ -0,0 +1,26 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import HelloWorld from './components/HelloWorld.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+})
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

examples/type-safe/index.html renamed to examples/type-safe/global-type-definition/index.html

@@ -0,0 +1,21 @@
+<template>
+  <p>`t` resource key completion: {{ t('menu.login') }}</p>
+  <p>`d` resource key completion: {{ d(new Date(), 'short') }}</p>
+  <p>`n` resource key completion: {{ n(1000, 'currency') }}</p>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export default defineComponent({
+  name: 'HelloWorld',
+  setup() {
+    // use global scope
+    const { t, d, n } = useI18n({
+      inheritLocale: true,
+    })
+    return { t, d, n }
+  }
+})
+</script>

examples/type-safe/global-type-definition/package.json

@@ -0,0 +1,7 @@
+{
+  "hello": "こんにちは、世界！",
+  "menu": {
+    "login": "ログイン"
+  },
+  "errors": ["エラー！"]
+}