typescript config set up

Author: StephWood

.babelrc

@@ -6,9 +6,12 @@
   },
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
-        ["@babel/transform-runtime"]
-    ],
+    ["@babel/transform-runtime"],
+    ["@babel/proposal-class-properties"],
+    ["@babel/proposal-object-rest-spread"]
+  ]
 }

package-lock.json

@@ -15,7 +15,8 @@
     "package-all": "electron-builder  build -mwl",
     "package-linux": "electron-builder build --linux",
     "gh-publish-mac": "electron-builder build --x64 --mac -p always",
-    "gh-publish": "electron-builder build -mwl -p always"
+    "gh-publish": "electron-builder build -mwl -p always",
+    "check-types": "tsc"
   },
   "author": {
     "name": "Swell",
@@ -230,15 +231,26 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.10.3",
     "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.10.1",
-    "@babel/preset-typescript": "^7.10.1",
+    "@babel/preset-typescript": "^7.10.4",
     "@jest-runner/electron": "^3.0.0",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.3",
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
+    "@types/cookie": "^0.4.0",
+    "@types/jest": "^26.0.4",
+    "@types/node": "^14.0.20",
+    "@types/node-fetch": "^2.5.7",
+    "@types/react": "^16.9.41",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "@types/set-cookie-parser": "0.0.6",
+    "@types/ws": "^7.2.6",
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.1.0",
@@ -275,8 +287,11 @@
     "prettier": "^2.0.5",
     "react-test-renderer": "^16.13.1",
     "sass-loader": "^7.3.1",
+    "source-map-loader": "^1.0.1",
     "spectron": "^9.0.0",
     "style-loader": "^0.23.1",
+    "ts-loader": "^8.0.0",
+    "typescript": "^3.9.6",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",

package.json

@@ -1,12 +1,13 @@
 import React, { Component } from "react";
 import "../../../assets/style/App.scss";
-const { api } = window;
-import ContentsContainer from './ContentsContainer.jsx';
-// import ReqResCtrl from '../../controllers/reqResController';
+import { ContentsContainer } from "./ContentsContainer.tsx";
 import SidebarContainer from "./SidebarContainer.jsx";
 import UpdatePopUpContainer from "./UpdatePopUpContainer.jsx";
 import historyController from "../../controllers/historyController";
 import collectionsController from "../../controllers/collectionsController";
+// import ReqResCtrl from '../../controllers/reqResController';
+
+const { api } = window;
 // const EventEmitter = require('events');
 // const {dialog} = require('electron').remote
 class App extends Component {

src/client/components/containers/App.jsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+// import GraphContainer from "./GraphContainer.jsx";
+import ReqResContainer from "./ReqResContainer.jsx";
+import NavBarContainer from "./NavBarContainer.jsx";
+
+export class ContentsContainer extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="contents">
+        {/* <GraphContainer /> */}
+        <NavBarContainer />
+        <ReqResContainer />
+      </div>
+    );
+  }
+}
+
+// export default Contents;

src/client/components/containers/ContentsContainer.jsx

@@ -0,0 +1,19 @@
+// import React, { Component } from 'react';
+import * as React from "react";
+// import { connect } from 'react-redux';
+// import ReqResCtrl from '../ReqResCtrl';
+// import * as store from '../../store';
+// import * as actions from '../../actions/actions';
+
+export class Btn extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return <button type="button" />;
+  }
+}
+
+// export default Btn;

src/client/components/containers/ContentsContainer.tsx

@@ -3,12 +3,11 @@ import gql from "graphql-tag";
 import { InMemoryCache } from "apollo-cache-inmemory";
 import { WebSocketLink } from "apollo-link-ws";
 import { SubscriptionClient } from "subscriptions-transport-ws";
-//const { session } = require('electron').remote
-const { api } = window;
-
 import * as store from "../store";
 import * as actions from "../actions/actions";
 
+const { api } = window;
+
 const graphQLController = {
   openGraphQLConnection(reqResObj) {
     // initialize response data

src/client/components/display/Btn.jsx

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    // "outDir": "./dist/", // path to output directory. diabled because we are using babel-loader in webpack config
+    "sourceMap": true, // allow sourcemap support
+    // "strictNullChecks": true, // enable strict null checks as a best practice
+    "module": "es6", // specify module code generation
+    "jsx": "react", // use typescript to transpile jsx to js
+    "target": "ESNext", // specify ECMAScript target version
+    "allowJs": true, // allow a partial TypeScript and JavaScript codebase
+    "noEmit": true, // don't emit; allow Babel to transform files
+
+    /* Strict Type-Checking Options */
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
+
+    /* Additional Checks */
+    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
+
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+
+    /* Advanced Options */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  },
+  "include": ["./src/"],
+  "exclude": ["node_modules", "dist", "build", "coverage", "mocks"]
+}