diff --git a/package-lock.json b/package-lock.json
index 91f20af..03d50a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,14 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
+ "@types/jest": "^28.1.6",
+ "@types/node": "^18.6.5",
+ "@types/react": "^18.0.17",
+ "@types/react-dom": "^18.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
+ "typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"devDependencies": {
@@ -3912,9 +3917,9 @@
"dev": true
},
"node_modules/@types/node": {
- "version": "18.6.4",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.4.tgz",
- "integrity": "sha512-I4BD3L+6AWiUobfxZ49DlU43gtI+FTHSv9pE2Zekg6KjMpre4ByusaljW3vYSLJrvQ1ck1hUaeVu8HVlY3vzHg=="
+ "version": "18.6.5",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.5.tgz",
+ "integrity": "sha512-Xjt5ZGUa5WusGZJ4WJPbOT8QOqp6nDynVFRKcUt32bOgvXEoc6o085WNkYTMO7ifAj2isEfQQ2cseE+wT6jsRw=="
},
"node_modules/@types/parse-json": {
"version": "4.0.0",
@@ -3947,9 +3952,9 @@
"integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
},
"node_modules/@types/react": {
- "version": "18.0.16",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.16.tgz",
- "integrity": "sha512-3vX1dzVucqc2nhXtzyaParTIIRZeNbisRqLE7QdeLomVybEyeiuAouzZXgz71P+2kbJOqj3dy0fzoATg2I06GQ==",
+ "version": "18.0.17",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.17.tgz",
+ "integrity": "sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==",
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -16177,7 +16182,6 @@
"version": "4.7.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
- "peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -19959,9 +19963,9 @@
"dev": true
},
"@types/node": {
- "version": "18.6.4",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.4.tgz",
- "integrity": "sha512-I4BD3L+6AWiUobfxZ49DlU43gtI+FTHSv9pE2Zekg6KjMpre4ByusaljW3vYSLJrvQ1ck1hUaeVu8HVlY3vzHg=="
+ "version": "18.6.5",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.5.tgz",
+ "integrity": "sha512-Xjt5ZGUa5WusGZJ4WJPbOT8QOqp6nDynVFRKcUt32bOgvXEoc6o085WNkYTMO7ifAj2isEfQQ2cseE+wT6jsRw=="
},
"@types/parse-json": {
"version": "4.0.0",
@@ -19994,9 +19998,9 @@
"integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
},
"@types/react": {
- "version": "18.0.16",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.16.tgz",
- "integrity": "sha512-3vX1dzVucqc2nhXtzyaParTIIRZeNbisRqLE7QdeLomVybEyeiuAouzZXgz71P+2kbJOqj3dy0fzoATg2I06GQ==",
+ "version": "18.0.17",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.17.tgz",
+ "integrity": "sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -28662,8 +28666,7 @@
"typescript": {
"version": "4.7.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
- "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
- "peer": true
+ "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ=="
},
"unbox-primitive": {
"version": "1.0.2",
diff --git a/package.json b/package.json
index d8b02a7..4d39568 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,14 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
+ "@types/jest": "^28.1.6",
+ "@types/node": "^18.6.5",
+ "@types/react": "^18.0.17",
+ "@types/react-dom": "^18.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
+ "typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/src/App.test.js b/src/App.test.tsx
similarity index 90%
rename from src/App.test.js
rename to src/App.test.tsx
index 21895b2..2ed68e1 100644
--- a/src/App.test.js
+++ b/src/App.test.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
import { render, screen } from '@testing-library/react'
import App from './App'
diff --git a/src/App.js b/src/App.tsx
similarity index 71%
rename from src/App.js
rename to src/App.tsx
index 3784575..c1a3df8 100644
--- a/src/App.js
+++ b/src/App.tsx
@@ -1,5 +1,7 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+
+import logo from './logo.svg'
+import './App.css'
function App() {
return (
@@ -7,7 +9,7 @@ function App() {
- );
+ )
}
-export default App;
+export default App
diff --git a/src/index.js b/src/index.tsx
similarity index 78%
rename from src/index.js
rename to src/index.tsx
index 6fac6cd..985cf9a 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -1,13 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import * as serviceWorkerRegistration from './serviceWorkerRegistration'
-
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
-const root = ReactDOM.createRoot(document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
@@ -17,6 +15,4 @@ root.render(
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals(console.log)
-
-serviceWorkerRegistration.register()
+reportWebVitals()
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
new file mode 100644
index 0000000..57a24a2
--- /dev/null
+++ b/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals'
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry)
+ getFID(onPerfEntry)
+ getFCP(onPerfEntry)
+ getLCP(onPerfEntry)
+ getTTFB(onPerfEntry)
+ })
+ }
+}
+
+export default reportWebVitals
diff --git a/src/setupTests.js b/src/setupTests.ts
similarity index 85%
rename from src/setupTests.js
rename to src/setupTests.ts
index 8f2609b..52aaef1 100644
--- a/src/setupTests.js
+++ b/src/setupTests.ts
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..9d379a3
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src"]
+}