Fully implemented TS for demo-app & demo-app-next

Author: yuanjackie1

demo-app-next/src/components/Board.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import Row from "./Row";
-import { BoardText, BoardContent, Scoreboard, Player } from "../types/types";
+import { BoardContent, Scoreboard, Player } from "../types/types";
 
 type BoardState = {
   board: BoardContent;
@@ -11,7 +11,7 @@ type BoardState = {
 };
 
 class Board extends Component<{}, BoardState> {
-  constructor(props: any) {
+  constructor(props: unknown) {
     super(props);
     this.state = {
       board: this.newBoard(),
@@ -25,7 +25,7 @@ class Board extends Component<{}, BoardState> {
     this.handleBoxClick = this.handleBoxClick.bind(this);
   }
 
-  componentDidUpdate() {
+  componentDidUpdate():void {
     this.checkForWinner();
   }
 
@@ -127,7 +127,7 @@ class Board extends Component<{}, BoardState> {
     this.setState({ board: boardCopy, currentPlayer: newPlayer });
   }
 
-  render() {
+  render(): JSX.Element {
     const rows: Array<JSX.Element> = [];
     for (let i = 0; i < 3; i++) {
       rows.push(
@@ -139,7 +139,7 @@ class Board extends Component<{}, BoardState> {
         />
       );
     }
-    const { X, O }: Scoreboard = this.state.scoreboard;
+    // const { X, O }: Scoreboard = this.state.scoreboard;
 
     return (
       <div className="board">

demo-app-next/src/components/Box.tsx

@@ -7,7 +7,7 @@ type BoxProps = {
   handleBoxClick: (row: number, column: number) => void;
 };
 
-const Box = (props: BoxProps) => {
+const Box = (props: BoxProps): JSX.Element => {
   return (
     <button
       className="box"

demo-app-next/src/components/Buttons.tsx

@@ -1,6 +1,6 @@
 import Increment from './Increment';
 
-export default function Buttons() {
+export default function Buttons(): JSX.Element {
   const buttons = [];
   for (let i = 0; i < 4; i++) {
     buttons.push(<Increment key={i} />);

demo-app-next/src/components/Increment.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-export default function Increment() {
+export default function Increment(): JSX.Element {
   const [count, setCount] = useState(0);
 
   return (

demo-app-next/src/components/navbar.js renamed to demo-app-next/src/components/navbar.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-export default function Navbar() {
+export default function Navbar(): JSX.Element {
   return (
     <div className='nav'>
       <Link className='link' href='/'>

demo-app-next/src/pages/_app.js

@@ -0,0 +1,6 @@
+import "../../styles/style.css";
+import React from "react"
+
+export default function MyApp({ Component, pageProps }): JSX.Element {
+  return <Component {...pageProps} />;
+}

demo-app-next/src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import Buttons from "../../components/Buttons";
 import Navbar from "../../components/navbar";
 
-export default function ButtonsPage() {
+export default function ButtonsPage(): JSX.Element {
   return (
     <div>
       <Navbar />

demo-app-next/src/pages/buttons/index.tsx

@@ -1,6 +1,7 @@
 import Navbar from "../components/navbar";
+import React from "react"
 
-export default function Home() {
+export default function Home():JSX.Element {
   return (
     <div>
       <Navbar />

demo-app-next/src/pages/index.js renamed to demo-app-next/src/pages/index.tsx

@@ -1,7 +1,7 @@
 import Board from '../../components/Board';
 import Navbar from '../../components/navbar';
 
-export default function BoardPage() {
+export default function BoardPage():JSX.Element {
   return (
     <div>
       <Navbar />