From 469a2877674f08436b436e1c294b7c5fb5e0323e Mon Sep 17 00:00:00 2001
From: Dennis Siqueira <ti.dennissiqueira@gmail.com>
Date: Thu, 23 Mar 2023 09:52:02 -0300
Subject: [PATCH] feat: typescript migration (#833)

* feat: initial commit for typescript migration

* fix: tsconfig with next

* feat: migrate footer to ts

* feat: migrate components to ts

* fix: prettier error

* fix: prettier error

* fix: all lint errors

* fix: remove unused vscode settings

* fix: migrate and improve widget.js

* feat: migrate all helpers to ts

* fix: types

* feat: migrate api to ts

* feat: migrate page files

* Fix for tz Page component is not being set correctly when the component is rendered

* Add type check to ensure that router.query.tz is a string

---------

Co-authored-by: Alexis Sgarbossa <alexis@sgarbossa.com.ar>
---
 component/footer.js                     |  59 -------------
 component/footer.tsx                    |  66 +++++++++++++++
 component/head.js                       |  43 ----------
 component/head.tsx                      |  45 ++++++++++
 component/{timezone.js => timezone.tsx} |  27 +++---
 component/widget.js                     |  75 -----------------
 component/widget.tsx                    |  67 +++++++++++++++
 helpers/{constans.js => constans.ts}    |  14 ++--
 helpers/{reasons.js => reasons.ts}      |   2 +-
 helpers/{time.js => time.ts}            |  59 ++++++-------
 helpers/{timezones.js => timezones.ts}  |   0
 next-env.d.ts                           |   5 ++
 package-lock.json                       |  87 +++++++++++++++++--
 package.json                            |   5 +-
 pages/{_app.js => _app.tsx}             |   5 +-
 pages/_document.js                      |  26 ------
 pages/_document.tsx                     |  17 ++++
 pages/api/{index.js => index.ts}        |  16 +++-
 pages/api/slack/{index.js => index.ts}  |  20 ++++-
 pages/index.js                          |  86 -------------------
 pages/index.tsx                         |  68 +++++++++++++++
 tsconfig.json                           | 106 ++++++++++++++++++++++++
 22 files changed, 549 insertions(+), 349 deletions(-)
 delete mode 100644 component/footer.js
 create mode 100644 component/footer.tsx
 delete mode 100644 component/head.js
 create mode 100644 component/head.tsx
 rename component/{timezone.js => timezone.tsx} (53%)
 delete mode 100644 component/widget.js
 create mode 100644 component/widget.tsx
 rename helpers/{constans.js => constans.ts} (78%)
 rename helpers/{reasons.js => reasons.ts} (99%)
 rename helpers/{time.js => time.ts} (72%)
 rename helpers/{timezones.js => timezones.ts} (100%)
 create mode 100644 next-env.d.ts
 rename pages/{_app.js => _app.tsx} (63%)
 delete mode 100644 pages/_document.js
 create mode 100644 pages/_document.tsx
 rename pages/api/{index.js => index.ts} (62%)
 rename pages/api/slack/{index.js => index.ts} (64%)
 delete mode 100644 pages/index.js
 create mode 100644 pages/index.tsx
 create mode 100644 tsconfig.json

diff --git a/component/footer.js b/component/footer.js
deleted file mode 100644
index 3f564c0a..00000000
--- a/component/footer.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react'
-import Timezone from './timezone'
-
-const Footer = (props) => (
-  <>
-    <ul className="footer-list">
-      <li>Share:</li>
-      <li>
-        <a
-          href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fshouldideploy.today%2F&t=Should%20I%20Deploy%20Today%3F"
-          target="_blank"
-          rel="noopener noreferrer"
-          title="Share on Facebook"
-        >
-          Facebook
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fshouldideploy.today%2F&text=Should%20I%20Deploy%20Today%3F:%20http%3A%2F%2Fshouldideploy.today"
-          target="_blank"
-          rel="noopener noreferrer"
-          title="Tweet"
-        >
-          Twitter
-        </a>
-      </li>
-      <li>
-        Source:{' '}
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="http://github.com/baires/shouldideploy/"
-        >
-          Github
-        </a>
-      </li>
-      <li>
-        Timezone:{' '}
-        <Timezone onChange={props.changeTimeZone} timezone={props.timezone} />
-      </li>
-    </ul>
-
-    <ul className="footer-list">
-      <li>
-        <a href={'/api?tz=' + props.timezone}>
-          <mark>API</mark>
-        </a>
-      </li>
-      <li>
-        <a href={'/api/slack?tz=' + props.timezone}>
-          <mark>Slack API</mark>
-        </a>
-      </li>
-    </ul>
-  </>
-)
-
-export default Footer
diff --git a/component/footer.tsx b/component/footer.tsx
new file mode 100644
index 00000000..5c92fb0c
--- /dev/null
+++ b/component/footer.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import Timezone from './timezone'
+
+interface IFooter {
+  changeTimezone: (timezone: string) => void
+  timezone: string
+}
+
+const Footer = (props: IFooter) => {
+  return (
+    <>
+      <ul className="footer-list">
+        <li>Share:</li>
+        <li>
+          <a
+            href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fshouldideploy.today%2F&t=Should%20I%20Deploy%20Today%3F"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Share on Facebook"
+          >
+            Facebook
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fshouldideploy.today%2F&text=Should%20I%20Deploy%20Today%3F:%20http%3A%2F%2Fshouldideploy.today"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Tweet"
+          >
+            Twitter
+          </a>
+        </li>
+        <li>
+          Source:{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="http://github.com/baires/shouldideploy/"
+          >
+            Github
+          </a>
+        </li>
+        <li>
+          Timezone:{' '}
+          <Timezone onChange={props.changeTimezone} timezone={props.timezone} />
+        </li>
+      </ul>
+
+      <ul className="footer-list">
+        <li>
+          <a href={'/api?tz=' + props.timezone}>
+            <mark>API</mark>
+          </a>
+        </li>
+        <li>
+          <a href={'/api/slack?tz=' + props.timezone}>
+            <mark>Slack API</mark>
+          </a>
+        </li>
+      </ul>
+    </>
+  )
+}
+
+export default Footer
diff --git a/component/head.js b/component/head.js
deleted file mode 100644
index 8cc2f506..00000000
--- a/component/head.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-
-const Head = () => (
-  <>
-    <meta charSet="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <meta
-      name="description"
-      content="A friendly reminder to all Developers, Designers, CEO's"
-    />
-
-    <meta itemProp="name" content="Should I Deploy Today" />
-    <meta
-      itemProp="description"
-      content="A friendly reminder to all Developers, Designers, CEO's"
-    />
-
-    <meta name="twitter:card" content="summary" />
-    <meta name="twitter:title" content="Should I Deploy Today" />
-    <meta
-      name="twitter:description"
-      content="A friendly reminder to all Developers, Designers, CEO's"
-    />
-
-    <meta property="og:title" content="Should I Deploy Today" />
-    <meta
-      property="og:description"
-      content="A friendly reminder to all Developers, Designers, CEO's"
-    />
-    <meta property="og:url" content="https://shouldideploy.today" />
-    <meta property="og:site_name" content="Should I Deploy Today" />
-    <meta property="og:type" content="website" />
-
-    <meta name="theme-color" content="#1E1F29" />
-    <script
-      defer
-      src="https://static.cloudflareinsights.com/beacon.min.js"
-      data-cf-beacon='{"token": "f87541717296439a86907c81d3effe69"}'
-    ></script>
-  </>
-)
-
-export default Head
diff --git a/component/head.tsx b/component/head.tsx
new file mode 100644
index 00000000..def8552c
--- /dev/null
+++ b/component/head.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+const Head = () => {
+  return (
+    <>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width" />
+      <meta
+        name="description"
+        content="A friendly reminder to all Developers, Designers, CEO's"
+      />
+
+      <meta itemProp="name" content="Should I Deploy Today" />
+      <meta
+        itemProp="description"
+        content="A friendly reminder to all Developers, Designers, CEO's"
+      />
+
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:title" content="Should I Deploy Today" />
+      <meta
+        name="twitter:description"
+        content="A friendly reminder to all Developers, Designers, CEO's"
+      />
+
+      <meta property="og:title" content="Should I Deploy Today" />
+      <meta
+        property="og:description"
+        content="A friendly reminder to all Developers, Designers, CEO's"
+      />
+      <meta property="og:url" content="https://shouldideploy.today" />
+      <meta property="og:site_name" content="Should I Deploy Today" />
+      <meta property="og:type" content="website" />
+
+      <meta name="theme-color" content="#1E1F29" />
+      <script
+        defer
+        src="https://static.cloudflareinsights.com/beacon.min.js"
+        data-cf-beacon='{"token": "f87541717296439a86907c81d3effe69"}'
+      ></script>
+    </>
+  )
+}
+
+export default Head
diff --git a/component/timezone.js b/component/timezone.tsx
similarity index 53%
rename from component/timezone.js
rename to component/timezone.tsx
index 1b3eefd6..c3150969 100644
--- a/component/timezone.js
+++ b/component/timezone.tsx
@@ -1,20 +1,25 @@
 import React from 'react'
 import names from '../helpers/timezones'
 
-export default class Timezone extends React.Component {
+interface ITimezone {
+  onChange: (value: string) => void
+  timezone: string
+}
+
+const Timezone = (props: ITimezone) => {
   /**
    * On change timezone propagate new timezone value
    * @return void
    */
-  onChange = (event) => {
-    this.props.onChange(event.target.value)
+  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    props.onChange(event.target.value)
   }
 
   /**
    * Build options list
    * @return JSX.Element[]
    */
-  options = () => {
+  const options = () => {
     return names.map((name, index) => {
       return (
         <option value={name} key={index}>
@@ -28,11 +33,11 @@ export default class Timezone extends React.Component {
    * Render timezone selector
    * @return JSX.Element[]
    */
-  render() {
-    return (
-      <select value={this.props.timezone} onChange={this.onChange}>
-        {this.options()}
-      </select>
-    )
-  }
+  return (
+    <select value={props.timezone} onChange={onChange}>
+      {options()}
+    </select>
+  )
 }
+
+export default Timezone
diff --git a/component/widget.js b/component/widget.js
deleted file mode 100644
index 39a3df7e..00000000
--- a/component/widget.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react'
-import { getRandom, dayHelper } from '../helpers/constans'
-export default class Widget extends React.Component {
-  /**
-   * Set default state element based on props
-   * @param {any} props
-   */
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      timezone: this.props.now.timezone,
-      reason: this.props.initialReason
-    }
-  }
-
-  /**
-   * On props change update state
-   * @param {any} nextProps
-   * @return void
-   */
-  componentDidUpdate(nextProps) {
-    if (nextProps.now.timezone !== this.state.timezone) {
-      this.setState({
-        timezone: nextProps.now.timezone,
-        reason: getRandom(this.getReasons())
-      })
-    }
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.onSpacePressOrClick)
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onSpacePressOrClick)
-  }
-
-  /**
-   * On hitting Space reload reasons
-   * @return void
-   */
-  onSpacePressOrClick = (event) => {
-    if (event.type === 'click' || event?.keyCode == 32) {
-      let reasons = this.getReasons()
-      this.setState({ reason: getRandom(reasons) })
-    }
-  }
-
-  /**
-   * Get reasons according to current time
-   * @return string[]
-   */
-  getReasons() {
-    return dayHelper(this.props.now)
-  }
-
-  /**
-   * Render widget
-   * @return JSX.Element
-   */
-  render() {
-    return (
-      <div className="item">
-        <h3 className="tagline">Should I Deploy Today?</h3>
-        <h2 id="text" className="reason">
-          {this.state.reason}
-        </h2>
-        <span id="reload" onClick={this.onSpacePressOrClick}>
-          Hit <span className="space-btn">Space</span> or Click
-        </span>
-      </div>
-    )
-  }
-}
diff --git a/component/widget.tsx b/component/widget.tsx
new file mode 100644
index 00000000..2401141b
--- /dev/null
+++ b/component/widget.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import { getRandom, dayHelper } from '../helpers/constans'
+import Time from '../helpers/time'
+
+interface IWidget {
+  now: Time
+  reason: string
+}
+
+const Widget = (props: IWidget) => {
+  const [reason, setReasons] = React.useState<string>()
+  const [timezone, setTimezone] = React.useState<Time>()
+
+  React.useEffect(() => {
+    if (props.now !== timezone) {
+      setTimezone(props.now)
+      updateReasons()
+    }
+    document.addEventListener('keydown', onSpacePressOrClick)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  /**
+   * On hitting Space reload reasons
+   * @return void
+   */
+  const onSpacePressOrClick = (event: { type: string; keyCode?: number }) => {
+    if (event.type === 'click' || event?.keyCode == 32) {
+      updateReasons()
+    }
+  }
+
+  /**
+   * Get reasons according to current time
+   * @return string[]
+   */
+  const getReasons = () => {
+    return dayHelper(props.now)
+  }
+
+  /**
+   * update and get random reasons
+   * @return void
+   */
+  const updateReasons = () => {
+    let reasons = getReasons()
+    setReasons(getRandom(reasons))
+  }
+
+  /**
+   * Render widget
+   * @return JSX.Element
+   */
+  return (
+    <div className="item">
+      <h3 className="tagline">Should I Deploy Today?</h3>
+      <h2 id="text" className="reason">
+        {reason}
+      </h2>
+      <span id="reload" onClick={onSpacePressOrClick}>
+        Hit <span className="space-btn">Space</span> or Click
+      </span>
+    </div>
+  )
+}
+
+export default Widget
diff --git a/helpers/constans.js b/helpers/constans.ts
similarity index 78%
rename from helpers/constans.js
rename to helpers/constans.ts
index 1aba1de0..13f3279a 100644
--- a/helpers/constans.js
+++ b/helpers/constans.ts
@@ -14,23 +14,23 @@ import {
 
 export const HOST = 'https://shouldideploy.today'
 
-export const shouldIDeploy = function (time) {
+export const shouldIDeploy = function (time: Time | null) {
   return time && !time.isFriday() && !time.isWeekend() && !time.isHolidays()
 }
 
-export const shouldIDeployAnswerImage = function (time) {
+export const shouldIDeployAnswerImage = function (time: Time | null) {
   return shouldIDeploy(time) ? `${HOST}/yes.png` : `${HOST}/no.png`
 }
 
-export const shouldIDeployColorTheme = function (time) {
+export const shouldIDeployColorTheme = function (time: Time | null) {
   return shouldIDeploy(time) ? '#36a64f' : '#ff4136'
 }
 
-export const shouldIDeployFavIcon = function (time) {
+export const shouldIDeployFavIcon = function (time: Time | null) {
   return shouldIDeploy(time) ? `${HOST}/dots.png` : `${HOST}/dots-red.png`
 }
 
-export const getRandom = function ranDay(list) {
+export const getRandom = function ranDay(list: string | string[]) {
   return list[Math.floor(Math.random() * list.length)]
 }
 
@@ -38,8 +38,8 @@ export const getRandom = function ranDay(list) {
  * Return a list of reasons according of time parameter
  * @param string[]
  */
-export function dayHelper(time) {
-  time = time || new Time()
+export function dayHelper(time: Time) {
+  time = time || new Time(time)
 
   if (time.isDayBeforeChristmas()) {
     return REASONS_FOR_DAY_BEFORE_CHRISTMAS
diff --git a/helpers/reasons.js b/helpers/reasons.ts
similarity index 99%
rename from helpers/reasons.js
rename to helpers/reasons.ts
index 547da07a..1e624e55 100644
--- a/helpers/reasons.js
+++ b/helpers/reasons.ts
@@ -30,7 +30,7 @@ export const REASONS_TO_NOT_DEPLOY = [
   "I'd rather have ice-cream 🍦",
   'How could you? 🥺',
   'Some people just want to watch the world burn 🔥',
-  'You like fire don\'t you?'
+  "You like fire don't you?"
 ]
 
 export const REASONS_FOR_THURSDAY_AFTERNOON = [
diff --git a/helpers/time.js b/helpers/time.ts
similarity index 72%
rename from helpers/time.js
rename to helpers/time.ts
index c35cb67c..fd611fa9 100644
--- a/helpers/time.js
+++ b/helpers/time.ts
@@ -1,16 +1,17 @@
 export default class Time {
   static DEFAULT_TIMEZONE = 'UTC'
+  timezone: string
 
-  constructor(timezone) {
+  constructor(timezone: string) {
     this.timezone = timezone || Time.DEFAULT_TIMEZONE
   }
 
   /**
    * Check if a timezone exist
-   * @param {string} timezone
+   * @param {string} timeZone
    * @return {bool}
    */
-  static zoneExists(timeZone) {
+  static zoneExists(timeZone: string): boolean {
     try {
       Intl.DateTimeFormat('en-US', { timeZone }).format(Date.now())
       return true
@@ -19,7 +20,7 @@ export default class Time {
     }
   }
 
-  static validOrNull(timezone) {
+  static validOrNull(timezone: string | null) {
     if (!timezone) {
       timezone = Time.DEFAULT_TIMEZONE
     }
@@ -31,7 +32,7 @@ export default class Time {
    * Return current date
    * @return {Date}
    */
-  now() {
+  now(): Date {
     let timeZoneDate = new Date().toLocaleString('en-US', {
       timeZone: this.timezone
     })
@@ -40,73 +41,73 @@ export default class Time {
 
   /**
    * Today is Thursday
-   * @return bool
+   * @return boolean
    */
-  isThursday() {
+  isThursday(): boolean {
     return this.now().getDay() === 4
   }
 
   /**
    * Today is Friday
-   * @return bool
+   * @return boolean
    */
-  isFriday() {
+  isFriday(): boolean {
     return this.now().getDay() === 5
   }
 
   /**
    * Today is day 13
-   * @return bool
+   * @return boolean
    */
-  is13th() {
+  is13th(): boolean {
     return this.now().getDate() === 13
   }
 
   /**
    * Are we in the afternoon?
-   * @return bool
+   * @return boolean
    */
-  isAfternoon() {
+  isAfternoon(): boolean {
     return this.now().getHours() >= 16
   }
 
   /**
    * Are we Thursday afternoon?
-   * @return bool
+   * @return boolean
    */
-  isThursdayAfternoon() {
+  isThursdayAfternoon(): boolean {
     return this.isThursday() && this.isAfternoon()
   }
 
   /**
    * Are we Friday afternoon?
-   * @return bool
+   * @return boolean
    */
-  isFridayAfternoon() {
+  isFridayAfternoon(): boolean {
     return this.isFriday() && this.isAfternoon()
   }
 
   /**
    * Are we Friday the 13th?
-   * @return bool
+   * @return boolean
    */
-  isFriday13th() {
+  isFriday13th(): boolean {
     return this.isFriday() && this.is13th()
   }
 
   /**
    * Are we the weekend (Saturday, Sunday)
-   * @return bool
+   * @return boolean
    */
-  isWeekend() {
+  isWeekend(): boolean {
     return this.now().getDay() === 6 || this.now().getDay() === 0
   }
 
   /**
    * Is it Christmas eve?
-   * @returns bool
+   * @returns boolean
    */
-  isDayBeforeChristmas() {
+  isDayBeforeChristmas(): boolean {
     return (
       this.now().getMonth() === 11 &&
       this.now().getDate() === 24 &&
@@ -116,17 +117,17 @@ export default class Time {
 
   /**
    * Is it Christmas?
-   * @returns bool
+   * @returns boolean
    */
-  isChristmas() {
+  isChristmas(): boolean {
     return this.now().getMonth() === 11 && this.now().getDate() === 25
   }
 
   /**
    * Is it New Years eve or New Year?
-   * @returns bool
+   * @returns boolean
    */
-  isNewYear() {
+  isNewYear(): boolean {
     return (
       (this.now().getMonth() === 11 &&
         this.now().getDate() === 31 &&
@@ -137,9 +138,9 @@ export default class Time {
 
   /**
    * Combine if holidays
-   * @returns bool
+   * @returns boolean
    */
-  isHolidays() {
+  isHolidays(): boolean {
     return this.isDayBeforeChristmas() || this.isChristmas() || this.isNewYear()
   }
 }
diff --git a/helpers/timezones.js b/helpers/timezones.ts
similarity index 100%
rename from helpers/timezones.js
rename to helpers/timezones.ts
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 00000000..4f11a03d
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
index 082a2e81..df3a837f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,8 @@
         "snyk": "^1.1096.0"
       },
       "devDependencies": {
+        "@types/node": "18.13.0",
+        "@types/react": "18.0.27",
         "babel-eslint": "^10.1.0",
         "eslint": "^8.33.0",
         "eslint-config-next": "^13.1.6",
@@ -25,7 +27,8 @@
         "eslint-plugin-react": "^7.32.2",
         "husky": "^8.0.3",
         "lint-staged": "^13.1.0",
-        "prettier": "^2.8.3"
+        "prettier": "^2.8.3",
+        "typescript": "^4.9.5"
       },
       "engines": {
         "node": "16.x"
@@ -638,11 +641,40 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "18.13.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
+      "integrity": "sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==",
+      "dev": true
+    },
     "node_modules/@types/prettier": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.1.tgz",
       "integrity": "sha512-XFjFHmaLVifrAKaZ+EKghFHtHSUonyw8P2Qmy2/+osBnrKbH9UYtlK10zg8/kCt47MFilll/DEDKy3DHfJ0URw=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "dev": true
+    },
+    "node_modules/@types/react": {
+      "version": "18.0.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
+      "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
+      "dev": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.42.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.42.1.tgz",
@@ -1305,6 +1337,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+      "dev": true
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -4778,9 +4816,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.6.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
-      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5588,11 +5626,40 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "@types/node": {
+      "version": "18.13.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
+      "integrity": "sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==",
+      "dev": true
+    },
     "@types/prettier": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.1.tgz",
       "integrity": "sha512-XFjFHmaLVifrAKaZ+EKghFHtHSUonyw8P2Qmy2/+osBnrKbH9UYtlK10zg8/kCt47MFilll/DEDKy3DHfJ0URw=="
     },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "18.0.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
+      "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "@typescript-eslint/parser": {
       "version": "5.42.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.42.1.tgz",
@@ -6050,6 +6117,12 @@
         "which": "^2.0.1"
       }
     },
+    "csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+      "dev": true
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -8490,9 +8563,9 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
     },
     "typescript": {
-      "version": "4.6.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
-      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg=="
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g=="
     },
     "unbox-primitive": {
       "version": "1.0.2",
diff --git a/package.json b/package.json
index 87e4958b..a8048e56 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "snyk": "^1.1096.0"
   },
   "devDependencies": {
+    "@types/node": "18.13.0",
+    "@types/react": "18.0.27",
     "babel-eslint": "^10.1.0",
     "eslint": "^8.33.0",
     "eslint-config-next": "^13.1.6",
@@ -33,7 +35,8 @@
     "eslint-plugin-react": "^7.32.2",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
-    "prettier": "^2.8.3"
+    "prettier": "^2.8.3",
+    "typescript": "^4.9.5"
   },
   "husky": {
     "hooks": {
diff --git a/pages/_app.js b/pages/_app.tsx
similarity index 63%
rename from pages/_app.js
rename to pages/_app.tsx
index 8f6dc25a..373ffe1e 100644
--- a/pages/_app.js
+++ b/pages/_app.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import { Analytics } from '@vercel/analytics/react'
+import type { AppProps } from 'next/app'
 import '../style.css'
 
-function MyApp({ Component, pageProps }) {
+function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Component {...pageProps} />
@@ -11,4 +12,4 @@ function MyApp({ Component, pageProps }) {
   )
 }
 
-export default MyApp
+export default App
diff --git a/pages/_document.js b/pages/_document.js
deleted file mode 100644
index 8a8f8807..00000000
--- a/pages/_document.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import HeadElements from '../component/head'
-
-class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
-  }
-
-  render() {
-    return (
-      <Html lang="en">
-        <Head>
-          <HeadElements />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-}
-
-export default MyDocument
diff --git a/pages/_document.tsx b/pages/_document.tsx
new file mode 100644
index 00000000..3d34f153
--- /dev/null
+++ b/pages/_document.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Html, Head, Main, NextScript } from 'next/document'
+import HeadElements from '../component/head'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <HeadElements />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/pages/api/index.js b/pages/api/index.ts
similarity index 62%
rename from pages/api/index.js
rename to pages/api/index.ts
index 13fbd85b..4c27de63 100644
--- a/pages/api/index.js
+++ b/pages/api/index.ts
@@ -1,7 +1,21 @@
 import Time from '../../helpers/time'
 import { getRandom, dayHelper, shouldIDeploy } from '../../helpers/constans'
 
-export default (req, res) => {
+export default (
+  req: { query: { tz: string } },
+  res: {
+    status: (response: number) => {
+      json: {
+        (response: {
+          error?: { message: string; type: string; code: number }
+          timezone?: string
+          shouldideploy?: boolean | null
+          message?: string
+        }): void
+      }
+    }
+  }
+) => {
   let timezone = req.query.tz || Time.DEFAULT_TIMEZONE
 
   if (!Time.zoneExists(timezone)) {
diff --git a/pages/api/slack/index.js b/pages/api/slack/index.ts
similarity index 64%
rename from pages/api/slack/index.js
rename to pages/api/slack/index.ts
index bd7e7ad8..f8a9e74e 100644
--- a/pages/api/slack/index.js
+++ b/pages/api/slack/index.ts
@@ -7,7 +7,25 @@ import {
 } from '../../../helpers/constans'
 import Time from '../../../helpers/time'
 
-export default (req, res) => {
+export default (
+  req: { body: { text: string }; query: { tz: string } },
+  res: {
+    status: (response: number) => {
+      json: {
+        (response: {
+          response_type: string
+          attachments: {
+            text: string
+            color: string
+            thumb_url: string
+            footer_icon: string
+            footer: string
+          }[]
+        }): void
+      }
+    }
+  }
+) => {
   let timezone = req.body.text || req.query.tz || Time.DEFAULT_TIMEZONE
   let time = Time.validOrNull(timezone)
 
diff --git a/pages/index.js b/pages/index.js
deleted file mode 100644
index e43e8100..00000000
--- a/pages/index.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react'
-import Head from 'next/head'
-import {
-  shouldIDeploy,
-  shouldIDeployFavIcon,
-  shouldIDeployAnswerImage,
-  getRandom,
-  dayHelper
-} from '../helpers/constans'
-import Time from '../helpers/time'
-import Widget from '../component/widget'
-import Footer from '../component/footer'
-import Router from 'next/router'
-
-class Page extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      timezone: this.props.timezone,
-      now: Time.validOrNull(this.props.timezone)
-    }
-  }
-
-  static async getInitialProps(request) {
-    const { tz } = request.query
-    const timezone = tz && Time.zoneExists(tz) ? tz : 'UTC'
-    const now = Time.validOrNull(timezone)
-
-    return {
-      timezone: timezone,
-      initialReason: getRandom(dayHelper(now))
-    }
-  }
-
-  changeTimeZone = (timezone) => {
-    if (!Time.zoneExists(this.props.timezone)) {
-      return
-    }
-    let newUrl = new URL(location)
-    newUrl.searchParams.set('tz', timezone)
-
-    Router.push(newUrl.pathname + newUrl.search)
-    this.setState({
-      timezone: timezone,
-      now: new Time(timezone)
-    })
-  }
-
-  render() {
-    return (
-      <>
-        <Head>
-          <link
-            rel="icon"
-            type="image/png"
-            href={shouldIDeployFavIcon(this.state.now)}
-            sizes="32x32"
-          />
-          <meta
-            property="og:image"
-            content={shouldIDeployAnswerImage(this.state.now)}
-          />
-          <title>Should I Deploy Today?</title>
-        </Head>
-        <div
-          className={`wrapper ${
-            !shouldIDeploy(this.state.now) && 'its-friday'
-          }`}
-        >
-          <Widget
-            initialReason={this.props.initialReason}
-            now={this.state.now}
-          />
-          <div className="meta">
-            <Footer
-              timezone={this.state.timezone}
-              changeTimeZone={this.changeTimeZone}
-            />
-          </div>
-        </div>
-      </>
-    )
-  }
-}
-
-export default Page
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 00000000..2dcb9de7
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import Head from 'next/head'
+import {
+  shouldIDeploy,
+  shouldIDeployFavIcon,
+  shouldIDeployAnswerImage,
+  getRandom,
+  dayHelper
+} from '../helpers/constans'
+import Time from '../helpers/time'
+import Widget from '../component/widget'
+import Footer from '../component/footer'
+import Router, { useRouter } from 'next/router'
+
+interface IPage {
+  tz?: string
+}
+
+const Page = ({ tz }: IPage) => {
+  const router = useRouter()
+  const queryTimezone =
+    typeof router.query.tz === 'string' ? router.query.tz : '' // Add type check for router.query.tz
+  const initialTimezone = tz || queryTimezone || 'UTC' // Use queryTimezone instead of router.query.tz
+  const [timezone, setTimezone] = React.useState<string>(initialTimezone)
+  const [now, setNow] = React.useState<any>(Time.validOrNull(initialTimezone))
+  const [initialReason, setInitialReason] = React.useState<string>('')
+
+  React.useEffect(() => {
+    setInitialReason(getRandom(dayHelper(now)))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const changeTimezone = (timezone: string) => {
+    if (!Time.zoneExists(timezone)) {
+      return
+    }
+    let newUrl = new URL(location.toString())
+    newUrl.searchParams.set('tz', timezone)
+
+    Router.push(newUrl.pathname + newUrl.search)
+
+    setTimezone(timezone)
+    setNow(new Time(timezone))
+  }
+
+  return (
+    <>
+      <Head>
+        <link
+          rel="icon"
+          type="image/png"
+          href={shouldIDeployFavIcon(now)}
+          sizes="32x32"
+        />
+        <meta property="og:image" content={shouldIDeployAnswerImage(now)} />
+        <title>Should I Deploy Today?</title>
+      </Head>
+      <div className={`wrapper ${!shouldIDeploy(now) && 'its-friday'}`}>
+        <Widget reason={initialReason} now={now} />
+        <div className="meta">
+          <Footer timezone={timezone} changeTimezone={changeTimezone} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Page
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..d1546fd2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,106 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+    /* Language and Environment */
+    "target": "es5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "lib": [
+      "es5",
+      "es6",
+      "es7",
+      "es2017",
+      "dom"
+    ], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+    /* Modules */
+    "module": "commonjs", /* Specify what module code is generated. */
+    // "rootDir": "src", /* Specify the root folder within your source files. */// "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    "resolveJsonModule": true, /* Enable importing .json files. */ // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+    /* JavaScript Support */
+    "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "build", /* Specify an output folder for all emitted files. */ // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ /* Type Checking */
+    "strict": true, /* Enable all strict type-checking options. */
+    "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "noEmit": true,
+    "incremental": true,
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file