Enable TypeScript support in this repo

Makefile

@@ -55,6 +55,7 @@ validate:
 	make validate-no-uncommitted-package-lock-changes
 	npm run i18n_extract
 	npm run lint -- --max-warnings 0
+	npm run types
 	npm run test
 	npm run build
 

package.json

@@ -18,7 +18,8 @@
     "postinstall": "patch-package",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "types": "tsc --noEmit"
   },
   "author": "edX",
   "license": "AGPL-3.0",

src/constants.js → src/constants.ts

@@ -16,7 +16,7 @@ export const DECODE_ROUTES = {
   ],
   REDIRECT_HOME: 'home/:courseId',
   REDIRECT_SURVEY: 'survey/:courseId',
-};
+} as const satisfies Readonly<{ [k: string]: string | readonly string[] }>;
 
 export const ROUTES = {
   UNSUBSCRIBE: '/goal-unsubscribe/:token',
@@ -25,15 +25,15 @@ export const ROUTES = {
   DASHBOARD: 'dashboard',
   ENTERPRISE_LEARNER_DASHBOARD: 'enterprise-learner-dashboard',
   CONSENT: 'consent',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const REDIRECT_MODES = {
   DASHBOARD_REDIRECT: 'dashboard-redirect',
   ENTERPRISE_LEARNER_DASHBOARD_REDIRECT: 'enterprise-learner-dashboard-redirect',
   CONSENT_REDIRECT: 'consent-redirect',
   HOME_REDIRECT: 'home-redirect',
   SURVEY_REDIRECT: 'survey-redirect',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const VERIFIED_MODES = [
   'professional',
@@ -44,14 +44,15 @@ export const VERIFIED_MODES = [
   'executive-education',
   'paid-executive-education',
   'paid-bootcamp',
-];
+] as const satisfies readonly string[];
 
 export const WIDGETS = {
   DISCUSSIONS: 'DISCUSSIONS',
   NOTIFICATIONS: 'NOTIFICATIONS',
-};
+} as const satisfies Readonly<{ [k: string]: string }>;
 
 export const LOADING = 'loading';
 export const LOADED = 'loaded';
 export const FAILED = 'failed';
 export const DENIED = 'denied';
+export type StatusValue = typeof LOADING | typeof LOADED | typeof FAILED | typeof DENIED;

src/course-home/data/slice.js

@@ -1,10 +1,12 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
-export const DENIED = 'denied';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+  DENIED,
+} from '@src/constants';
 
 const slice = createSlice({
   name: 'course-home',

src/courseware/course/course-exit/CourseRecommendations.jsx

@@ -12,9 +12,9 @@ import {
 } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import truncate from 'truncate-html';
+import { FAILED, LOADED, LOADING } from '@src/constants';
 import { useModel } from '../../../generic/model-store';
 import fetchCourseRecommendations from './data/thunks';
-import { FAILED, LOADED, LOADING } from './data/slice';
 import CatalogSuggestion from './CatalogSuggestion';
 import PageLoading from '../../../generic/PageLoading';
 import { logClick } from './utils';

src/courseware/course/course-exit/data/slice.js

@@ -1,9 +1,10 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
-
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+} from '@src/constants';
 
 const slice = createSlice({
   courseId: null,

src/courseware/course/new-sidebar/common/SidebarBase.jsx

@@ -95,7 +95,7 @@ SidebarBase.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
   sidebarId: PropTypes.string.isRequired,
   className: PropTypes.string,
-  children: PropTypes.element.isRequired,
+  children: PropTypes.node.isRequired,
   showTitleBar: PropTypes.bool,
   width: PropTypes.string,
   allowFullHeight: PropTypes.bool,

src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx

@@ -65,6 +65,7 @@ const NotificationsWidget = () => {
 
   // After three seconds, update notificationSeen (to hide red dot)
   useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
     setTimeout(onNotificationSeen, 3000);
     sendTrackEvent('edx.ui.course.upgrade.new_sidebar.notifications', notificationTrayEventProperties);
   }, []);

src/courseware/course/sequence/Sequence.jsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx

@@ -13,12 +13,12 @@ import {
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useSelector } from 'react-redux';
 
+import { LOADED } from '@src/constants';
 import { GetCourseExitNavigation } from '../../course-exit';
 import UnitButton from './UnitButton';
 import SequenceNavigationTabs from './SequenceNavigationTabs';
 import { useSequenceNavigationMetadata } from './hooks';
 import { useModel } from '../../../../generic/model-store';
-import { LOADED } from '../../../data/slice';
 
 import messages from './messages';
 

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx

@@ -9,7 +9,7 @@ import {
 } from '@openedx/paragon/icons';
 
 import { useModel } from '@src/generic/model-store';
-import { LOADING, LOADED } from '@src/course-home/data/slice';
+import { LOADING, LOADED } from '@src/constants';
 import PageLoading from '@src/generic/PageLoading';
 import {
   getSequenceId,

src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx

@@ -64,6 +64,7 @@ const NotificationTray = ({ intl }) => {
   };
   // After three seconds, update notificationSeen (to hide red dot)
   useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
     setTimeout(onNotificationSeen, 3000);
     sendTrackEvent('edx.ui.course.upgrade.old_sidebar.notifications', notificationTrayEventProperties);
   }, []);

src/courseware/data/redux.test.js

@@ -4,8 +4,8 @@ import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform';
 
+import { FAILED, LOADING } from '@src/constants';
 import * as thunks from './thunks';
-import { FAILED, LOADING } from './slice';
 
 import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
 

src/courseware/data/selectors.js

@@ -1,4 +1,4 @@
-import { LOADED } from './slice';
+import { LOADED } from '@src/constants';
 
 export function sequenceIdsSelector(state) {
   if (state.courseware.courseStatus !== LOADED) {

src/courseware/data/slice.js

@@ -1,10 +1,12 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-export const LOADING = 'loading';
-export const LOADED = 'loaded';
-export const FAILED = 'failed';
-export const DENIED = 'denied';
+import {
+  LOADING,
+  LOADED,
+  FAILED,
+  DENIED,
+} from '@src/constants';
 
 const slice = createSlice({
   name: 'courseware',

src/frontend-platform.d.ts

@@ -0,0 +1,41 @@
+// frontend-platform currently doesn't provide types... do it ourselves for i18n module at least.
+// We can remove this in the future when we migrate to frontend-shell, or when frontend-platform gets types
+// (whichever comes first).
+
+declare module '@edx/frontend-platform/i18n' {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  import { injectIntl as _injectIntl } from 'react-intl';
+  /** @deprecated Use useIntl() hook instead. */
+  export const injectIntl: typeof _injectIntl;
+  /** @deprecated Use useIntl() hook instead. */
+  export const intlShape: any;
+
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export {
+    createIntl,
+    FormattedDate,
+    FormattedTime,
+    FormattedRelativeTime,
+    FormattedNumber,
+    FormattedPlural,
+    FormattedMessage,
+    defineMessages,
+    IntlProvider,
+    useIntl,
+  } from 'react-intl';
+
+  // Other exports from the i18n module:
+  export const configure: any;
+  export const getPrimaryLanguageSubtag: (code: string) => string;
+  export const getLocale: (locale?: string) => string;
+  export const getMessages: any;
+  export const isRtl: (locale?: string) => boolean;
+  export const handleRtl: any;
+  export const mergeMessages: any;
+  export const LOCALE_CHANGED: any;
+  export const LOCALE_TOPIC: any;
+  export const getCountryList: any;
+  export const getCountryMessages: any;
+  export const getLanguageList: any;
+  export const getLanguageMessages: any;
+}

src/generic/CourseAccessErrorPage.jsx

@@ -4,10 +4,10 @@ import { useParams, Navigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import FooterSlot from '@openedx/frontend-slot-footer';
+import { LOADED, LOADING } from '@src/constants';
 import useActiveEnterpriseAlert from '../alerts/active-enteprise-alert';
 import { AlertList } from './user-messages';
 import { fetchDiscussionTab } from '../course-home/data/thunks';
-import { LOADED, LOADING } from '../course-home/data/slice';
 import PageLoading from './PageLoading';
 import messages from '../tab-page/messages';
 

src/preferences-unsubscribe/index.jsx

@@ -10,7 +10,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { logError } from '@edx/frontend-platform/logging';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
-import { LOADED, LOADING, FAILED } from '../constants';
+import { LOADED, LOADING, FAILED } from '@src/constants';
 import PageLoading from '../generic/PageLoading';
 import { unsubscribeNotificationPreferences } from './data/api';
 import messages from './messages';

src/setupTest.js

@@ -193,10 +193,10 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
 
   logUnhandledRequests(axiosMock);
 
-  // eslint-disable-next-line no-unused-expressions
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   !options.excludeFetchCourse && await executeThunk(fetchCourse(courseMetadata.id), store.dispatch);
 
-  // eslint-disable-next-line no-unused-expressions
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   !options.excludeFetchOutlineSidebar && await executeThunk(
     getCourseOutlineStructure(courseMetadata.id),
     store.dispatch,

src/shared/streak-celebration/StreakCelebrationModal.jsx

@@ -64,7 +64,7 @@ const StreakModal = ({
 }) => {
   const { org, celebrations, username } = useModel('courseHomeMeta', courseId);
   const factoid = getRandomFactoid(intl, streakLengthToCelebrate);
-  // eslint-disable-next-line no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [randomFactoid, setRandomFactoid] = useState(factoid); // Don't change factoid on re-render
 
   // Open edX Folks: if you create a voucher with this code, the MFE will notice and show the discount

src/utils.js → src/utils.ts

@@ -1,13 +1,19 @@
-// Helper, that is used to forcibly finalize all promises
-// in thunk before running matcher against state.
+/**
+ * Helper, that is used to forcibly finalize all promises
+ * in thunk before running matcher against state.
+ *
+ * TODO: move this to setupTest or testUtils - it's only used in tests.
+ */
 export const executeThunk = async (thunk, dispatch, getState) => {
   await thunk(dispatch, getState);
   await new Promise(setImmediate);
 };
 
-// Utility function for appending the browser timezone to the url
-// Can be used on the backend when the user timezone is not set in the user account
-export const appendBrowserTimezoneToUrl = (url) => {
+/**
+ * Utility function for appending the browser timezone to the url
+ * Can be used on the backend when the user timezone is not set in the user account
+ */
+export const appendBrowserTimezoneToUrl = (url: string) => {
   const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const urlObject = new URL(url);
   if (browserTimezone) {

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "@edx/typescript-config",
+    "compilerOptions": {
+      "outDir": "dist",
+      "baseUrl": "./src",
+      "paths": {
+        "*": ["*"],
+        "@src/*": ["*"]
+      }
+    },
+    "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*"],
+    "exclude": ["dist", "node_modules"]
+}