Apply some TypeScript-isms to the new ts[x] files

app/javascript/packs/frontend/api.ts

@@ -13,7 +13,7 @@ export const instance = axios.create({
 
 export const Pokemon = {
   index: () => instance.get('/pokemon'),
-  get: id => instance.get(`/pokemon/${id}`),
+  get: (id: number | string) => instance.get(`/pokemon/${id}`),
 };
 
 const API = {

app/javascript/packs/frontend/components/layout/application_layout.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {Navbar, Nav, Form, FormControl, Button} from 'react-bootstrap';
 import {LinkContainer} from 'react-router-bootstrap';
 import {Link} from 'react-router-dom';
 
 import './style';
 
-function ApplicationLayout({children}) {
+interface Props {
+  children?: any;
+}
+
+function ApplicationLayout({children}: Props) {
   return (
     <div>
       <nav>
@@ -34,12 +37,4 @@ function ApplicationLayout({children}) {
   );
 }
 
-ApplicationLayout.defaultProps = {
-  children: null,
-};
-
-ApplicationLayout.propTypes = {
-  children: PropTypes.node,
-};
-
 export default ApplicationLayout;

app/javascript/packs/frontend/components/pages/pokemon/show.tsx

@@ -1,18 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import {RouteComponentProps} from 'react-router';
 import {Link} from 'react-router-dom';
 
 import {Pokemon} from '../../../api';
 
-class PokemonShow extends React.Component {
-  static propTypes = {
-    match: PropTypes.object.isRequired,
-  };
+export interface IPokemon {
+  id: number;
+  nickname: string;
+}
+
+interface Props extends RouteComponentProps<any> {
+  Pokemon: IPokemon;
+}
 
-  state = {
-    pokemon: {},
-  };
+interface State {
+  pokemon: IPokemon;
+}
 
+class PokemonShow extends React.Component<Props, State> {
   async componentDidMount() {
     try {
       const data = await Pokemon.get(this.props.match.params.id);
@@ -23,7 +28,7 @@ class PokemonShow extends React.Component {
     }
   }
 
-  render() {
+  render(): JSX.Element {
     return (
       <>
         {this.state.pokemon.id}: {this.state.pokemon.nickname}

app/javascript/packs/frontend/components/test_component.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 
-const TestComponent: React.FC = () => {
+function TestComponent() {
   const [text, setText] = useState('');
 
   return (
@@ -13,6 +13,6 @@ const TestComponent: React.FC = () => {
       <input onChange={e => setText(e.target.value)} />
     </div>
   );
-};
+}
 
 export default TestComponent;