Prohibit @ts-ignore comments and update codebase to not use it

5 files changed, 11 insertions, 10 deletions

diff --git a/gui/eslint.config.mjs b/gui/eslint.config.mjs
index f051e2c716..5aafcb4041 100644
--- a/gui/eslint.config.mjs
+++ b/gui/eslint.config.mjs
@@ -145,7 +145,7 @@ export default tseslint.config(
       'no-return-await': 'error',
       'react/jsx-no-bind': 'error',
       '@typescript-eslint/naming-convention': ['error', ...namingConvention],
-      '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': false }],
+      '@typescript-eslint/ban-ts-comment': 'error',
       'simple-import-sort/imports': 'error',
 
       'react-hooks/rules-of-hooks': 'error',
diff --git a/gui/src/renderer/components/Accordion.tsx b/gui/src/renderer/components/Accordion.tsx
index 70ae35c988..27a5be53bc 100644
--- a/gui/src/renderer/components/Accordion.tsx
+++ b/gui/src/renderer/components/Accordion.tsx
@@ -93,7 +93,8 @@ export default class Accordion extends React.Component<IProps, IState> {
   private collapse() {
     // First change height to height in px since it's not possible to transition to/from auto
     this.setState({ containerHeight: this.getContentHeight() + 'px' }, () => {
-      // Make sure new height has been applied
+      // Make sure new height has been applied. By reading offsetHeight we force the browser to
+      // apply the height before returning.
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       this.containerRef.current?.offsetHeight;
       this.setState({ containerHeight: '0' });
diff --git a/gui/src/renderer/lib/3dmap.ts b/gui/src/renderer/lib/3dmap.ts
index ec4def0744..d0e130e4c8 100644
--- a/gui/src/renderer/lib/3dmap.ts
+++ b/gui/src/renderer/lib/3dmap.ts
@@ -666,8 +666,8 @@ function getProjectionMatrix(gl: WebGL2RenderingContext): mat4 {
   // Create a perspective matrix, a special matrix that is
   // used to simulate the distortion of perspective in a camera.
   const fieldOfView = (angleOfView / 180) * Math.PI; // in radians
-  // @ts-ignore
-  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const canvas = gl.canvas as HTMLCanvasElement;
+  const aspect = canvas.clientWidth / canvas.clientHeight;
   const zNear = 0.1;
   const zFar = 10;
   const projectionMatrix = mat4.create();
diff --git a/gui/test/unit/notification-evaluation.spec.ts b/gui/test/unit/notification-evaluation.spec.ts
index 723307b3d7..d05e967efc 100644
--- a/gui/test/unit/notification-evaluation.spec.ts
+++ b/gui/test/unit/notification-evaluation.spec.ts
@@ -28,7 +28,7 @@ describe('System notifications', () => {
 
   before(() => {
     sandbox = sinon.createSandbox();
-    // @ts-ignore
+    // @ts-expect-error Way too many methods to mock.
     sandbox.stub(NotificationController.prototype, 'createElectronNotification').returns({
       show: () => {
         /* no-op */
diff --git a/gui/test/unit/tunnel-state.spec.ts b/gui/test/unit/tunnel-state.spec.ts
index a6013523b8..e751b50c57 100644
--- a/gui/test/unit/tunnel-state.spec.ts
+++ b/gui/test/unit/tunnel-state.spec.ts
@@ -14,7 +14,7 @@ const error: TunnelState = { state: 'error' } as TunnelState;
 describe('Tunnel state', () => {
   it('Should allow all updates', () => {
     const stateUpdateSpy = spy();
-    // @ts-ignore
+    // @ts-expect-error stateUpdateSpy doesn't know what type to accept
     const handleTunnelStateUpdate = (tunnelState: TunnelState) => stateUpdateSpy(tunnelState.state);
     const tunnelStateHandler = new TunnelStateHandler({ handleTunnelStateUpdate });
 
@@ -33,7 +33,7 @@ describe('Tunnel state', () => {
 
   it('Should ignore non-expected state update', () => {
     const stateUpdateSpy = spy();
-    // @ts-ignore
+    // @ts-expect-error stateUpdateSpy doesn't know what type to accept
     const handleTunnelStateUpdate = (tunnelState: TunnelState) => stateUpdateSpy(tunnelState.state);
     const tunnelStateHandler = new TunnelStateHandler({ handleTunnelStateUpdate });
 
@@ -49,7 +49,7 @@ describe('Tunnel state', () => {
 
   it('Should allow new states after expected state is reached', () => {
     const stateUpdateSpy = spy();
-    // @ts-ignore
+    // @ts-expect-error stateUpdateSpy doesn't know what type to accept
     const handleTunnelStateUpdate = (tunnelState: TunnelState) => stateUpdateSpy(tunnelState.state);
     const tunnelStateHandler = new TunnelStateHandler({ handleTunnelStateUpdate });
 
@@ -67,7 +67,7 @@ describe('Tunnel state', () => {
 
   it('Should allow error state update', () => {
     const stateUpdateSpy = spy();
-    // @ts-ignore
+    // @ts-expect-error stateUpdateSpy doesn't know what type to accept
     const handleTunnelStateUpdate = (tunnelState: TunnelState) => stateUpdateSpy(tunnelState.state);
     const tunnelStateHandler = new TunnelStateHandler({ handleTunnelStateUpdate });
 
@@ -86,7 +86,7 @@ describe('Tunnel state', () => {
   it('Should time out and use last ignored state', () => {
     const clock = sinon.useFakeTimers({ shouldAdvanceTime: true });
     const stateUpdateSpy = spy();
-    // @ts-ignore
+    // @ts-expect-error stateUpdateSpy doesn't know what type to accept
     const handleTunnelStateUpdate = (tunnelState: TunnelState) => stateUpdateSpy(tunnelState.state);
     const tunnelStateHandler = new TunnelStateHandler({ handleTunnelStateUpdate });