🚨 Make ts linter less depressed

frontend/src/businessData.tsx

@@ -7,11 +7,11 @@ import { Passages, Stops } from './types';
 interface Store {
 	passages: () => Passages;
 	getLinePassages?: (lineId: string) => Passages;
-	addPassages?: (passages) => void;
+	addPassages?: (passages: Passages) => void;
 	clearPassages?: () => void;
 
 	stops: () => Stops;
-	addStops?: (stops) => void;
+	addStops?: (stops: Stops) => void;
 };
 
 export const BusinessDataContext = createContext<Store>();
@@ -22,7 +22,7 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
 
 	const [store, setStore] = createStore({ lines: {}, passages: {}, stops: {} });
 
-	async function getLine(lineId: number) {
+	const getLine: Line = async (lineId: string) => {
 		let line = store.lines[lineId];
 		if (line === undefined) {
 			console.log(`${lineId} not found... fetch it from backend.`);

frontend/src/passagesDisplay.tsx

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal, useContext } from "solid-js";
+import { Component, createEffect, createResource, createSignal, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { createDateNow } from "@solid-primitives/date";
 import { format } from "date-fns";

frontend/src/search.tsx

@@ -1,20 +1,20 @@
-import { batch, createContext, createSignal } from 'solid-js';
+import { batch, createContext } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
 import { Stop, Stops } from './types';
 
 
 interface Store {
-    getMarkers: () => Markers;
-    addMarkers?: (stopId, markers) => void;
-    setMarkers?: (markers) => void;
+	getMarkers: () => Markers;
+	addMarkers?: (stopId, markers) => void;
+	setMarkers?: (markers) => void;
 
-    getStops: () => Stops;
-    setStops?: (stops) => void;
-    removeStops?: (stopIds) => void;
+	getStops: () => Stops;
+	setStops?: (stops) => void;
+	removeStops?: (stopIds: Array<number>) => void;
 
-    getDisplayedStop: () => Stop;
-    setDisplayedStop: (stop: Stop) => void;
+	getDisplayedStops: () => Array<Stop>;
+	setDisplayedStops: (stops: Array<Stop>) => void;
 };
 
 export const SearchContext = createContext<Store>();

frontend/src/stopsManager.tsx

@@ -1,15 +1,13 @@
-import { batch, Component, createEffect, createResource, createSignal, onMount, Show, useContext } from 'solid-js';
+import { Component, createEffect, createResource, createSignal, onMount, Show, useContext } from 'solid-js';
 
-import {
-	Box, Button, Input, InputLeftAddon, InputGroup, HStack, List, ListItem, Progress,
-	ProgressIndicator, VStack
-} from "@hope-ui/solid";
+import { Box, Button, Input, InputLeftAddon, InputGroup, HStack, List, ListItem, Progress, ProgressIndicator, VStack } from "@hope-ui/solid";
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 
 import { BusinessDataContext } from './businessData';
 import { SearchContext } from './search';
 
+import { Stop } from './types';
 import { renderLineTransportMode, renderLinePicto, TransportModeWeights } from './utils';
 
 import styles from './stopManager.module.css';
@@ -21,7 +19,7 @@ const StopRepr: Component = (props) => {
 
 	const [lineReprs] = createResource(props.stop.lines, fetchLinesRepr);
 
-	async function fetchLinesRepr(lineIds) {
+	const fetchLinesRepr = async (lineIds: Array<string>) => {
 		const reprs = [];
 		for (const lineId of lineIds) {
 			const line = await getLine(lineId);
@@ -100,7 +98,7 @@ const Map: Component = (props) => {
 	let map = null;
 	const stopsLayerGroup = L.featureGroup();
 
-	function buildMap(div: HTMLDivElement) {
+	const buildMap = (div: HTMLDivElement) => {
 		map = L.map(div).setView(mapCenter, 11);
 		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -108,7 +106,7 @@ const Map: Component = (props) => {
 		stopsLayerGroup.addTo(map);
 	}
 
-	function setMarker(stop) {
+	const setMarker = (stop: Stop): Array<L.Marker> => {
 		const markers = [];
 		if (stop.lat !== undefined && stop.lon !== undefined) {
 			/* TODO: Add stop lines representation to popup. */
@@ -124,7 +122,7 @@ const Map: Component = (props) => {
 
 	onMount(() => buildMap(mapDiv));
 
-	const onStopUpdate = createEffect(() => {
+	createEffect(() => {
 		/* TODO: Avoid to clear all layers... */
 		stopsLayerGroup.clearLayers();
 

frontend/src/types.tsx

@@ -6,28 +6,91 @@ export enum TrafficStatus {
 	BYPASSED
 }
 
-export interface Passages { };
-export interface Passage {
-	line: number,
-	operator: string,
-	destinations: Array<string>,
-	atStop: boolean,
-	aimedArrivalTs: number,
-	expectedArrivalTs: number,
-	arrivalPlatformName: string,
-	aimedDepartTs: number,
-	expectedDepartTs: number,
-	arrivalStatus: string,
-	departStatus: string,
+export class Passages { };
+
+export class Passage {
+	line: number;
+	operator: string;
+	destinations: Array<string>;
+	atStop: boolean;
+	aimedArrivalTs: number;
+	expectedArrivalTs: number;
+	arrivalPlatformName: string;
+	aimedDepartTs: number;
+	expectedDepartTs: number;
+	arrivalStatus: string;
+	departStatus: string;
+
+	constructor(line: number, operator: string, destinations: Array<string>, atStop: boolean, aimedArrivalTs: number,
+		expectedArrivalTs: number, arrivalPlatformName: string, aimedDepartTs: number, expectedDepartTs: number,
+		arrivalStatus: string, departStatus: string) {
+		this.line = line;
+		this.operator = operator;
+		this.destinations = destinations;
+		this.atStop = atStop;
+		this.aimedArrivalTs = aimedArrivalTs;
+		this.expectedArrivalTs = expectedArrivalTs;
+		this.arrivalPlatformName = arrivalPlatformName;
+		this.aimedDepartTs = aimedDepartTs;
+		this.expectedDepartTs = expectedDepartTs;
+		this.arrivalStatus = arrivalStatus;
+		this.departStatus = departStatus;
+	}
 };
 
+export class Stops { };
 
-export interface Stops { };
-export interface Stop {
-	id: number,
-	name: string,
-	town: string,
-	lat: number,
-	lon: number,
-	lines: Array<string>
+export class Stop {
+	id: number;
+	name: string;
+	town: string;
+	lat: number;
+	lon: number;
+	stops: Array<Stop>;
+	lines: Array<string>;
+
+	constructor(id: number, name: string, town: string, lat: number, lon: number, stops: Array<Stop>, lines: Array<string>) {
+		this.id = id;
+		this.name = name;
+		this.town = town;
+		this.lat = lat;
+		this.lon = lon;
+		this.stops = stops;
+		this.lines = lines;
+		for (const stop of this.stops) {
+			this.lines.push(...stop.lines);
+		}
+	}
+};
+
+export class Line {
+	id: string;
+	shortName: string;
+	name: string;
+	status: string; // TODO: Use an enum
+	transportMode: string; // TODO: Use an enum
+	backColorHexa: string;
+	foreColorHexa: string;
+	operatorId: number;
+	accessibility: boolean;
+	visualSignsAvailable: string; // TODO: Use an enum
+	audibleSignsAvailable: string; // TODO: Use an enum
+	stopIds: Array<number>;
+
+	constructor(id: string, shortName: string, name: string, status: string, transportMode: string, backColorHexa: string,
+		foreColorHexa: string, operatorId: number, accessibility: boolean, visualSignsAvailable: string,
+		audibleSignsAvailable: string, stopIds: Array<number>) {
+		this.id = id;
+		this.shortName = shortName;
+		this.name = name;
+		this.status = status;
+		this.transportMode = transportMode;
+		this.backColorHexa = backColorHexa;
+		this.foreColorHexa = foreColorHexa;
+		this.operatorId = operatorId;
+		this.accessibility = accessibility;
+		this.visualSignsAvailable = visualSignsAvailable;
+		this.audibleSignsAvailable = audibleSignsAvailable;
+		this.stopIds = stopIds;
+	}
 };

frontend/src/utils.tsx

@@ -1,3 +1,5 @@
+import { Line } from './types';
+
 const validTransportModes = ["bus", "tram", "metro", "rer", "transilien", "funicular", "ter", "unknown"];
 
 export const TransportModeWeights = {
@@ -11,11 +13,11 @@ export const TransportModeWeights = {
 	ter: 8,
 };
 
-export function renderLineTransportMode(line): JSX.Element {
+export function renderLineTransportMode(line: Line): JSX.Element {
 	return <img src={getTransportModeSrc(line.transportMode)} />
 }
 
-export function getTransportModeSrc(mode: string, color: bool = true): string {
+export function getTransportModeSrc(mode: string, color: boolean = true): string | null {
 	let ret = null;
 	if (validTransportModes.includes(mode)) {
 		ret = `/public/symbole_${mode}_${color ? "" : "support_fonce_"}RVB.svg`;
@@ -24,7 +26,7 @@ export function getTransportModeSrc(mode: string, color: bool = true): string {
 }
 
 
-function renderBusLinePicto(line, styles): JSX.Element {
+function renderBusLinePicto(line: Line, styles): JSX.Element {
 	return (
 		<div class={styles.busLinePicto}>
 			<svg viewBox="0 0 31.5 14">
@@ -42,7 +44,7 @@ function renderBusLinePicto(line, styles): JSX.Element {
 	);
 }
 
-function renderTramLinePicto(line, styles): JSX.Element {
+function renderTramLinePicto(line: Line, styles): JSX.Element {
 	const lineStyle = { fill: `#${line.backColorHexa}` };
 	return (
 		<div class={styles.tramLinePicto}>
@@ -62,7 +64,7 @@ function renderTramLinePicto(line, styles): JSX.Element {
 	);
 }
 
-function renderMetroLinePicto(line, styles): JSX.Element {
+function renderMetroLinePicto(line: Line, styles): JSX.Element {
 	return (
 		<div class={styles.metroLinePicto}>
 			<svg viewbox="0 0 20 20">
@@ -79,7 +81,7 @@ function renderMetroLinePicto(line, styles): JSX.Element {
 	);
 }
 
-function renderTrainLinePicto(line, styles): JSX.Element {
+function renderTrainLinePicto(line: Line, styles): JSX.Element {
 	return (
 		<div class={styles.trainLinePicto}>
 			<svg viewbox="0 0 20 20">
@@ -97,7 +99,7 @@ function renderTrainLinePicto(line, styles): JSX.Element {
 	);
 }
 
-export function renderLinePicto(line, styles): JSX.Element {
+export function renderLinePicto(line: Line, styles): JSX.Element {
 	switch (line.transportMode) {
 		case "bus":
 		case "funicular":