docs: Update TypeScript setup to be more robust (#973)

Closes #953

Author: amannn

docs/pages/docs/workflows/typescript.mdx

@@ -28,12 +28,17 @@ function About() {
 To enable this validation, add a global type definition file in your project root (e.g. `global.d.ts`):
 
 ```jsx filename="global.d.ts"
-// Use type safe message keys with `next-intl`
-type Messages = typeof import('./messages/en.json');
-declare interface IntlMessages extends Messages {}
+import en from './messages/en.json';
+
+type Messages = typeof en;
+
+declare global {
+  // Use type safe message keys with `next-intl`
+  interface IntlMessages extends Messages {}
+}
 ```
 
-You can freely define the interface, but if you have your messages available locally, it can be helpful to automatically create the interface based on a messages sample by importing it.
+You can freely define the interface, but if you have your messages available locally, it can be helpful to automatically create the interface based on the messages from your default locale by importing it.
 
 **If you're encountering problems, please double check that:**
 

examples/example-app-router-next-auth/global.d.ts

@@ -1,3 +1,8 @@
-// Use type safe message keys with `next-intl`
-type Messages = typeof import('./messages/en.json');
-declare interface IntlMessages extends Messages {}
+import en from './messages/en.json';
+
+type Messages = typeof en;
+
+declare global {
+  // Use type safe message keys with `next-intl`
+  interface IntlMessages extends Messages {}
+}

examples/example-app-router-playground/global.d.ts

@@ -1,3 +1,8 @@
-// Declaring this interface provides type safety for message keys
-type Messages = typeof import('./messages/en.json');
-declare interface IntlMessages extends Messages {}
+import en from './messages/en.json';
+
+type Messages = typeof en;
+
+declare global {
+  // Use type safe message keys with `next-intl`
+  interface IntlMessages extends Messages {}
+}

examples/example-app-router/global.d.ts

@@ -1,3 +1,8 @@
-// Use type safe message keys with `next-intl`
-type Messages = typeof import('./messages/en.json');
-declare interface IntlMessages extends Messages {}
+import en from './messages/en.json';
+
+type Messages = typeof en;
+
+declare global {
+  // Use type safe message keys with `next-intl`
+  interface IntlMessages extends Messages {}
+}

examples/example-pages-router-advanced/global.d.ts

@@ -1,3 +1,8 @@
-// Use type safe message keys with `next-intl`
-type Messages = typeof import('./messages/en.json');
-declare interface IntlMessages extends Messages {}
+import en from './messages/en.json';
+
+type Messages = typeof en;
+
+declare global {
+  // Use type safe message keys with `next-intl`
+  interface IntlMessages extends Messages {}
+}

examples/example-pages-router/global.d.ts

@@ -1,3 +1,8 @@
-// Use type safe message keys with `next-intl`
-type Messages = typeof import('./messages/en.json');
-declare interface IntlMessages extends Messages {}
+import en from './messages/en.json';
+
+type Messages = typeof en;
+
+declare global {
+  // Use type safe message keys with `next-intl`
+  interface IntlMessages extends Messages {}
+}