Fix tsc and ESLint warnings

.eslintrc.json

@@ -33,6 +33,27 @@
         "semi": [
             "error",
             "never"
+        ],
+        "@typescript-eslint/ban-types": [
+            "warn",
+            {
+                "extendDefaults": true,
+                "types": {
+                    "{}": false
+                }
+            }
+        ],
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                "argsIgnorePattern": "^_",
+                "varsIgnorePattern": "^_"
+            }
         ]
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
     }
 }

src/ui/App.tsx

@@ -56,7 +56,7 @@ class App extends React.Component<IProps, IState> {
       console.log(payload)
     })
 
-    listen('jar_extracted', ({ payload }) => {
+    listen('jar_extracted', ({ payload }: { payload: string}) => {
       setConfigOption('grasscutter_path', payload)
     })
 

src/ui/Debug.tsx

@@ -40,7 +40,7 @@ function none() {
   alert('none')
 }
 
-class Debug extends React.Component<any, any>{
+class Debug extends React.Component{
   render() {
     return (
       <div className="App">

src/ui/components/ServerLaunchSection.tsx

@@ -11,10 +11,6 @@ import Server from '../../resources/icons/server.svg'
 import './ServerLaunchSection.css'
 import {dataDir} from '@tauri-apps/api/path'
 
-interface IProps {
-  [key: string]: any
-}
-
 interface IState {
   grasscutterEnabled: boolean;
   buttonLabel: string;
@@ -31,8 +27,8 @@ interface IState {
   httpsEnabled: boolean;
 }
 
-export default class ServerLaunchSection extends React.Component<IProps, IState> {
+export default class ServerLaunchSection extends React.Component<{}, IState> {
-  constructor(props: IProps) {
+  constructor(props: {}) {
     super(props)
 
     this.state = {

src/ui/components/TopBar.tsx

@@ -5,7 +5,6 @@ import closeIcon from '../../resources/icons/close.svg'
 import minIcon from '../../resources/icons/min.svg'
 import cogBtn from '../../resources/icons/cog.svg'
 import downBtn from '../../resources/icons/download.svg'
-import gameBtn from '../../resources/icons/game.svg'
 
 import Tr from '../../utils/language'
 

src/ui/components/common/BigButton.tsx

@@ -3,7 +3,7 @@ import './BigButton.css'
 
 interface IProps {
   children: React.ReactNode;
-  onClick: () => any;
+  onClick: () => unknown;
   id: string;
   disabled?: boolean;
 }
@@ -23,7 +23,7 @@ export default class BigButton extends React.Component<IProps, IState> {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  static getDerivedStateFromProps(props: IProps, state: IState) {
+  static getDerivedStateFromProps(props: IProps, _state: IState) {
     return {
       disabled: props.disabled
     }

src/ui/components/common/TextInput.tsx

@@ -12,9 +12,7 @@ interface IProps {
   id?: string;
   clearable?: boolean;
   customClearBehaviour?: () => void;
-  style?: {
+  style?: React.CSSProperties;
-    [key: string]: any;
-  }
 }
 
 interface IState {

src/ui/components/menu/Downloads.tsx

@@ -8,7 +8,7 @@ import { dataDir } from '@tauri-apps/api/path'
 
 import './Downloads.css'
 import Divider from './Divider'
-import { getConfigOption, setConfigOption } from '../../../utils/configuration'
+import { getConfigOption } from '../../../utils/configuration'
 import { invoke } from '@tauri-apps/api'
 import { listen } from '@tauri-apps/api/event'
 import HelpButton from '../common/HelpButton'
@@ -183,7 +183,7 @@ export default class Downloads extends React.Component<IProps, IState> {
       grasscutter_downloading: this.props.downloadManager.downloadingJar(),
       resources_downloading: this.props.downloadManager.downloadingResources(),
       repo_downloading: this.props.downloadManager.downloadingRepo(),
-      grasscutter_set: gc_path && gc_path !== '',
+      grasscutter_set: gc_path !== '',
     })
   }
 

src/ui/components/news/NewsSection.tsx

@@ -11,8 +11,28 @@ interface IProps {
 
 interface IState {
   selected: string;
-  news: any;
+  news?: JSX.Element;
-  commitList: any;
+  commitList?: JSX.Element[];
+}
+
+interface GrasscutterAPIResponse {
+  commits: {
+    gc_stable:   CommitResponse[];
+    gc_dev:      CommitResponse[];
+    cultivation: CommitResponse[];
+  }
+}
+
+interface CommitResponse {
+  sha: string;
+  commit: Commit;
+}
+
+interface Commit {
+  author: {
+    name: string;
+  };
+  message: string;
 }
 
 export default class NewsSection extends React.Component<IProps, IState> {
@@ -21,8 +41,6 @@ export default class NewsSection extends React.Component<IProps, IState> {
 
     this.state = {
       selected: props.selected || 'commits',
-      news: null,
-      commitList: null
     }
 
     this.setSelected = this.setSelected.bind(this)
@@ -42,40 +60,41 @@ export default class NewsSection extends React.Component<IProps, IState> {
 
   async showLatestCommits() {
     if (!this.state.commitList) {
-      const commits: string = await invoke('req_get', { url: 'https://api.grasscutter.io/cultivation/query' })
+      const response: string = await invoke('req_get', { url: 'https://api.grasscutter.io/cultivation/query' })
-      let obj
+      let grasscutterApiResponse: GrasscutterAPIResponse | null = null
 
       try {
-        obj = JSON.parse(commits)
+        grasscutterApiResponse = JSON.parse(response)
       } catch(e) {
-        obj = {}
+        grasscutterApiResponse = null
       }
 
-      // If it didn't work, use official API
+      let commits: CommitResponse[]
-      if (!obj.commits) {
+      if (grasscutterApiResponse?.commits == null) {
-        const commits: string = await invoke('req_get', { url: 'https://api.github.com/repos/Grasscutters/Grasscutter/commits' })
+        // If it didn't work, use official API
-        obj = JSON.parse(commits)
+        const response: string = await invoke('req_get', { url: 'https://api.github.com/repos/Grasscutters/Grasscutter/commits' })
+        commits = JSON.parse(response)
       } else {
-        obj = obj.commits.gc_stable
+        commits = grasscutterApiResponse.commits.gc_stable
       }
 
       // Probably rate-limited
-      if (!Array.isArray(obj)) return
+      if (!Array.isArray(commits)) return
   
       // Get only first 5
-      const commitsList = obj.slice(0, 10)
+      const commitsList = commits.slice(0, 10)
-      const commitsListHtml = commitsList.map((commit: any) => {
+      const commitsListHtml = commitsList.map((commitResponse: CommitResponse) => {
         return (
-          <tr className="Commit" id="newsCommitsTable" key={commit.sha}>
+          <tr className="Commit" id="newsCommitsTable" key={commitResponse.sha}>
-            <td className="CommitAuthor"><span>{commit.commit.author.name}</span></td>
+            <td className="CommitAuthor"><span>{commitResponse.commit.author.name}</span></td>
-            <td className="CommitMessage"><span>{commit.commit.message}</span></td>
+            <td className="CommitMessage"><span>{commitResponse.commit.message}</span></td>
           </tr>
         )
       })
 
       this.setState({
         commitList: commitsListHtml,
-        news: commitsListHtml
+        news: <>{commitsListHtml}</>
       })
     }
 
@@ -83,12 +102,16 @@ export default class NewsSection extends React.Component<IProps, IState> {
   }
 
   async showNews() {
-    let news = <tr></tr>
+    let news: JSX.Element | JSX.Element[] = <tr></tr>
 
     switch(this.state.selected) {
-      case 'commits':
+      case 'commits': {
-        news = await this.showLatestCommits()
+        const commits = await this.showLatestCommits()
+        if (commits != null) {
+          news = commits
+        }
         break
+      }
 
       case 'latest_version':
         news = <tr><td>Latest version</td></tr>
@@ -100,7 +123,7 @@ export default class NewsSection extends React.Component<IProps, IState> {
     }
 
     this.setState({
-      news
+      news: <>{news}</>
     })
   }
 

src/utils/configuration.ts

@@ -45,16 +45,16 @@ export interface Configuration {
   debug_enabled: boolean
 }
 
-export async function setConfigOption(key: string, value: any): Promise<void> {
+export async function setConfigOption<K extends keyof Configuration>(key: K, value: Configuration[K]): Promise<void> {
-  const config: any = await getConfig()
+  const config = await getConfig()
   config[key] = value
   
   await saveConfig(<Configuration> config)
 }
 
-export async function getConfigOption(key: string): Promise<any> {
+export async function getConfigOption<K extends keyof Configuration>(key: K): Promise<Configuration[K]> {
-  const config: any = await getConfig()
+  const config = await getConfig()
-  const defaults: any = defaultConfig
+  const defaults = defaultConfig
 
   return config[key] || defaults[key]
 }