chore(js): stricter types

app/javascript/components/MapEditor/components/CadastreLayer.tsx

@@ -7,14 +7,18 @@ import { useMapLibre, ReactControl } from '../../shared/maplibre/MapLibre';
 import {
   useEvent,
   useMapEvent,
-  EventHandler
+  type EventHandler
 } from '../../shared/maplibre/hooks';
 import {
   filterFeatureCollection,
   findFeature
 } from '../../shared/maplibre/utils';
 
-import { SOURCE_CADASTRE, CreateFeatures, DeleteFeatures } from '../hooks';
+import {
+  SOURCE_CADASTRE,
+  type CreateFeatures,
+  type DeleteFeatures
+} from '../hooks';
 
 export function CadastreLayer({
   featureCollection,

app/javascript/components/MapEditor/components/DrawLayer.tsx

@@ -18,9 +18,9 @@ import {
 } from '../../shared/maplibre/utils';
 import {
   SOURCE_SELECTION_UTILISATEUR,
-  CreateFeatures,
-  UpdateFatures,
-  DeleteFeatures
+  type CreateFeatures,
+  type UpdateFatures,
+  type DeleteFeatures
 } from '../hooks';
 
 export function DrawLayer({

app/javascript/components/MapEditor/components/ImportFileInput.tsx

@@ -1,10 +1,15 @@
-import { useState, useCallback, MouseEvent, ChangeEvent } from 'react';
+import {
+  useState,
+  useCallback,
+  type MouseEvent,
+  type ChangeEvent
+} from 'react';
 import type { FeatureCollection } from 'geojson';
 import invariant from 'tiny-invariant';
 
 import { readGeoFile } from '../readGeoFile';
 import { generateId } from '../../shared/maplibre/utils';
-import { CreateFeatures, DeleteFeatures } from '../hooks';
+import type { CreateFeatures, DeleteFeatures } from '../hooks';
 
 export function ImportFileInput({
   featureCollection,

app/javascript/components/MapReader/components/GeoJSONLayer.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { Popup, LngLatBoundsLike, LngLatLike } from 'maplibre-gl';
+import { Popup, type LngLatBoundsLike, type LngLatLike } from 'maplibre-gl';
 import type { Feature, FeatureCollection, Point } from 'geojson';
 
 import { useMapLibre } from '../../shared/maplibre/MapLibre';
 import {
   useFitBounds,
   useEvent,
-  EventHandler,
+  type EventHandler,
   useMapEvent,
   useFlyTo
 } from '../../shared/maplibre/hooks';

app/javascript/components/react-aria/hooks.ts

@@ -1,4 +1,4 @@
-import { matchSorter, MatchSorterOptions } from 'match-sorter';
+import { matchSorter, type MatchSorterOptions } from 'match-sorter';
 import type { Key } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type {

app/javascript/components/shared/maplibre/MapLibre.tsx

@@ -4,7 +4,7 @@ import {
   useRef,
   useEffect,
   useMemo,
-  ReactNode,
+  type ReactNode,
   createContext,
   useCallback
 } from 'react';

app/javascript/components/shared/maplibre/StyleControl.tsx

@@ -4,7 +4,7 @@ import { MapIcon } from '@heroicons/react/outline';
 import { Slider } from '@reach/slider';
 import '@reach/slider/styles.css';
 
-import { LayersMap, NBS } from './styles';
+import { type LayersMap, NBS } from './styles';
 
 const STYLES = {
   ortho: 'Satellite',

app/javascript/components/shared/maplibre/hooks.ts

@@ -1,21 +1,21 @@
+import type { Feature, Geometry } from 'geojson';
+import type {
+  LngLat,
+  LngLatBoundsLike,
+  LngLatLike,
+  MapLayerEventType,
+  StyleSpecification
+} from 'maplibre-gl';
 import {
   useCallback,
   useEffect,
-  useState,
   useMemo,
+  useState,
   type RefObject
 } from 'react';
-import type {
-  LngLatBoundsLike,
-  LngLat,
-  MapLayerEventType,
-  StyleSpecification,
-  LngLatLike
-} from 'maplibre-gl';
-import type { Feature, Geometry } from 'geojson';
 
-import { getMapStyle, getLayerName, LayersMap } from './styles';
 import { useMapLibre } from './MapLibre';
+import { getLayerName, getMapStyle, type LayersMap } from './styles';
 
 export function useFitBounds() {
   const map = useMapLibre();

app/javascript/controllers/checkbox_select_all_controller.ts

@@ -5,7 +5,7 @@ export class CheckboxSelectAll extends ApplicationController {
   declare readonly checkboxTargets: HTMLInputElement[];
   declare readonly checkboxAllTarget: HTMLInputElement;
 
-  static targets: string[] = ['checkboxAll', 'checkbox'];
+  static targets = ['checkboxAll', 'checkbox'];
 
   initialize() {
     this.toggle = this.toggle.bind(this);

app/javascript/controllers/email_france_connect_controller.ts

@@ -9,14 +9,14 @@ export class EmailFranceConnectController extends ApplicationController {
     'form'
   ];
 
-  emailFieldTarget!: HTMLElement;
-  useFranceConnectEmailTargets!: HTMLInputElement[];
-  submitTarget!: HTMLButtonElement;
-  emailInputTarget!: HTMLInputElement;
-  formTarget!: HTMLFormElement;
-
-  fcEmailPathValue!: string;
-  customEmailPathValue!: string;
+  declare readonly emailFieldTarget: HTMLElement;
+  declare readonly useFranceConnectEmailTargets: HTMLInputElement[];
+  declare readonly submitTarget: HTMLButtonElement;
+  declare readonly emailInputTarget: HTMLInputElement;
+  declare readonly formTarget: HTMLFormElement;
+
+  declare readonly fcEmailPathValue: string;
+  declare readonly customEmailPathValue: string;
 
   static values = {
     fcEmailPath: String,

app/javascript/controllers/lazy/lightbox_controller.ts

@@ -1,11 +1,11 @@
-import { ApplicationController } from '../application_controller';
 import lightGallery from 'lightgallery';
-import { LightGallery } from 'lightgallery/lightgallery';
+import 'lightgallery/css/lightgallery-bundle.css';
+import type { LightGallery } from 'lightgallery/lightgallery';
+import lgHash from 'lightgallery/plugins/hash';
+import lgRotate from 'lightgallery/plugins/rotate';
 import lgThumbnail from 'lightgallery/plugins/thumbnail';
 import lgZoom from 'lightgallery/plugins/zoom';
-import lgRotate from 'lightgallery/plugins/rotate';
-import lgHash from 'lightgallery/plugins/hash';
-import 'lightgallery/css/lightgallery-bundle.css';
+import { ApplicationController } from '../application_controller';
 
 export default class extends ApplicationController {
   lightGallery?: LightGallery;

app/javascript/controllers/type_de_champ_editor_controller.ts

@@ -1,5 +1,5 @@
 import { matchInputElement } from '@coldwired/utils';
-import { ActionEvent } from '@hotwired/stimulus';
+import type { ActionEvent } from '@hotwired/stimulus';
 import { getConfig, httpRequest } from '@utils';
 
 import { AutoUpload } from '../shared/activestorage/auto-upload';

tsconfig.json

@@ -1,18 +1,22 @@
 {
   "include": ["app/javascript/**/*.ts", "app/javascript/**/*.tsx"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
-    "target": "ES2019",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
     "moduleResolution": "node",
-    "module": "es2020",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
     "jsx": "react-jsx",
     "esModuleInterop": true,
-    "experimentalDecorators": true,
     "isolatedModules": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "types": ["vite/client"],
     "paths": {
       "~/*": ["./app/javascript/*"],