Typescript: GraphQL queries

.eslintrc.js

@@ -1,3 +1,11 @@
+const fs = require('fs');
+const path = require('path');
+
+const graphqlSchemaString = fs.readFileSync(
+  path.resolve(__dirname, './build/schema.graphql'),
+  { encoding: 'utf-8' },
+);
+
 module.exports = {
   parser: 'babel-eslint',
   extends: [
@@ -18,7 +26,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',
@@ -48,8 +56,7 @@ module.exports = {
       'error',
       {
         env: 'relay',
-        // eslint-disable-next-line global-require
-        schemaJson: require('./build/schema.json').data,
+        schemaString: graphqlSchemaString,
         tagName: 'graphql',
       },
     ],
@@ -72,4 +79,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';
 
@@ -54,7 +54,9 @@ const fetchServiceAlerts = async (feedids, relayEnvironment) => {
     }
   `;
 
-  const result = await fetchQuery(relayEnvironment, query, { feedids });
+  const result = await fetchQuery(relayEnvironment, query, {
+    feedids,
+  }).toPromise();
   return result && Array.isArray(result.alerts) ? result.alerts : [];
 };
 

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/RoutePatternSelect.js

@@ -180,12 +180,17 @@ class RoutePatternSelect extends Component {
       const params = { name: searchSimilarTo, mode: route.mode };
       fetchQuery(this.props.relayEnvironment, query, params, {
         force: true,
-      }).then(results => {
-        this.setState({
-          similarRoutes: filterSimilarRoutes(results.routes, this.props.route),
-          loadingSimilar: false,
+      })
+        .toPromise()
+        .then(results => {
+          this.setState({
+            similarRoutes: filterSimilarRoutes(
+              results.routes,
+              this.props.route,
+            ),
+            loadingSimilar: false,
+          });
         });
-      });
     }
   };
 

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} />;
@@ -45,7 +45,6 @@ const containerComponent = createFragmentContainer(StopAlertsContainer, {
     @argumentDefinitions(
       startTime: { type: "Long" }
       timeRange: { type: "Int", defaultValue: 900 }
-      date: { type: "String" }
     ) {
       routes {
         gtfsId

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/StopsNearYouFavouritesContainer.js

@@ -89,8 +89,7 @@ const refetchContainer = createFragmentContainer(
   {
     stops: graphql`
       fragment StopsNearYouFavouritesContainer_stops on Stop
-      @relay(plural: true)
-      @argumentDefinitions(startTime: { type: "Long!", defaultValue: 0 }) {
+      @relay(plural: true) {
         ...StopNearYouContainer_stop
         gtfsId
         lat
@@ -99,8 +98,7 @@ const refetchContainer = createFragmentContainer(
     `,
     stations: graphql`
       fragment StopsNearYouFavouritesContainer_stations on Stop
-      @relay(plural: true)
-      @argumentDefinitions(startTime: { type: "Long!", defaultValue: 0 }) {
+      @relay(plural: true) {
         ...StopNearYouContainer_stop
         gtfsId
         lat

app/component/StopsNearYouPage.js

@@ -454,7 +454,7 @@ class StopsNearYouPage extends React.Component {
                 $first: Int!
                 $maxResults: Int!
                 $maxDistance: Int!
-                $omitNonPickups: Boolean
+                $omitNonPickups: Boolean!
                 $feedIds: [String!]
               ) {
                 stopPatterns: viewer {
@@ -740,7 +740,7 @@ class StopsNearYouPage extends React.Component {
             $first: Int!
             $maxResults: Int!
             $maxDistance: Int!
-            $omitNonPickups: Boolean
+            $omitNonPickups: Boolean!
             $prioritizedStopIds: [String!]!
           ) {
             stops: viewer {