Fixes typescript errors and adds a new test for typescript compilation (

oppia#7373)

* Fix errors

* Remove extra conversion

* Fix lint

* Disable frontend test

* Enable test

* Add default imports

* Enable webpack to halt in case of errors

* Add async for only prod mode

* Fix import issues

* Fix subsequent var dec issue

* Add semicolon

* Fix test

* Test that webpack fails on compilation errors

* Webpack fails, revert test commit

* Remove new errors

* Add typescript checks

* Fix indent

* Remove fork-ts from prod config

* Remove fork-ts from dev config

* Remove extra config

* Fix config

* Remove comment

* Remove extra return type

* Fix circleci

* Check ts fails correctly

* Fix circleci

* Try fixing circleci

* Revert changes

* Update config

* Remove node path

* Add node path

* Revert test changes

* Update unit tests

* Fix backend test

* Revert wrong commit

* Fix backend test

* Update compiled folder to avoid conflicts in test

* Update outDir

* Add new folder to gitignore

* Add new folder to clean.sh

* Remove folder after compilation

* Make coverage 100%

* Fix spelling

* Fix imports

* Fix typescript issues

* Disable tests

* Enable test

* Fix imports

* Disable test

* Enable tests

.circleci/config.yml

@@ -61,6 +61,19 @@ jobs:
             python scripts/third_party_size_check.py
             python scripts/pre_commit_linter.py --path=. --verbose
 
+  typescript_tests:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - run: date +%F > date
+      - restore_cache:
+          <<: *restore_cache
+      - run:
+          name: Run typescript tests
+          command: |
+            bash scripts/install_third_party.sh
+            python scripts/typescript_checks.py
+
   frontend_tests:
     <<: *job_defaults
     steps:
@@ -110,6 +123,9 @@ workflows:
       - lint_tests:
           requires:
             - setup
+      - typescript_tests:
+          requires:
+            - setup
       - frontend_tests:
           requires:
             - setup

.github/CODEOWNERS

@@ -14,6 +14,7 @@
 # Angular Migration team
 /typings/ @ankita240796
 /tsconfig.json @ankita240796
+/tsconfig-for-compile-check.json @ankita240796
 
 
 # Answer classification team.

.gitignore

@@ -10,6 +10,7 @@ third_party/*
 assets/hashes.js
 backend_prod_files/*
 local_compiled_js/*
+local_compiled_js_for_test/*
 core/templates/prod/*
 core/templates/dev/head/dist/*
 core/tests/.browserstack.env

core/templates/dev/head/App.ts

@@ -65,8 +65,8 @@ require('domain/utilities/UrlInterpolationService.ts');
 
 require('app.constants.ajs.ts');
 
-// The following file uses constants in app.constants.ts and hence needs to be
-// loaded after app.constants.ts
+// The following file uses constants in app.constants and hence needs to be
+// loaded after app.constants
 require('I18nFooter.ts');
 
 angular.module('oppia').config([

core/templates/dev/head/AppInit.ts

@@ -58,8 +58,6 @@ const bootstrapFn = (extraProviders: StaticProvider[]) => {
 };
 const downgradedModule = downgradeModule(bootstrapFn);
 
-declare var angular: any;
-
 angular.module('oppia', [
   'dndLists', 'headroom', 'infinite-scroll', 'ngAnimate',
   'ngAudio', 'ngCookies', 'ngImgCrop', 'ngJoyRide', 'ngMaterial',

core/templates/dev/head/AppSpec.ts

@@ -19,14 +19,14 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // App.ts is upgraded to Angular 8.
 import { ParamChangeObjectFactory } from
-  'domain/exploration/ParamChangeObjectFactory.ts';
-import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory.ts';
+  'domain/exploration/ParamChangeObjectFactory';
+import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory';
 import { VoiceoverObjectFactory } from
-  'domain/exploration/VoiceoverObjectFactory.ts';
+  'domain/exploration/VoiceoverObjectFactory';
 import { WrittenTranslationObjectFactory } from
-  'domain/exploration/WrittenTranslationObjectFactory.ts';
+  'domain/exploration/WrittenTranslationObjectFactory';
 import { WrittenTranslationsObjectFactory } from
-  'domain/exploration/WrittenTranslationsObjectFactory.ts';
+  'domain/exploration/WrittenTranslationsObjectFactory';
 // ^^^ This block is to be removed.
 
 describe('Constants Generating', function() {

core/templates/dev/head/app.constants.ajs.ts

@@ -18,7 +18,7 @@
 
 // TODO(#7092): Delete this file once migration is complete and these AngularJS
 // equivalents of the Angular constants are no longer needed.
-import { AppConstants } from 'app.constants.ts';
+import { AppConstants } from 'app.constants';
 
 for (var constantName in constants) {
   angular.module('oppia').constant(constantName, constants[constantName]);

core/templates/dev/head/app.constants.ts

@@ -32,6 +32,9 @@ export class AppConstants {
     I18N_SIGNUP_LOADING: 'Loading'
   };
 
+  public static ACTIVITY_STATUS_PRIVATE = 'private';
+  public static ACTIVITY_STATUS_PUBLIC = 'public';
+
   public static RULE_SUMMARY_WRAP_CHARACTER_COUNT = 30;
 
   public static FEEDBACK_SUBJECT_MAX_CHAR_LIMIT =

core/templates/dev/head/components/forms/custom-forms-directives/audio-file-uploader.directive.ts

@@ -68,7 +68,7 @@ angular.module('oppia').directive('audioFileUploader', [
           'audio-file-uploader-form' + IdGenerationService.generateNewId());
         angular.element(document).on(
           'change', '.' + scope.inputFieldClassName, function(evt) {
-            var file = evt.currentTarget.files[0];
+            var file = (<HTMLInputElement>evt.currentTarget).files[0];
             if (!file) {
               scope.onFileCleared();
               return;

core/templates/dev/head/components/forms/custom-forms-directives/image-uploader.directive.ts

@@ -103,8 +103,9 @@ angular.module('oppia').directive('imageUploader', [
           'image-uploader-file-input' + IdGenerationService.generateNewId());
         angular.element(document).on(
           'change', '.' + scope.fileInputClassName, function(evt) {
-            var file = evt.currentTarget.files[0];
-            var filename = evt.target.value.split(/(\\|\/)/g).pop();
+            var file = (<HTMLInputElement>evt.currentTarget).files[0];
+            var filename = (<HTMLInputElement>evt.target).value.split(
+              /(\\|\/)/g).pop();
             scope.errorMessage = validateUploadedFile(file, filename);
             if (!scope.errorMessage) {
               // Only fire this event if validations pass.

core/templates/dev/head/components/graph-services/graph-layout.service.ts

@@ -16,12 +16,12 @@
  * @fileoverview Directives for reusable data visualization components.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { downgradeInjectable } from '@angular/upgrade/static';
 import { Injectable } from '@angular/core';
 
-import { AppConstants } from 'app.constants.ts';
+import { AppConstants } from 'app.constants';
 
 export interface IGraphBoundaries {
   bottom: number;

core/templates/dev/head/components/question-directives/question-player/question-player.constants.ajs.ts

@@ -19,7 +19,7 @@
 // TODO(#7092): Delete this file once migration is complete and these AngularJS
 // equivalents of the Angular constants are no longer needed.
 import { QuestionPlayerConstants } from
-  'components/question-directives/question-player/question-player.constants.ts';
+  'components/question-directives/question-player/question-player.constants';
 
 angular.module('oppia').constant(
   'HASH_PARAM', QuestionPlayerConstants.HASH_PARAM);

core/templates/dev/head/components/question-directives/question-player/question-player.directive.ts

@@ -420,8 +420,8 @@ angular.module('oppia').directive('questionPlayer', [
                       WRONG_ANSWER_PENALTY_FOR_MASTERY;
                   }
                 } else {
-                  for (var skillId in masteryChangePerQuestion) {
-                    masteryChangePerQuestion[skillId] -=
+                  for (var masterySkillId in masteryChangePerQuestion) {
+                    masteryChangePerQuestion[masterySkillId] -=
                       WRONG_ANSWER_PENALTY_FOR_MASTERY;
                   }
                 }

core/templates/dev/head/components/question-directives/question-player/services/question-player-state.service.spec.ts

@@ -19,25 +19,25 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // question-player-state.service.ts is upgraded to Angular 8.
 import { AnswerGroupObjectFactory } from
-  'domain/exploration/AnswerGroupObjectFactory.ts';
-import { FractionObjectFactory } from 'domain/objects/FractionObjectFactory.ts';
-import { HintObjectFactory } from 'domain/exploration/HintObjectFactory.ts';
+  'domain/exploration/AnswerGroupObjectFactory';
+import { FractionObjectFactory } from 'domain/objects/FractionObjectFactory';
+import { HintObjectFactory } from 'domain/exploration/HintObjectFactory';
 import { OutcomeObjectFactory } from
-  'domain/exploration/OutcomeObjectFactory.ts';
+  'domain/exploration/OutcomeObjectFactory';
 import { ParamChangeObjectFactory } from
-  'domain/exploration/ParamChangeObjectFactory.ts';
+  'domain/exploration/ParamChangeObjectFactory';
 import { RecordedVoiceoversObjectFactory } from
-  'domain/exploration/RecordedVoiceoversObjectFactory.ts';
-import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory.ts';
+  'domain/exploration/RecordedVoiceoversObjectFactory';
+import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory';
 import { SubtitledHtmlObjectFactory } from
-  'domain/exploration/SubtitledHtmlObjectFactory.ts';
-import { UnitsObjectFactory } from 'domain/objects/UnitsObjectFactory.ts';
+  'domain/exploration/SubtitledHtmlObjectFactory';
+import { UnitsObjectFactory } from 'domain/objects/UnitsObjectFactory';
 import { VoiceoverObjectFactory } from
-  'domain/exploration/VoiceoverObjectFactory.ts';
+  'domain/exploration/VoiceoverObjectFactory';
 import { WrittenTranslationObjectFactory } from
-  'domain/exploration/WrittenTranslationObjectFactory.ts';
+  'domain/exploration/WrittenTranslationObjectFactory';
 import { WrittenTranslationsObjectFactory } from
-  'domain/exploration/WrittenTranslationsObjectFactory.ts';
+  'domain/exploration/WrittenTranslationsObjectFactory';
 // ^^^ This block is to be removed.
 
 require(

core/templates/dev/head/components/question-directives/questions-list/questions-list.constants.ajs.ts

@@ -17,7 +17,7 @@
  */
 
 import { QuestionsListConstants } from
-  'components/question-directives/questions-list/questions-list.constants.ts';
+  'components/question-directives/questions-list/questions-list.constants';
 
 angular.module('oppia').constant(
   'DEFAULT_SKILL_DIFFICULTY', QuestionsListConstants.DEFAULT_SKILL_DIFFICULTY);

core/templates/dev/head/components/ratings/rating-computation/rating-computation.service.spec.ts

@@ -17,7 +17,7 @@
  */
 
 import { RatingComputationService } from
-  'components/ratings/rating-computation/rating-computation.service.ts';
+  'components/ratings/rating-computation/rating-computation.service';
 
 describe('Rating computation service', () => {
   let ratingComputationService: RatingComputationService;

core/templates/dev/head/components/score-ring/score-ring.directive.ts

@@ -31,16 +31,19 @@ angular.module('oppia').directive('scoreRing', [
       controller: ['$scope', '$timeout', '$window', 'COLORS_FOR_PASS_FAIL_MODE',
         function($scope, $timeout, $window, COLORS_FOR_PASS_FAIL_MODE) {
           var ctrl = this;
+
+          const circle = <SVGCircleElement>(
+            document.querySelector('.score-ring-circle'));
+          const radius = circle.r.baseVal.value;
+          const circumference = (radius * 2 * Math.PI);
+
           var setScore = function(percent) {
             const offset = circumference - percent / 100 * circumference;
-            circle.style.strokeDashoffset = offset;
+            circle.style.strokeDashoffset = offset.toString();
           };
 
-          const circle = document.querySelector('.score-ring-circle');
-          const radius = circle.r.baseVal.value;
-          const circumference = radius * 2 * Math.PI;
           circle.style.strokeDasharray = `${circumference} ${circumference}`;
-          circle.style.strokeDashoffset = circumference;
+          circle.style.strokeDashoffset = circumference.toString();
           $scope.$watch(function() {
             return ctrl.getScore();
           }, function(newScore) {

core/templates/dev/head/components/skills-mastery-list/skills-mastery-list.constants.ajs.ts

@@ -17,7 +17,7 @@
  */
 
 import {SkillMasteryListConstants} from
-  'components/skills-mastery-list/skills-mastery-list.constants.ts';
+  'components/skills-mastery-list/skills-mastery-list.constants';
 
 angular.module('oppia').constant(
   'MASTERY_CUTOFF',

core/templates/dev/head/components/state-editor/state-editor-properties-services/state-editor.service.spec.ts

@@ -18,7 +18,7 @@
 
 /* eslint-disable max-len */
 import { SolutionValidityService } from
-  'pages/exploration-editor-page/editor-tab/services/solution-validity.service.ts';
+  'pages/exploration-editor-page/editor-tab/services/solution-validity.service';
 /* eslint-enable max-len */
 
 require(

core/templates/dev/head/components/state-editor/state-editor-properties-services/state-property.service.spec.ts

@@ -20,7 +20,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // state-property.service.ts is upgraded to Angular 8.
 import { ExplorationDraftObjectFactory } from
-  'domain/exploration/ExplorationDraftObjectFactory.ts';
+  'domain/exploration/ExplorationDraftObjectFactory';
 // ^^^ This block is to be removed.
 
 require('pages/exploration-editor-page/services/change-list.service.ts');

core/templates/dev/head/components/state-editor/state-editor.constants.ajs.ts

@@ -19,7 +19,7 @@
 // TODO(#7092): Delete this file once migration is complete and these AngularJS
 // equivalents of the Angular constants are no longer needed.
 import { StateEditorConstants } from
-  'components/state-editor/state-editor.constants.ts';
+  'components/state-editor/state-editor.constants';
 
 angular.module('oppia').constant(
   'INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_QUESTION',

core/templates/dev/head/components/state-editor/state-interaction-editor/state-interaction-editor.directive.spec.ts

@@ -19,7 +19,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // state-interaction-editor.directive.ts is upgraded to Angular 8.
 import { ExplorationFeaturesService } from
-  'services/ExplorationFeaturesService.ts';
+  'services/ExplorationFeaturesService';
 // ^^^ This block is to be removed.
 
 require(

core/templates/dev/head/components/summary-tile/collection-summary-tile.constants.ajs.ts

@@ -19,7 +19,7 @@
 // TODO(#7092): Delete this file once migration is complete and these AngularJS
 // equivalents of the Angular constants are no longer needed.
 import { CollectionSummaryTileConstants } from
-  'components/summary-tile/collection-summary-tile.constants.ts';
+  'components/summary-tile/collection-summary-tile.constants';
 
 angular.module('oppia').constant(
   'COLLECTION_VIEWER_URL',

core/templates/dev/head/domain/classifier/AnswerClassificationResultObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { AnswerClassificationResultObjectFactory } from
-  'domain/classifier/AnswerClassificationResultObjectFactory.ts';
+  'domain/classifier/AnswerClassificationResultObjectFactory';
 
 require('domain/exploration/OutcomeObjectFactory.ts');
 require(

core/templates/dev/head/domain/classifier/ClassifierObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { ClassifierObjectFactory } from
-  'domain/classifier/ClassifierObjectFactory.ts';
+  'domain/classifier/ClassifierObjectFactory';
 
 describe('Classifier Object Factory', () => {
   let classifierObjectFactory: ClassifierObjectFactory;

core/templates/dev/head/domain/collection/CollectionNodeObjectFactory.ts

@@ -17,12 +17,12 @@
  * collection node domain objects.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { downgradeInjectable } from '@angular/upgrade/static';
 import { Injectable } from '@angular/core';
 
-import { AppConstants } from 'app.constants.ts';
+import { AppConstants } from 'app.constants';
 
 export class CollectionNode {
   _explorationId: string;

core/templates/dev/head/domain/collection/CollectionNodeObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { CollectionNodeObjectFactory } from
-  'domain/collection/CollectionNodeObjectFactory.ts';
+  'domain/collection/CollectionNodeObjectFactory';
 
 describe('Collection node object factory', () => {
   var collectionNodeObjectFactory: CollectionNodeObjectFactory = null;

core/templates/dev/head/domain/collection/CollectionObjectFactorySpec.ts

@@ -19,7 +19,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // CollectionObjectFactory.ts is upgraded to Angular 8.
 import { CollectionNodeObjectFactory } from
-  'domain/collection/CollectionNodeObjectFactory.ts';
+  'domain/collection/CollectionNodeObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/collection/CollectionObjectFactory.ts');

core/templates/dev/head/domain/collection/CollectionPlaythroughObjectFactory.ts

@@ -17,7 +17,7 @@
  * collection playthrough domain objects.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { downgradeInjectable } from '@angular/upgrade/static';
 import { Injectable } from '@angular/core';

core/templates/dev/head/domain/collection/CollectionRightsObjectFactory.ts

@@ -17,7 +17,7 @@
  * collection rights domain objects.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { downgradeInjectable } from '@angular/upgrade/static';
 import { Injectable } from '@angular/core';

core/templates/dev/head/domain/collection/CollectionRightsObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { CollectionRightsObjectFactory } from
-  'domain/collection/CollectionRightsObjectFactory.ts';
+  'domain/collection/CollectionRightsObjectFactory';
 
 describe('Collection rights object factory', () => {
   let collectionRightsObjectFactory: CollectionRightsObjectFactory = null;

core/templates/dev/head/domain/collection/CollectionUpdateServiceSpec.ts

@@ -19,9 +19,9 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // CollectionUpdateService.ts is upgraded to Angular 8.
 import { ChangeObjectFactory } from
-  'domain/editor/undo_redo/ChangeObjectFactory.ts';
+  'domain/editor/undo_redo/ChangeObjectFactory';
 import { CollectionNodeObjectFactory } from
-  'domain/collection/CollectionNodeObjectFactory.ts';
+  'domain/collection/CollectionNodeObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/collection/CollectionObjectFactory.ts');

core/templates/dev/head/domain/collection/CollectionValidationServiceSpec.ts

@@ -19,9 +19,9 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // CollectionValidationService.ts is upgraded to Angular 8.
 import { ChangeObjectFactory } from
-  'domain/editor/undo_redo/ChangeObjectFactory.ts';
+  'domain/editor/undo_redo/ChangeObjectFactory';
 import { CollectionNodeObjectFactory } from
-  'domain/collection/CollectionNodeObjectFactory.ts';
+  'domain/collection/CollectionNodeObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/collection/CollectionObjectFactory.ts');