Resolve a few "ts-expect-error"s

src/components/BackendList.tsx

@@ -110,8 +110,6 @@ function Item({
       {secret ? (
         <>
           <span className={s.secret}>{show ? secret : '***'}</span>
-
-          {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'boolean | (() => void)' is not assignable to... Remove this comment to see the full error message */}
           <Button onClick={toggle} className={s.eye}>
             <Icon size={20} />
           </Button>

src/components/Collapsible.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import type { MutableRefObject } from 'react';
+import * as React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
 import { framerMotionResouce } from '../misc/motion';
 
 const { memo, useState, useRef, useEffect } = React;
 
-function usePrevious(value) {
+function usePrevious(value: any) {
   const ref = useRef();
   useEffect(() => void (ref.current = value), [value]);
   return ref.current;
 }
 
-function useMeasure() {
+function useMeasure(): [MutableRefObject<HTMLElement>, { height: number }] {
   const ref = useRef();
   const [bounds, set] = useState({ height: 0 });
   useEffect(() => {
@@ -27,7 +28,7 @@ const variantsCollpapsibleWrap = {
     height: 'auto',
     transition: { duration: 0 },
   },
-  open: (height) => ({
+  open: (height: number) => ({
     height,
     opacity: 1,
     visibility: 'visible',
@@ -50,12 +51,12 @@ const variantsCollpapsibleChildContainer = {
   },
 };
 
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'isOpen' does not exist on type '{ childr... Remove this comment to see the full error message
+type CollapsibleProps = { children: React.ReactNode; isOpen?: boolean };
-const Collapsible = memo(({ children, isOpen }) => {
+
+const Collapsible = memo(({ children, isOpen }: CollapsibleProps) => {
   const module = framerMotionResouce.read();
   const motion = module.motion;
   const previous = usePrevious(isOpen);
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'height' does not exist on type 'MutableR... Remove this comment to see the full error message
   const [refToMeature, { height }] = useMeasure();
   return (
     <div>

src/components/Connections.tsx

@@ -109,7 +109,7 @@ function renderTableOrPlaceholder(conns: FormattedConn[]) {
   );
 }
 
-function ConnQty({ qty }) {
+function connQty({ qty }) {
   return qty < 100 ? '' + qty : '99+';
 }
 
@@ -179,17 +179,11 @@ function Conn({ apiConfig }) {
           <TabList>
             <Tab>
               <span>{t('Active')}</span>
-              <span className={s.connQty}>
+              <span className={s.connQty}>{connQty({ qty: filteredConns.length })}</span>
-                {/* @ts-expect-error ts-migrate(2786) FIXME: 'ConnQty' cannot be used as a JSX component. */}
-                <ConnQty qty={filteredConns.length} />
-              </span>
             </Tab>
             <Tab>
               <span>{t('Closed')}</span>
-              <span className={s.connQty}>
+              <span className={s.connQty}>{connQty({ qty: filteredClosedConns.length })}</span>
-                {/* @ts-expect-error ts-migrate(2786) FIXME: 'ConnQty' cannot be used as a JSX component. */}
-                <ConnQty qty={filteredClosedConns.length} />
-              </span>
             </Tab>
           </TabList>
           <div className={s.inputWrapper}>

src/components/Rules.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { areEqual, VariableSizeList } from 'react-window';
 import { RuleProviderItem } from 'src/components/rules/RuleProviderItem';
@@ -7,7 +7,7 @@ import { RulesPageFab } from 'src/components/rules/RulesPageFab';
 import { TextFilter } from 'src/components/shared/TextFitler';
 import { ruleFilterText } from 'src/store/rules';
 import { State } from 'src/store/types';
-import { ClashAPIConfig } from 'src/types';
+import { ClashAPIConfig, RuleType } from 'src/types';
 
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { getClashAPIConfig } from '../store/app';
@@ -48,8 +48,17 @@ function getItemSizeFactory({ provider }) {
   };
 }
 
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'index' does not exist on type '{ childre... Remove this comment to see the full error message
+type RowProps = {
-const Row = memo(({ index, style, data }) => {
+  index: number;
+  style: React.CSSProperties;
+  data: {
+    apiConfig: ClashAPIConfig;
+    rules: RuleType[];
+    provider: { names: string[]; byName: any };
+  };
+};
+
+const Row = memo(({ index, style, data }: RowProps) => {
   const { rules, provider, apiConfig } = data;
   const providerQty = provider.names.length;
 

src/components/StyleGuide.tsx

@@ -21,7 +21,9 @@ const optionsRule = [
   { label: 'Direct', value: 'Direct' },
 ];
 
-const Pane = ({ children, style }) => <div style={{ ...paneStyle, ...style }}>{children}</div>;
+const Pane = ({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) => (
+  <div style={{ ...paneStyle, ...style }}>{children}</div>
+);
 
 function useToggle(initialState = false) {
   const [onoff, setonoff] = React.useState(initialState);
@@ -40,19 +42,15 @@ class StyleGuide extends PureComponent {
   render() {
     return (
       <div>
-        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
           <SwitchExample />
         </Pane>
-        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
           <Input />
         </Pane>
-        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
           <ToggleSwitch name="test" options={optionsRule} value="Rule" onChange={noop} />
         </Pane>
-        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
           <Button text="Test Lxatency" start={<Zap size={16} />} />
           <Button text="Test Lxatency" start={<Zap size={16} />} isLoading />

src/components/TrafficChart.tsx

@@ -11,7 +11,7 @@ import { connect } from './StateProvider';
 
 const { useMemo } = React;
 
-const chartWrapperStyle = {
+const chartWrapperStyle: React.CSSProperties = {
   // make chartjs chart responsive
   position: 'relative',
   maxWidth: 1000,
@@ -52,7 +52,6 @@ function TrafficChart({ apiConfig, selectedChartStyleIndex }) {
   useLineChart(ChartMod.Chart, 'trafficChart', data, traffic);
 
   return (
-    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
     <div style={chartWrapperStyle}>
       <canvas id="trafficChart" />
     </div>

src/components/proxies/ProxyProvider.tsx

@@ -14,7 +14,7 @@ import {
   getProxySortBy,
 } from 'src/store/app';
 import { getDelay, healthcheckProviderByName } from 'src/store/proxies';
-import { DelayMapping } from 'src/store/types';
+import { DelayMapping, State } from 'src/store/types';
 
 import { useFilteredAndSorted } from './hooks';
 import { ProxyList, ProxyListSummaryView } from './ProxyList';
@@ -24,7 +24,7 @@ const { useState, useCallback } = React;
 
 type Props = {
   name: string;
-  proxies: Array<string>;
+  proxies: string[];
   delay: DelayMapping;
   hideUnavailableProxies: boolean;
   proxySortBy: string;
@@ -77,10 +77,7 @@ function ProxyProviderImpl({
         isOpen={isOpen}
         qty={proxies.length}
       />
-      <div className={s.updatedAt}>
+      <div className={s.updatedAt}><small>Updated {timeAgo} ago</small></div>
-        <small>Updated {timeAgo} ago</small>
-      </div>
-      {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element[]; isOpen: boolean; }' i... Remove this comment to see the full error message */}
       <Collapsible isOpen={isOpen}>
         <ProxyList all={proxies} />
         <div className={s.actionFooter}>
@@ -93,7 +90,6 @@ function ProxyProviderImpl({
           />
         </div>
       </Collapsible>
-      {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; isOpen: boolean; }' is ... Remove this comment to see the full error message */}
       <Collapsible isOpen={!isOpen}>
         <ProxyListSummaryView all={proxies} />
       </Collapsible>
@@ -127,7 +123,7 @@ function Refresh() {
   );
 }
 
-const mapState = (s, { proxies, name }) => {
+const mapState = (s: State, { proxies, name }) => {
   const hideUnavailableProxies = getHideUnavailableProxies(s);
   const delay = getDelay(s);
   const collapsibleIsOpen = getCollapsibleIsOpen(s);

src/hooks/basic.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 const { useState, useCallback } = React;
 
-export function useToggle(initialValue = false) {
+export function useToggle(initialValue = false): [boolean, () => void] {
   const [isOn, setState] = useState(initialValue);
   const toggle = useCallback(() => setState((x) => !x), []);
   return [isOn, toggle];

src/types.ts

@@ -4,3 +4,5 @@ export type ClashAPIConfig = {
 };
 
 export type LogsAPIConfig = ClashAPIConfig & { logLevel: string };
+
+export type RuleType = { id?: number; type?: string; payload?: string; proxy?: string; }