Moving to Typescript (#228)

* Moving to typescript

* Adding typechecking and initial typing

* No vars

* Fixing extra semicolon

* Adding typings

* Fixing RUM with typescript

* Fixing linting

* Fixing RUM

Author: devinmatte

.eslintrc.json

@@ -4,6 +4,10 @@
         "commonjs": true,
         "es6": true
     },
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+        "@typescript-eslint"
+    ],
     "extends": [
         "standard"
     ],
@@ -16,6 +20,7 @@
     },
     "rules": {
         "no-undef": "off",
+        "no-var": "warn",
         "no-unused-vars": "warn",
         "no-prototype-builtins": "warn",
         "no-redeclare": "warn",

.github/workflows/npm.yml

@@ -23,4 +23,5 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: npm install
     - run: npm run lint
+    - run: npm run typecheck
     - run: npm run build

.gitignore

@@ -12,6 +12,7 @@ package-lock.json
 
 # Ignore built files
 assets/prod/*
+assets/dist/*
 !assets/prod/.gitkeep
 
 # Other files

…ules/sm/App/controllers/AppController.js …ules/sm/App/controllers/AppController.tsassets/src/modules/sm/App/controllers/AppController.js renamed to assets/src/modules/sm/App/controllers/AppController.ts assets/src/modules/sm/App/controllers/AppController.js renamed to assets/src/modules/sm/App/controllers/AppController.ts

@@ -67,7 +67,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
   }
 
   // Reload the state if it exists
-  var storedState = localStorage.getItem('state')
+  const storedState = localStorage.getItem('state')
   if (storedState != null) {
     // Check if state version exists or is correct
     if (storedState.hasOwnProperty('meta') && storedState.meta.stateVersion === $scope.stateVersion) {
@@ -78,7 +78,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
 
       // Initialize new values
       if ($scope.state.schedules.length > 0 && $scope.state.schedules[0].length > 0 && !$scope.state.schedules[0][0].hasOwnProperty('initialIndex')) {
-        for (var count = 0; count < $scope.state.schedules.length; count++) {
+        for (let count = 0; count < $scope.state.schedules.length; count++) {
           $scope.state.schedules[count][0].initialIndex = count
         }
       }
@@ -105,7 +105,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
   // Default, images are supported
   $scope.imageSupport = true
 
-  var courseNumFilter = $filter('courseNum')
+  const courseNumFilter = $filter('courseNum')
 
   // Course cart tools for non-generate pages.
   $scope.courseCart = {
@@ -123,8 +123,8 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
          * Returns the total number of selected sections in the cart
          */
         selectedSections: function () {
-          var count = 0
-          for (var i = 0; i < $scope.state.courses.length; i++) {
+          let count = 0
+          for (let i = 0; i < $scope.state.courses.length; i++) {
             if ($scope.state.courses[i]) {
               count += $scope.courseCart.count.course.selectedSections($scope.state.courses[i])
             }
@@ -136,8 +136,8 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
          * Returns the total number of courses from the selectCoursesController
          */
         coursesFromSelect: function () {
-          var count = 0
-          for (var i = 0; i < $scope.state.courses.length; i++) {
+          let count = 0
+          for (let i = 0; i < $scope.state.courses.length; i++) {
             if ($scope.state.courses[i].fromSelect) {
               count++
             }
@@ -146,9 +146,9 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
         }
       },
       course: {
-        selectedSections: function (course) {
-          var count = 0
-          for (var i = 0; i < course.sections.length; i++) {
+        selectedSections: function (course: Course) {
+          let count = 0
+          for (let i = 0; i < course.sections.length; i++) {
             if (course.sections[i].selected) count++
           }
           return count
@@ -162,8 +162,8 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
          * Unselects everything in the cart
          */
         unselect: function () {
-          for (var i = 0; i < $scope.state.courses.length; i++) {
-            for (var s = 0;
+          for (let i = 0; i < $scope.state.courses.length; i++) {
+            for (let s = 0;
               s < $scope.state.courses[i].sections.length; s++) {
               $scope.state.courses[i].sections[s].selected =
                 false
@@ -180,7 +180,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
          * @param course {Object} The course the section belongs to
          * @param section {Object} The section to toggle
          */
-        toggleByCourse: function (course, section) {
+        toggleByCourse: function (course: Course, section: Section) {
           course = $scope.courseCart.ensure.course(course)
 
           if (course.selected && section.selected) {
@@ -195,7 +195,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
          *
          * @param section {Object} The section to toggle
          */
-        toggleByOrphanedSection: function (section) {
+        toggleByOrphanedSection: function (section: Section) {
           section = $scope.courseCart.ensure.section(section)
 
           section.selected = !section.selected
@@ -208,7 +208,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
          *
          * @param section {Object} The section to toggle
          */
-        toggle: function (section) {
+        toggle: function (section: Section) {
           section.selected = !section.selected
         },
 
@@ -219,7 +219,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
          * @param course {Object} The course the section belongs to
          * @param section {Object} The section to toggle
          */
-        isByCourse: function (course, section) {
+        isByCourse: function (course: Course, section: Section) {
           return $scope.courseCart.contains.course(course) &&
             section.selected
         }
@@ -228,15 +228,15 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
         /**
          * Toggles the current course's sections selcted state
          */
-        toggle: function (course) {
+        toggle: function (course: Course) {
           // If new this load or not
-          var Ecourse = $scope.courseCart.ensure.course(course)
+          const Ecourse = $scope.courseCart.ensure.course(course)
 
           course.selected = !$scope.courseCart.selection.course
             .toggleAllSections(Ecourse)
         },
 
-        is: function (course) {
+        is: function (course: Course) {
           if ($scope.courseCart.contains.course(course)) {
             return $scope.courseCart.selection.course
               .allSections($scope.courseCart.ensure.course(course))
@@ -250,8 +250,8 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
          *
          * Pre-condition: the course exists in the cart
          */
-        toggleAllSections: function (course) {
-          var setTo = !$scope.courseCart.selection.course
+        toggleAllSections: function (course: Course) {
+          const setTo = !$scope.courseCart.selection.course
             .allSections(course)
           course.sections.forEach(function (section) {
             section.selected = setTo
@@ -263,7 +263,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
         /**
          * Returns true if all sections are selected
          */
-        allSections: function (course) {
+        allSections: function (course: Course) {
           return course.sections.reduce(
             function (total, section) {
               return total && section.selected
@@ -273,7 +273,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
         /**
          * Unselects all sections
          */
-        unselect: function (course) {
+        unselect: function (course :Course) {
           course.sections.forEach(function (section) {
             section.selected = false
           })
@@ -287,8 +287,8 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
        *
        *  @param course {Object} The course to ensure
        */
-      course: function (course) {
-        var ensuredCourse = false
+      course: function (course: Course) {
+        let ensuredCourse: Course | boolean = false
 
         if ($scope.state.courses.indexOf(course) === -1) {
           // The course object was not found in the cart
@@ -297,7 +297,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
             // The course object has been added previously
 
             // Find it by matching ids
-            for (var i = 0; i < $scope.state.courses.length; i++) {
+            for (let i = 0; i < $scope.state.courses.length; i++) {
               if (course.id === $scope.state.courses[i].id) {
                 ensuredCourse = $scope.state.courses[i]
                 break
@@ -322,10 +322,10 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
         return ensuredCourse
       },
 
-      section: function (section) {
+      section: function (section: Section) {
         if ($scope.courseCart.contains.section(section)) {
-          var foundCourse = false
-          for (var i = 0; i < $scope.state.courses.length; i++) {
+          let foundCourse = false
+          for (let i = 0; i < $scope.state.courses.length; i++) {
             if (section.courseId === $scope.state.courses[i].id) {
               foundCourse = $scope.state.courses[i]
               break
@@ -348,7 +348,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
        * @param course {Object} The course to check
        * @returns {Boolean} The course is in the cart?
        */
-      course: function (course) {
+      course: function (course: Course) {
         return $scope.state.courseMap.hasOwnProperty(course.id)
       },
 
@@ -357,7 +357,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
        * @param section {Object} The course to check
        * @returns {Boolean} The course is in the cart?
        */
-      section: function (section) {
+      section: function (section: Section) {
         return $scope.state.courseMap.hasOwnProperty(section.courseId)
       }
 
@@ -368,7 +368,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
        * Remove a course completely by index
        * @param index The index to remove
        */
-      byIndex: function (index) {
+      byIndex: function (index: number) {
         $scope.state.courses.splice(index, 1)
       }
     },
@@ -377,9 +377,9 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
       /**
        * Adds a given section to the provided course if it's not there
        */
-      sectionToCourse: function (section, course) {
-        var foundSection = false
-        for (var i = 0; i < course.sections.length; i++) {
+      sectionToCourse: function (section: Section, course: Course) {
+        let foundSection = false
+        for (let i = 0; i < course.sections.length; i++) {
           if (section.id === course.sections[i].id) {
             course.sections[i] = section
             foundSection = true
@@ -398,7 +398,7 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
        * @param course An already formatted course ready for adding
        * @returns {Object} The created course
        */
-      courseToCart: function (course) {
+      courseToCart: function (course: Course) {
         $scope.state.courses.push(course)
         $scope.$broadcast('addedCourse')
 
@@ -424,8 +424,8 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
        * @param course {Object} A course from the database
        * @returns {Object} The newly created course
        */
-      fromExistingCourse: function (course) {
-        var mockCourse = $scope.courseCart.getBlankCourse(false)
+      fromExistingCourse: function (course: Course) {
+        const mockCourse = $scope.courseCart.getBlankCourse(false)
 
         course.fromSelect = false
         course.search = courseNumFilter(course)
@@ -437,11 +437,11 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
       /**
        * Creates and adds a pre-existing course from a schedule
        *
-       * @param scheduleCourse {Object} A course from the database
-       * @returns {Object} The newly created course
+       * @param scheduleCourse A course from the database
+       * @returns The newly created course
        */
-      fromExistingScheduleCourse: function (scheduleCourse) {
-        var course = $scope.courseCart.getBlankCourse(true)
+      fromExistingScheduleCourse: function (scheduleCourse: Course): Course {
+        const course = $scope.courseCart.getBlankCourse(true)
 
         course.search = scheduleCourse.courseNum
         scheduleCourse.selected = true
@@ -456,11 +456,11 @@ angular.module('sm').controller('AppController', function ($scope, localStorage,
        * Creates and adds a pre-existing section from the database to the
        * cart
        *
-       * @param existingSection {Object} A section from the database
-       * @returns {Object} The section now added to the course
+       * @param existingSection A section from the database
+       * @returns The section now added to the course
        */
-      fromExistingSection: function (section) {
-        var course = $scope.courseCart.getBlankCourse(false)
+      fromExistingSection: function (section: Section): Section {
+        const course = $scope.courseCart.getBlankCourse(false)
 
         course.id = section.courseId
         course.search = section.courseParentNum

…sm/App/directives/courseCartDirective.js …sm/App/directives/courseCartDirective.tsassets/src/modules/sm/App/directives/courseCartDirective.js renamed to assets/src/modules/sm/App/directives/courseCartDirective.ts assets/src/modules/sm/App/directives/courseCartDirective.js renamed to assets/src/modules/sm/App/directives/courseCartDirective.ts

@@ -1,16 +1,16 @@
 angular.module('sm').directive('courseDetailPopover', function ($http, $filter) {
-  var RMPUrl = $filter('RMPUrl')
-  var parseTimes = $filter('parseSectionTimes')
-  var formatTime = $filter('formatTime')
+  const RMPUrl = $filter('RMPUrl')
+  const parseTimes = $filter('parseSectionTimes')
+  const formatTime = $filter('formatTime')
 
   function getTimesHTML (times) {
     if (!times) {
       return ''
     }
-    var parsedTimes = parseTimes(times, true)
-    var HTML = '<div style="font-size: small">'
-    for (var timeIndex = 0; timeIndex < parsedTimes.length; timeIndex++) {
-      var time = parsedTimes[timeIndex]
+    const parsedTimes = parseTimes(times, true)
+    let HTML = '<div style="font-size: small">'
+    for (let timeIndex = 0; timeIndex < parsedTimes.length; timeIndex++) {
+      const time = parsedTimes[timeIndex]
       HTML += time.days + ' <span style="white-space: nowrap">' + formatTime(time.start) + '-' + formatTime(time.end) + '</span> <span style="font-style: italic; white-space: nowrap">Location: ' + time.location + '</span>'
       if (timeIndex < parsedTimes.length - 1) {
         HTML += '<br>'
@@ -28,9 +28,9 @@ angular.module('sm').directive('courseDetailPopover', function ($http, $filter)
     },
     link: function (scope, elm) {
       if (scope.sectionId !== '') {
-        var loaded = false
-        var opened = false
-        var $body = $('body')
+        let loaded = false
+        let opened = false
+        const $body = $('body')
 
         function hidePopoverOnBodyClick () {
           setTimeout(function () {

…sm/App/directives/courseDetailPopover.js …sm/App/directives/courseDetailPopover.tsassets/src/modules/sm/App/directives/courseDetailPopover.js renamed to assets/src/modules/sm/App/directives/courseDetailPopover.ts assets/src/modules/sm/App/directives/courseDetailPopover.js renamed to assets/src/modules/sm/App/directives/courseDetailPopover.ts

@@ -12,7 +12,7 @@ angular.module('sm').directive('dowSelectFields', function (uiDayFactory) {
           return scope.select.indexOf(day) !== -1
         }
         scope.toggle = function (day) {
-          var index = scope.select.indexOf(day)
+          const index = scope.select.indexOf(day)
           if (index === -1) {
             scope.select.push(day)
           } else {

…p/directives/dowSelectFieldsDirective.js …p/directives/dowSelectFieldsDirective.tsassets/src/modules/sm/App/directives/dowSelectFieldsDirective.js renamed to assets/src/modules/sm/App/directives/dowSelectFieldsDirective.ts assets/src/modules/sm/App/directives/dowSelectFieldsDirective.js renamed to assets/src/modules/sm/App/directives/dowSelectFieldsDirective.ts

@@ -1,5 +1,5 @@
 angular.module('sm').directive('loadingButton', function (uiDayFactory) {
-  var template = '<i class="fa fa-spin fa-refresh" ></i> '
+  const template = '<i class="fa fa-spin fa-refresh" ></i> '
 
   return {
     restrict: 'A',
@@ -8,7 +8,7 @@ angular.module('sm').directive('loadingButton', function (uiDayFactory) {
       text: '@loadingText'
     },
     link: function (scope, elm) {
-      var prevHTML = elm.html()
+      const prevHTML = elm.html()
       scope.$watch('status', function (newLoading, prevLoading) {
         if (newLoading !== prevLoading) {
           if (newLoading === 'L') {

…App/directives/loadingButtonDirective.js …App/directives/loadingButtonDirective.tsassets/src/modules/sm/App/directives/loadingButtonDirective.js renamed to assets/src/modules/sm/App/directives/loadingButtonDirective.ts assets/src/modules/sm/App/directives/loadingButtonDirective.js renamed to assets/src/modules/sm/App/directives/loadingButtonDirective.ts

@@ -2,9 +2,9 @@ angular.module('sm').directive('navCloseOnMobile', function () {
   return {
     restrict: 'A',
     link: function (scope, elm) {
-      var nav = $(elm)
+      const nav = $(elm)
       $(elm).find('li').click(function () {
-        $('.navbar-collapse.in').collapse('hide')
+        ($('.navbar-collapse.in') as any).collapse('hide')
       })
     }
   }

…/directives/navCloseOnMobileDirective.js …/directives/navCloseOnMobileDirective.tsassets/src/modules/sm/App/directives/navCloseOnMobileDirective.js renamed to assets/src/modules/sm/App/directives/navCloseOnMobileDirective.ts assets/src/modules/sm/App/directives/navCloseOnMobileDirective.js renamed to assets/src/modules/sm/App/directives/navCloseOnMobileDirective.ts

@@ -12,7 +12,7 @@ angular.module('sm').directive('paginationControls', function () {
     link: {
       pre: function (scope) {
         scope.numberOfPages = function () {
-          var numPages = Math.ceil(scope.totalLength / scope.displayOptions.pageSize)
+          const numPages = Math.ceil(scope.totalLength / scope.displayOptions.pageSize)
           if (scope.displayOptions.currentPage === numPages) {
             scope.displayOptions.currentPage = numPages - 1
           }