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:https://localhost:3000](http:https://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:https://localhost:3000](http:https://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"
  ]
 }