Typescript

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
     // react
     'react/button-has-type': 'warn',
     'react/destructuring-assignment': 'off',
-    'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', 'tsx'] }],
     'react/jsx-fragments': 'off',
     'react/jsx-key': 'error',
     'react/jsx-props-no-spreading': 'off',
@@ -72,4 +72,15 @@ module.exports = {
   settings: {
     polyfills: ['fetch', 'promises'],
   },
+  overrides: [
+    {
+      files: ['*.{ts,tsx}'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
 };

.nycrc.json

@@ -5,9 +5,17 @@
   "require": [
     "@babel/register"
   ],
+  "extensions": [
+    ".js",
+    ".ts",
+    ".tsx"
+  ],
   "include": [
     "app/**/*.js"
   ],
+  "exclude": [
+    "**/*.d.ts"
+  ],
   "reporter": [
     "lcovonly",
     "html",

.yarnrc.yml

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
     spec: "@yarnpkg/plugin-version"
 
-yarnPath: .yarn/releases/yarn-berry.cjs
+yarnPath: .yarn/releases/yarn-2.4.3.cjs

TYPESCRIPT-MIGRATION.md

@@ -0,0 +1,49 @@
+# Typescript migration
+
+## Proven approaches
+
+Typescript migration projects has been completed and documented. One approach
+to follow: https://www.sitepoint.com/how-to-migrate-a-react-app-to-typescript/
+
+## Migrate files
+
+1. Rename file extension `.js` to `.ts`.
+2. Run migration tool in project root (where tsconfig.json is):
+
+```sh
+yarn ts-migrate migrate --sources app/**/*.ts
+```
+
+## Strategies
+
+Tool `ts-migrate` adds `@ts-expect-error` annotation to postpone resolution.
+
+### Packages
+
+**Example case:**
+
+```js
+// @ts-expect-error TS(7016): Could not find a declaration file for module 'clas... Remove this comment to see the full error message
+import cx from 'classnames';
+```
+
+**Resolution:**
+
+For widely used packages, add type definition package to project (note: as devDependency):
+
+```sh
+yarn add --dev @types/classsnames
+```
+
+After package is added, annotation line (`// @ts-expect-error ...`) should be removed.
+
+### Little used and inhouse-maintained packages:
+
+Use a tool to infer module types with an external tool, eg. `dts-gen` by Microsoft [https://github.com/microsoft/dts-gen](https://github.com/microsoft/dts-gen).
+
+If module can be imported by node (>=10 <11) from command line, create types by running:
+
+```sh
+# creates a file "package-name.d.ts"
+npx dts-gen -m <package-name>
+```

app/component/AlertBanner.js

@@ -7,7 +7,7 @@ import Icon from './Icon';
 import {
   getServiceAlertDescription,
   alertSeverityCompare,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 
 const AlertBanner = ({ alerts, linkAddress, language }, { config }) => {
   const alert = [...alerts].sort(alertSeverityCompare)[0];

app/component/AlertList.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import RouteAlertsRow from './RouteAlertsRow';
-import { createUniqueAlertList } from '../util/alertUtils';
+import { createUniqueAlertList } from '../util/alertUtils.ts';
 import withBreakpoint from '../util/withBreakpoint';
 import { getRouteMode } from '../util/modeUtils';
 

app/component/DepartureListContainer.js

@@ -7,7 +7,7 @@ import { createFragmentContainer, graphql } from 'react-relay';
 import { intlShape, FormattedMessage } from 'react-intl';
 import Icon from './Icon';
 import DepartureRow from './DepartureRow';
-import { patternIdPredicate } from '../util/alertUtils';
+import { patternIdPredicate } from '../util/alertUtils.ts';
 import { isBrowser } from '../util/browser';
 import {
   stopRealTimeClient,

app/component/DepartureRow.js

@@ -7,7 +7,7 @@ import { v4 as uuid } from 'uuid';
 import { Link } from 'found';
 import LocalTime from './LocalTime';
 import { getHeadsignFromRouteLongName } from '../util/legUtils';
-import { alertSeverityCompare } from '../util/alertUtils';
+import { alertSeverityCompare } from '../util/alertUtils.ts';
 import Icon from './Icon';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
 import { PREFIX_ROUTES, PREFIX_STOPS } from '../util/path';

app/component/DisruptionBanner.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import isEmpty from 'lodash/isEmpty';
-import { isAlertValid, getServiceAlertMetadata } from '../util/alertUtils';
+import { isAlertValid, getServiceAlertMetadata } from '../util/alertUtils.ts';
 import DisruptionBannerAlert from './DisruptionBannerAlert';
 import SwipeableTabs from './SwipeableTabs';
 import withBreakpoint from '../util/withBreakpoint';

app/component/DisruptionBannerAlert.js

@@ -9,7 +9,7 @@ import {
   getServiceAlertDescription,
   getServiceAlertHeader,
   mapAlertSource,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 
 const DisruptionBannerAlert = (
   { language, alert, openAllAlerts, truncate, onClose },

app/component/DisruptionListContainer.js

@@ -13,7 +13,7 @@ import {
   getServiceAlertUrl,
   isAlertValid,
   createUniqueAlertList,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 import { isKeyboardSelectionEvent } from '../util/browser';
 import withBreakpoint from '../util/withBreakpoint';
 

app/component/ItineraryLegs.js

@@ -22,7 +22,7 @@ import CarLeg from './CarLeg';
 import CarParkLeg from './CarParkLeg';
 import ViaLeg from './ViaLeg';
 import CallAgencyLeg from './CallAgencyLeg';
-import { itineraryHasCancelation } from '../util/alertUtils';
+import { itineraryHasCancelation } from '../util/alertUtils.ts';
 import { compressLegs, isCallAgencyPickupType } from '../util/legUtils';
 import updateShowCanceledLegsBannerState from '../action/CanceledLegsBarActions';
 import { addAnalyticsEvent } from '../util/analyticsUtils';

app/component/ItinerarySummaryListContainer.js

@@ -14,7 +14,7 @@ import SummaryRow from './SummaryRow';
 import { isBrowser } from '../util/browser';
 import { getZones } from '../util/legUtils';
 import CanceledItineraryToggler from './CanceledItineraryToggler';
-import { itineraryHasCancelation } from '../util/alertUtils';
+import { itineraryHasCancelation } from '../util/alertUtils.ts';
 import { getCurrentSettings, getDefaultSettings } from '../util/planParamUtil';
 import { ItinerarySummarySubtitle } from './ItinerarySummarySubtitle';
 import Loading from './Loading';

app/component/MessageBar.js

@@ -16,7 +16,7 @@ import {
   getServiceAlertHeader,
   getServiceAlertUrl,
   mapAlertSource,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 import { isIe, isKeyboardSelectionEvent } from '../util/browser';
 import hashCode from '../util/hashUtil';
 

app/component/RouteAlertsContainer.js

@@ -11,7 +11,7 @@ import {
   getServiceAlertsForRouteStops,
   otpServiceAlertShape,
   tripHasCancelation,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 import { getRouteMode } from '../util/modeUtils';
 
 function RouteAlertsContainer({ route }, { intl, match }) {

app/component/RouteAlertsRow.js

@@ -12,7 +12,7 @@ import Icon from './Icon';
 import RouteNumber from './RouteNumber';
 import ServiceAlertIcon from './ServiceAlertIcon';
 import { PREFIX_ROUTES, PREFIX_STOPS } from '../util/path';
-import { mapAlertSource } from '../util/alertUtils';
+import { mapAlertSource } from '../util/alertUtils.ts';
 
 export const getTimePeriod = ({ currentTime, startTime, endTime, intl }) => {
   const at = intl.formatMessage({

app/component/RoutePageControlPanel.js

@@ -26,7 +26,7 @@ import {
   getServiceAlertsForStop,
   getCancelationsForStop,
   getServiceAlertsForStopRoutes,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 import { isActiveDate } from '../util/patternUtils';
 import {
   PREFIX_DISRUPTION,

app/component/RouteStop.js

@@ -9,7 +9,7 @@ import FuzzyTripLink from './FuzzyTripLink';
 import ServiceAlertIcon from './ServiceAlertIcon';
 import { fromStopTime } from './DepartureTime';
 import ZoneIcon from './ZoneIcon';
-import { getActiveAlertSeverityLevel } from '../util/alertUtils';
+import { getActiveAlertSeverityLevel } from '../util/alertUtils.ts';
 import { PREFIX_STOPS } from '../util/path';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
 import { getZoneLabel } from '../util/legUtils';

app/component/StopAlerts.js

@@ -14,7 +14,7 @@ import {
   getServiceAlertsForRoute,
   routeHasCancelation,
   getCancelationsForRoute,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 
 const StopAlerts = ({ stop }, { intl }) => {
   const cancelations = getCancelationsForStop(stop).map(stoptime => {

app/component/StopAlertsContainer.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
 
 import StopAlerts from './StopAlerts';
-import { otpServiceAlertShape } from '../util/alertUtils';
+import { otpServiceAlertShape } from '../util/alertUtils.ts';
 
 const StopAlertsContainer = ({ stop }) => {
   return <StopAlerts stop={stop} />;

app/component/StopPageTabs.js

@@ -14,7 +14,7 @@ import {
   getCancelationsForRoute,
   getServiceAlertsForRoute,
   getServiceAlertsForRouteStops,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 import withBreakpoint from '../util/withBreakpoint';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
 import {

app/component/SummaryPage.js

@@ -36,7 +36,7 @@ import {
 import { planQuery, moreItinerariesQuery } from '../util/queryUtils';
 import withBreakpoint from '../util/withBreakpoint';
 import { isIOS } from '../util/browser';
-import { itineraryHasCancelation } from '../util/alertUtils';
+import { itineraryHasCancelation } from '../util/alertUtils.ts';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
 import {
   parseLatLon,

app/component/SummaryRow.js

@@ -9,7 +9,7 @@ import LocalTime from './LocalTime';
 import RelativeDuration from './RelativeDuration';
 import RouteNumber from './RouteNumber';
 import RouteNumberContainer from './RouteNumberContainer';
-import { getActiveLegAlertSeverityLevel } from '../util/alertUtils';
+import { getActiveLegAlertSeverityLevel } from '../util/alertUtils.ts';
 import {
   getLegMode,
   compressLegs,

app/component/TerminalAlertsContainer.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
 
 import StopAlerts from './StopAlerts';
-import { otpServiceAlertShape } from '../util/alertUtils';
+import { otpServiceAlertShape } from '../util/alertUtils.ts';
 
 const TerminalAlertsContainer = ({ station }) => {
   return <StopAlerts stop={station} />;

app/component/TransitLeg.js

@@ -22,7 +22,7 @@ import {
   getActiveLegAlerts,
   alertSeverityCompare,
   getMaximumAlertSeverityLevel,
-} from '../util/alertUtils';
+} from '../util/alertUtils.ts';
 import { PREFIX_ROUTES, PREFIX_STOPS, PREFIX_DISRUPTION } from '../util/path';
 import { durationToString } from '../util/timeUtils';
 import { addAnalyticsEvent } from '../util/analyticsUtils';

app/component/TripRouteStop.js

@@ -9,7 +9,7 @@ import AddressRow from './AddressRow';
 import ServiceAlertIcon from './ServiceAlertIcon';
 import { fromStopTime } from './DepartureTime';
 import { PREFIX_STOPS } from '../util/path';
-import { getActiveAlertSeverityLevel } from '../util/alertUtils';
+import { getActiveAlertSeverityLevel } from '../util/alertUtils.ts';
 import { estimateItineraryDistance } from '../util/geo-utils';
 import ZoneIcon from './ZoneIcon';
 import { getZoneLabel } from '../util/legUtils';

app/component/TruncatedMessage.js

@@ -4,7 +4,14 @@ import { intlShape } from 'react-intl';
 import TruncateMarkup from 'react-truncate-markup';
 
 const TruncatedMessage = (
-  { lines, message, className, truncate, onShowMore, onTruncate = () => {} },
+  {
+    lines,
+    message,
+    className,
+    truncate,
+    onShowMore,
+    onTruncate = didTruncate => didTruncate,
+  },
   { intl },
 ) => {
   const [isTruncated, setTruncated] = useState(true);

app/component/WalkLeg.js

@@ -9,7 +9,7 @@ import Icon from './Icon';
 import ItineraryCircleLineWithIcon from './ItineraryCircleLineWithIcon';
 import PlatformNumber from './PlatformNumber';
 import ServiceAlertIcon from './ServiceAlertIcon';
-import { getActiveAlertSeverityLevel } from '../util/alertUtils';
+import { getActiveAlertSeverityLevel } from '../util/alertUtils.ts';
 import { PREFIX_STOPS } from '../util/path';
 import {
   CityBikeNetworkType,