Add typescript examples (#1578)

example/react-typescript4.1/namespaces/.gitignore → example/react-typescript/simple-multi-namespaces/.gitignore

@@ -22,4 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.eslintcache
+package-lock.json

example/react-typescript4.1/no-namespaces/README.md → example/react-typescript/simple-multi-namespaces/README.md

@@ -6,20 +6,20 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
-### `yarn start`
+### `npm start`
 
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn test`
+### `npm test`
 
 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `yarn build`
+### `npm run build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -29,7 +29,7 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
+### `npm run eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 

example/react-typescript4.1/namespaces/package.json → example/react-typescript/simple-multi-namespaces/package.json

@@ -1,32 +1,27 @@
 {
-  "name": "react-typescript4.1",
-  "version": "0.1.0",
+  "name": "simple-multi-namespaces",
+  "version": "1.0.0",
   "private": true,
-  "devDependencies": {
-    "@types/jest": "26.0.15",
-    "@types/node": "12.0.0",
-    "@types/react": "17.0.1",
-    "@types/react-dom": "16.9.8",
-    "typescript": "4.1.2"
-  },
   "dependencies": {
-    "i18next": "20.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-i18next": "11.8.x",
-    "react-scripts": "4.0.1",
-    "web-vitals": "0.2.4"
+    "i18next": "^22.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.8.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {

example/react-typescript/simple-multi-namespaces/src/@types/i18next.d.ts

@@ -0,0 +1,8 @@
+import { resources, defaultNS } from '../i18n/config';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: typeof defaultNS;
+    resources: typeof resources['en'];
+  }
+}

example/react-typescript/simple-multi-namespaces/src/App.tsx

@@ -0,0 +1,16 @@
+import './i18n/config';
+import { useTranslation } from 'react-i18next';
+
+function App() {
+  const {t} = useTranslation();
+
+  return (
+    <div className="App">
+      <p>{t('title')}</p>
+      <p>{t('description.part1')}</p>
+      <p>{t('description.part2')}</p>
+    </div>
+  );
+}
+
+export default App;

example/react-typescript/simple-multi-namespaces/src/components/Comp1.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18next";
+
+function Comp1() {
+  const {t} = useTranslation();
+
+  return (
+    <div className="App">
+      <p>{t('title')}</p>
+      <p>{t('description.part1')}</p>
+      <p>{t('description.part2')}</p>
+    </div>
+  );
+}
+
+export default Comp1;

example/react-typescript/simple-multi-namespaces/src/components/Comp2.tsx

@@ -0,0 +1,14 @@
+import { useTranslation } from "react-i18next";
+
+function Comp2() {
+  const {t} = useTranslation('ns2');
+
+  return (
+    <div className="App">
+      <p>{t('description.part1')}</p>
+      <p>{t('description.part2')}</p>
+    </div>
+  );
+}
+
+export default Comp2;

example/react-typescript/simple-multi-namespaces/src/components/Comp3.tsx

@@ -0,0 +1,14 @@
+import { useTranslation } from "react-i18next";
+
+function Comp2() {
+  const {t} = useTranslation(['ns1', 'ns2']);
+
+  return (
+    <div className="App">
+      <p>{t('ns1:description.part1')}</p>
+      <p>{t('ns2:description.part2')}</p>
+    </div>
+  );
+}
+
+export default Comp2;

example/react-typescript/simple-multi-namespaces/src/i18n/config.ts

@@ -0,0 +1,20 @@
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import ns1 from './en/ns1.json';
+import ns2 from './en/ns2.json';
+
+export const defaultNS = 'ns1';
+
+export const resources = {
+  en: {
+    ns1,
+    ns2,
+  }
+};
+
+i18next.use(initReactI18next).init({
+  lng: 'en', // if you're using a language detector, do not define the lng option
+  debug: true,
+  resources,
+  defaultNS,
+});

example/react-typescript/simple-multi-namespaces/src/i18n/en/ns1.json

@@ -0,0 +1,7 @@
+{
+  "title": "Welcome to react using react-i18next fully type-safe",
+  "description": {
+    "part1": "This is a simple example.",
+    "part2": "😉"
+  }
+}

example/react-typescript4.1/namespaces/src/i18n/en/ns2.json → example/react-typescript/simple-multi-namespaces/src/i18n/en/ns2.json

@@ -1,6 +1,6 @@
 {
   "description": {
     "part1": "In order to infer the appropriate type for t function, you should use type augmentation to override the Resources type.",
-    "part2": "Check out the @types/react-i18next to see an example."
+    "part2": "Check out the @types/i18next to see an example."
   }
 }

example/react-typescript/simple-multi-namespaces/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

example/react-typescript4.1/namespaces/tsconfig.json → example/react-typescript/simple-multi-namespaces/tsconfig.json

@@ -21,7 +21,6 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src",
-    "@types"
+    "src"
   ]
 }

example/react-typescript4.1/no-namespaces/.gitignore → example/react-typescript/simple/.gitignore

@@ -22,4 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.eslintcache
+package-lock.json

example/react-typescript4.1/namespaces/README.md → example/react-typescript/simple/README.md

@@ -6,20 +6,20 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
-### `yarn start`
+### `npm start`
 
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn test`
+### `npm test`
 
 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `yarn build`
+### `npm run build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -29,7 +29,7 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
+### `npm run eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 

example/react-typescript4.1/no-namespaces/package.json → example/react-typescript/simple/package.json

@@ -1,32 +1,27 @@
 {
-  "name": "react-typescript4.1",
-  "version": "0.1.0",
+  "name": "simple",
+  "version": "1.0.0",
   "private": true,
-  "devDependencies": {
-    "@types/jest": "26.0.15",
-    "@types/node": "12.0.0",
-    "@types/react": "17.0.1",
-    "@types/react-dom": "16.9.8",
-    "typescript": "4.1.2"
-  },
   "dependencies": {
-    "i18next": "20.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-i18next": "11.8.x",
-    "react-scripts": "4.0.1",
-    "web-vitals": "0.2.4"
+    "i18next": "^22.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.8.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {

example/react-typescript/simple/src/@types/i18next.d.ts

@@ -0,0 +1,7 @@
+import { resources } from '../i18n/config';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    resources: typeof resources['en'];
+  }
+}

example/react-typescript/simple/src/App.tsx

@@ -0,0 +1,16 @@
+import './i18n/config';
+import { useTranslation } from 'react-i18next';
+
+function App() {
+  const {t} = useTranslation();
+
+  return (
+    <div className="App">
+      <p>{t('title')}</p>
+      <p>{t('description.part1')}</p>
+      <p>{t('description.part2')}</p>
+    </div>
+  );
+}
+
+export default App;

example/react-typescript/simple/src/i18n/config.ts

@@ -0,0 +1,15 @@
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import translation from './en/translation.json';
+
+export const resources = {
+  en: {
+    translation,
+  }
+};
+
+i18next.use(initReactI18next).init({
+  lng: 'en', // if you're using a language detector, do not define the lng option
+  debug: true,
+  resources,
+});

example/react-typescript/simple/src/i18n/en/translation.json

@@ -0,0 +1,7 @@
+{
+  "title": "Welcome to react using react-i18next fully type-safe",
+  "description": {
+    "part1": "This is a simple example.",
+    "part2": "😉"
+  }
+}

example/react-typescript/simple/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

example/react-typescript4.1/no-namespaces/tsconfig.json → example/react-typescript/simple/tsconfig.json

@@ -21,7 +21,6 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src",
-    "@types"
+    "src"
   ]
 }