enable strict typescript mode

SerCeMan · SerCeMan · commit 415e630d2bdf · 2021-01-19T23:31:03.000+11:00
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,7 @@
 
 # Package management
 node_modules/
-yarn-error.json
+yarn-error.log
 .yarn/*
 !.yarn/releases
 !.yarn/plugins
diff --git a/package.json b/package.json
@@ -10,8 +10,11 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@types/chrome": "^0.0.128",
+    "@types/classnames": "^2.2.11",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",
+    "@types/react-fontawesome": "^1.6.4",
+    "@types/react-inspector": "^4.0.1",
     "@types/rsocket-core": "^0.0.6",
     "@types/rsocket-types": "^0.0.2",
     "@types/rsocket-websocket-client": "^0.0.3",
diff --git a/src/inspector.tsx b/src/inspector.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './reset.css';
-import App from './viewer/App';
+import App, {ChromeHandlers} from './viewer/App';
 
-const handlers = {};
+const handlers: ChromeHandlers = {};
 
 declare let window: any;
 if (!window.inspectors) {
@@ -49,7 +49,7 @@ if (inspector && inspector.active) {
 }
 
 function startDebugging() {
-  chrome.debugger.sendCommand({tabId}, "Network.enable", null, () => {
+  chrome.debugger.sendCommand({tabId}, "Network.enable", undefined, () => {
     if (chrome.runtime.lastError) {
       console.error(chrome.runtime.lastError.message);
     } else {
diff --git a/src/viewer/App.tsx b/src/viewer/App.tsx
@@ -1,4 +1,5 @@
 import React, {MouseEventHandler} from 'react';
+// @ts-ignore no types for the package
 import Panel from 'react-flex-panel';
 import FontAwesome from 'react-fontawesome';
 import classNames from 'classnames';
@@ -16,7 +17,7 @@ import {
 } from "rsocket-core";
 import {Encoders} from "rsocket-core/RSocketEncoding";
 
-function getRSocketType(type) {
+function getRSocketType(type: number): string {
   for (const [name, code] of Object.entries(FRAME_TYPES)) {
     if (code === type) {
       return name;
@@ -25,32 +26,33 @@ function getRSocketType(type) {
   return toHex(type);
 }
 
-function toHex(n) {
+function toHex(n: number): string {
   return '0x' + n.toString(16);
 }
 
 function shortFrame(frame: Frame) {
   const name = getRSocketType(frame.type);
   const flags: string[] = [];
   for (const [name, flag] of Object.entries(FLAGS)) {
+    // noinspection JSBitwiseOperatorUsage
     if (frame.flags & flag) {
       flags.push(name);
     }
   }
   return `${name} [${flags.join(", ")}]`;
 }
 
-const padded = (num, d) => num.toFixed(0).padStart(d, '0');
+const padded = (num: number, d: number) => num.toFixed(0).padStart(d, '0');
 
-const stringToBuffer = str => {
+function stringToBuffer(str: string) {
   const ui8 = new Uint8Array(str.length);
   for (let i = 0; i < str.length; ++i) {
     ui8[i] = str.charCodeAt(i);
   }
   return ui8;
-};
+}
 
-const TimeStamp = ({time}) => {
+const TimeStamp = ({time}: { time: Date }) => {
   const h = time.getHours();
   const m = time.getMinutes();
   const s = time.getSeconds();
@@ -92,8 +94,8 @@ interface RSocketFrameProps {
 }
 
 class RSocketFrame extends React.Component<RSocketFrameProps, any> {
-  private hexView: HTMLUListElement;
-  private asciiView: HTMLUListElement;
+  private hexView: HTMLUListElement | null = null;
+  private asciiView: HTMLUListElement | null = null;
 
   render() {
     const {frame, data, className, ...props} = this.props;
@@ -107,7 +109,7 @@ class RSocketFrame extends React.Component<RSocketFrameProps, any> {
       const row = [...(data as any).subarray(pos, pos + 16)];
       lineNumbers.push(<li key={pos}>{pos.toString(16).padStart(numDigits, '0')}:</li>);
       hexView.push(<li key={pos}>
-        {row.map((byte, i) => <span key={i}>{byte.toString(16).padStart(2, '0')}</span>)}
+        {row.map((byte: number, i) => <span key={i}>{byte.toString(16).padStart(2, '0')}</span>)}
         {row.length < 16 && [...Array(16 - row.length)].map((nil, i) => <span key={i}
                                                                               className="padding">{"  "}</span>)}
       </li>);
@@ -172,7 +174,7 @@ class FrameList extends React.Component<any, any> {
           <FontAwesome className="list-button" name="stop" onClick={onStop} title="Stop"/>
         </div>
         <ul className="frame-list" onClick={() => onSelect(null)}>
-          {frames.map(frame =>
+          {frames.map((frame: WsFrame) =>
             <FrameEntry key={frame.id}
                         frame={frame}
                         selected={frame.id === activeId}
@@ -187,7 +189,7 @@ class FrameList extends React.Component<any, any> {
   }
 }
 
-const TextViewer = ({data}) => (
+const TextViewer = ({data}: { data: string | Uint8Array }) => (
   <div className="TextViewer tab-pane">
     {data}
   </div>
@@ -197,7 +199,7 @@ const TextViewer = ({data}) => (
 let cachedEncoders: Encoders<any> = Utf8Encoders
 let cachedLengthPrefixedFrames: boolean = false;
 
-function tryDeserializeFrameWith(data: string, buffer: Buffer, lengthPrefixedFrames, encoders: Encoders<any>) {
+function tryDeserializeFrameWith(data: string, buffer: Buffer, lengthPrefixedFrames: boolean, encoders: Encoders<any>) {
   try {
     return lengthPrefixedFrames
       ? deserializeFrameWithLength(buffer, encoders)
@@ -234,7 +236,7 @@ function tryDeserializeFrame(data: string): Frame | undefined {
   return undefined;
 }
 
-const RSocketViewer = ({frame, data}) => {
+const RSocketViewer = ({frame, data}: { frame: Frame, data: string }) => {
   try {
     return (
       <div className="TextViewer tab-pane">
@@ -255,7 +257,7 @@ const RSocketViewer = ({frame, data}) => {
 class FrameView extends React.Component<{ wsFrame: WsFrame }, { panel?: string }> {
   constructor(props: { wsFrame: WsFrame }) {
     super(props);
-    this.state = {panel: null};
+    this.state = {panel: undefined};
   }
 
   render() {
@@ -264,8 +266,8 @@ class FrameView extends React.Component<{ wsFrame: WsFrame }, { panel?: string }
     const panel = rsocketFrame
       ? <RSocketViewer frame={rsocketFrame} data={wsFrame.payload}/>
       : wsFrame.text
-          ? <TextViewer data={wsFrame.text}/>
-          : <TextViewer data={wsFrame.binary}/>;
+        ? <TextViewer data={wsFrame.text}/>
+        : <TextViewer data={wsFrame.binary!}/>;
     return (
       <div className="FrameView">
         {panel}
@@ -302,29 +304,31 @@ interface WebSocketFrame {
 interface AppState {
   frames: WsFrame[];
   capturing: boolean;
-  activeId: null
+  activeId?: number
 }
 
-export default class App extends React.Component<any, AppState> {
+export type ChromeHandlers = { [name: string]: any };
+
+export default class App extends React.Component<{ handlers: ChromeHandlers, }, AppState> {
   _uniqueId = 0;
-  issueTime = null;
-  issueWallTime = null;
+  issueTime?: number = undefined;
+  issueWallTime?: number = undefined;
 
   state: AppState = {
     frames: [],
-    activeId: null,
+    activeId: undefined,
     capturing: true,
   }
 
-  getTime(timestamp): Date {
-    if (this.issueTime == null) {
+  getTime(timestamp: number): Date {
+    if (this.issueTime === undefined || this.issueWallTime === undefined) {
       this.issueTime = timestamp;
       this.issueWallTime = new Date().getTime();
     }
     return new Date((timestamp - this.issueTime) * 1000 + this.issueWallTime);
   }
 
-  constructor(props) {
+  constructor(props: { handlers: ChromeHandlers, }) {
     super(props);
 
     props.handlers["Network.webSocketFrameReceived"] = this.frameReceived.bind(this);
@@ -355,7 +359,7 @@ export default class App extends React.Component<any, AppState> {
     );
   }
 
-  selectFrame = id => {
+  selectFrame = (id: number) => {
     this.setState({activeId: id});
   };
 
@@ -371,7 +375,7 @@ export default class App extends React.Component<any, AppState> {
     this.setState({capturing: false});
   }
 
-  addFrame(type, timestamp, response: WebSocketFrame) {
+  addFrame(type: 'incoming' | 'outgoing', timestamp: number, response: WebSocketFrame) {
     if (response.opcode === 1 || response.opcode === 2) {
       const frame: WsFrame = {
         type,
@@ -389,15 +393,15 @@ export default class App extends React.Component<any, AppState> {
     }
   }
 
-  frameReceived({timestamp, response}: { timestamp: any, response: WebSocketFrame }) {
-    if (this.state.capturing === true) {
-      this.addFrame("incoming", timestamp, response);
+  frameReceived({timestamp, response}: { timestamp: number, response: WebSocketFrame }) {
+    if (this.state.capturing) {
+      this.addFrame('incoming', timestamp, response);
     }
   }
 
-  frameSent({timestamp, response}: { timestamp: any, response: WebSocketFrame }) {
-    if (this.state.capturing === true) {
-      this.addFrame("outgoing", timestamp, response);
+  frameSent({timestamp, response}: { timestamp: number, response: WebSocketFrame }) {
+    if (this.state.capturing) {
+      this.addFrame('outgoing', timestamp, response);
     }
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
+    "strict": true,
     "esModuleInterop": true,
     "jsx": "react",
     "lib": ["ES2017", "dom"],
diff --git a/yarn.lock b/yarn.lock
@@ -56,6 +56,11 @@
     "@types/filesystem" "*"
     "@types/har-format" "*"
 
+"@types/classnames@^2.2.11":
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
+  integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
+
 "@types/filesystem@*":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.29.tgz#ee3748eb5be140dcf980c3bd35f11aec5f7a3748"
@@ -113,6 +118,29 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-fontawesome@^1.6.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@types/react-fontawesome/-/react-fontawesome-1.6.4.tgz#95884bd8df906b423a254e00d5050f7fe75b3e76"
+  integrity sha512-/fHr+BoUX+3MYpCkb8a+Bpt+Je2/0FgFi1XSaHH0ga1hqMy5PS7Ny/XV0Qh5cJHeKvkONbKWPSwgPlqK7UtdqA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-inspector@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-inspector/-/react-inspector-4.0.1.tgz#2009e91321e41b86f7c5a7494f316fcff149a971"
+  integrity sha512-upvnwdUq6lw3PXIXuHxbO8E51stPg73Rf0TTFXnDpCQD6yDgq/h3yIDrSLL1i3STx2/WsSU4oFYczkNnPp+5Ng==
+  dependencies:
+    "@types/react" "*"
+    csstype "^3.0.2"
+
+"@types/react@*":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
+  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/react@^16", "@types/react@^16.14.2":
   version "16.14.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
`3`		`- "allowSyntheticDefaultImports": true,`
	`3`	`+ "strict": true,`
`4`	`4`	`"esModuleInterop": true,`
`5`	`5`	`"jsx": "react",`
`6`	`6`	`"lib": ["ES2017", "dom"],`