Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript #4619

Draft
wants to merge 14 commits into
base: v3
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
},
},
],
};
8 changes: 8 additions & 0 deletions .nycrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,17 @@
"require": [
"@babel/register"
],
"extensions": [
".js",
".ts",
".tsx"
],
"include": [
"app/**/*.js"
],
"exclude": [
"**/*.d.ts"
],
"reporter": [
"lcovonly",
"html",
Expand Down

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .yarnrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
49 changes: 49 additions & 0 deletions TYPESCRIPT-MIGRATION.md
Original file line number Diff line number Diff line change
@@ -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>
```
2 changes: 1 addition & 1 deletion app/component/AlertBanner.js
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
2 changes: 1 addition & 1 deletion app/component/AlertList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion app/component/DepartureListContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/component/DepartureRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion app/component/DisruptionBanner.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion app/component/DisruptionBannerAlert.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
getServiceAlertDescription,
getServiceAlertHeader,
mapAlertSource,
} from '../util/alertUtils';
} from '../util/alertUtils.ts';

const DisruptionBannerAlert = (
{ language, alert, openAllAlerts, truncate, onClose },
Expand Down
2 changes: 1 addition & 1 deletion app/component/DisruptionListContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion app/component/ItineraryLegs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion app/component/ItinerarySummaryListContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion app/component/MessageBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion app/component/RouteAlertsContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down
2 changes: 1 addition & 1 deletion app/component/RouteAlertsRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion app/component/RoutePageControlPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
getServiceAlertsForStop,
getCancelationsForStop,
getServiceAlertsForStopRoutes,
} from '../util/alertUtils';
} from '../util/alertUtils.ts';
import { isActiveDate } from '../util/patternUtils';
import {
PREFIX_DISRUPTION,
Expand Down
2 changes: 1 addition & 1 deletion app/component/RouteStop.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion app/component/StopAlerts.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
2 changes: 1 addition & 1 deletion app/component/StopAlertsContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
Expand Down
2 changes: 1 addition & 1 deletion app/component/StopPageTabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion app/component/SummaryPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/component/SummaryRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/component/TerminalAlertsContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
Expand Down
2 changes: 1 addition & 1 deletion app/component/TransitLeg.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion app/component/TripRouteStop.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
9 changes: 8 additions & 1 deletion app/component/TruncatedMessage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion app/component/WalkLeg.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading