Make typescript checks strict

As per discussion in #10327 we have decided to enable strict rule in our tsconfig.json. We can’t do this at once because of a huge number of errors. So, we’ve decided to do it gradually file by file. For reference on what does strict rule do you can look for --strict here.

• You can once go through this guide for getting started with types.

• This guide covers most of the cases encountered in our codebase which throws strict typing errors, along with their solution.

To be assigned to a file or for any queries feel free to comment on the thread.

Steps to fix this issue

• Find the path of the service. For example, for AdminRouterService it is core/templates/pages/admin-page/services/admin-router.service.ts.
• Add the path of that service in the files property of tsconfig-strict.json.
• Add the path of the service spec file in the files property of tsconfig-strict.json.
• Run python -m scripts.typescript_checks --strict_checks
• Fix the errors shown. Note that there may be no errors and you may have to refactor the code a bit to fix the errors (if present).

PRs for reference

#10485, #10724

If you want to be assigned to some file please ping @vojtechjelinek

Services to be covered by strict checks

Claimed Files

• core/templates/services/playthrough.service.ts @Aayush987
• core/templates/components/button-directives/hint-and-solution-buttons.component.ts @sudojarvis
• core/templates/components/angular-html-bind/angular-html-bind-wrapper.directive.ts @AbhayTrivedi
• core/templates/components/forms/custom-forms-directives/thumbnail-uploader.component.ts @da-r-k
• core/templates/domain/collection/*.ts @YashKandalkar
• core/templates/components/oppia-angular-root.component.ts @bhaktideshmukh
• core/templates/pages/exploration-player-page/services/image-preloader.service.ts @Zainab-Fahim
• core/templates/pages/exploration-player-page/services/question-player-engine.service.ts @camperjett
• core/templates/domain/topic/subtopic-page.model.ts @abumsoo
• core/templates/pages/topic-viewer-page/practice-tab/practice-tab.component.ts @camperjett
• core/templates/domain/exploration/read-only-exploration-backend-api.service.ts @Sreelayavuyyuru
• core/templates/pages/profile-page/profile-page.component.ts @khareyash05
• core/templates/pages/topics-and-skills-dashboard-page/modals/create-new-skill-modal.component.ts @divyanshkhetan
• core/templates/pages/exploration-player-page/services/answer-classification.service.ts @Yash-g17
• core/templates/pages/exploration-player-page/services/answer-classification.service.ts @Vaishnavi06Desai
• core/templates/components/skill-selector/select-skill-modal.component.ts @Kimbohlovette
• core/templates/components/rubrics-editor/rubrics-editor.component.ts @anika-001
• core/templates/pages/exploration-player-page/modals/display-hint-modal.component.ts @beingnoble03
• core/templates/components/summary-tile/subtopic-summary-tile.component.ts @amanbansal1311
• core/templates/domain/subtopic_viewer/*.ts @ashish-patwal
• core/templates/domain/exploration/*.ts @ShivamJhaa
• core/templates/components/skill-selector/skill-selector.component.ts @Kimbohlovette
• core/templates/components/skill-selector/skill-selector.component.ts @kzhang01
• core/templates/pages/exploration-player-page/layout-directives/audio-bar.component.ts @zhixuanevelynwu
• core/templates/pages/story-editor-page/services/story-editor-state.service.ts @HaveACookie
• core/templates/pages/skill-editor-page/services/skill-editor-state.service.ts @kzhang01
• core/templates/pages/exploration-player-page/services/extract-image-filenames-from-model.service.ts @akhilr97
• core/templates/pages/exploration-player-page/services/stats-reporting.service.ts @bjohnnyd
• core/templates/components/shared-component.module.ts @Shawntendo

Unclaimed Files

• core/templates/domain/question/*.ts
• core/templates/domain/skill/*.ts
• core/templates/domain/statistics/*.ts
• core/templates/domain/topic/*.ts
• core/templates/components/ck-editor-helpers/ck-editor-4-rte.component.ts
• core/templates/components/skill-selector/merge-skill-modal.component.ts
• extensions/interactions/base-validator.spec.ts (need to be migrated first)
• core/templates/components/ck-editor-helpers/ck-editor-4-widgets.initializer.ts
• core/templates/components/forms/schema-based-editors/schema-based-editor.directive.ts
• core/templates/components/state-editor/state-skill-editor/state-skill-editor.component.ts
• core/templates/pages/exploration-player-page/services/exploration-engine.service.ts
• core/templates/pages/exploration-player-page/services/exploration-player-state.service.ts

Services covered by the strict checks

• core/templates/pages/topics-and-skills-dashboard-page/skills-list/skills-list.component.ts @ashish-patwal

• core/templates/components/skill-selector/merge-skill-modal.component.ts @HaveACookie

• core/templates/domain/topic/TopicObjectFactory.ts @camperjett

• core/templates/base-components/base.module.ts @Manan-Rathi

• core/templates/domain/question/QuestionObjectFactory.ts

• core/templates/domain/topic/editable-topic-backend-api.service.ts @IamEzio

• core/templates/pages/exploration-player-page/learner-experience/input-response-pair.component.ts

• core/templates/components/graph-services/graph-layout.service.ts @ayushjaink8

• extensions/interactions/MusicNotesInput/directives/music-phrase-player.service.ts @paprajapati9

• core/templates/pages/contributor-dashboard-page/services/translate-text.service.ts @paprajapati9

• core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.ts @nithinrdy

• core/templates/pages/profile-page/profile-page-backend-api.service.ts @kalkas98

• core/templates/pages/exploration-player-page/modals/display-solution-modal.component.ts @ShivamJhaa

• core/templates/domain/story/StoryObjectFactory.ts @sahiljoster32

• core/templates/domain/skill/skill-backend-api.service.ts @JeeveshGarg

• core/templates/domain/topic/subtopic.model.ts @JoelLau

• core/templates/domain/exploration/exploration-permissions-backend-api.service.ts @juanapatankar

• extensions/interactions/CodeRepl/directives/oppia-response-code-repl.component.ts @PranshuSrivastava

• core/templates/services/internet-connectivity.service.ts @Lawful2002

• core/templates/components/filter-fields/filtered-choices-field/filtered-choices-field.component.ts @siddharthmehta02

• core/templates/pages/exploration-player-page/layout-directives/exploration-footer.component.ts @ShivamJhaa

• AnswerGroupObjectFactory

• GraphUtilsService @stephen-hannon

• ExplorationFeaturesService @rodemore

• MathEquationInputRulesService @rodemore

• core/templates/services/autogenerated-audio-player.service.ts @sahiljoster32

• MisconceptionObjectFactory @rodemore

• NumericInputRulesService @Nisarg-Chaudhari

• SetInputRulesService @EeshaArif

• SchemaFormSubmittedService @EeshaArif

• StateEditorRefreshService @EeshaArif

• StateNameService @EeshaArif

• StoryNodeModel @EeshaArif

• GuestCollectionProgressObjectFactory @eightballocto

• NeedsGuidingResponsesTaskObjectFactory

• CollectionPlaythroughObjectFactory @Nisarg-Chaudhari

• CollectionRightsObjectFactory @Nisarg-Chaudhari

• CollectionSummaryObjectFactory @Nisarg-Chaudhari

• AdminRouterService

• AngularNameService @nishantwrp

• LearnerParamsService @ehwu

• AdminTaskManagerService @nishantwrp

• AnswerClassificationResultObjectFactory @Nik-09

• AugmentedSkillSummaryObjectFactory @tushar2407

• AlgebraicExpressionInputRulesService @nishantwrp

• AppService @anandwana001

• AudioLanguageObjectFactory @tushar2407

• BackgroundMaskService @Purhan

• BrowserCheckerService @Purhan

• AssignedSkillObjectFactory @arpit1912

• AudioBarStatusService @arpit1912

• AudioFileObjectFactory @arpit1912

• CamelCaseToHyphensPipe @arpit1912

• ClientContextObjectFactory @Nik-09

• ComputationDataObjectFactory @tushar2407

• CountVectorizerService @dsandeep0138

• CsrfTokenService @shrutigrover

• DateTimeFormatService @shrutigrover

• ExpressionParserService @anandwana001

• FeaturedTranslationLanguageObjectFactory @anandwana001

• DebouncerService @rodemore

• DragAndDropSortInputRulesService @aishwary023

• EditabilityService @aishwary023

• EmailDashboardQueryObjectFactory @aishwary023

• EntityContextObjectFactory @Nik-09

• FractionObjectFactory @Rijuta-s

• I18nLanguageCodeService @iramin

• AutoplayedVideosService @adi2011

• LoaderService @arora-ria

• LoggerService @arora-ria

• CodeNormalizerService @krishita30j

• IdGenerationService @krishita30j

• ConstructTranslationIdsService @krishita30j

• AutogeneratedAudioLanguageObjectFactory @Rijuta-s

• ExternalSaveService @Rijuta-s

• FileDownloadRequestObjectFactory @Rijuta-s

• CreatorExplorationSummaryObjectFactory @mridul-netizen

• CreatorDashboardStatsObjectFactory @mridul-netizen

• ClassifierObjectFactory @jassi-singh

• LogicProofRulesService @parulpriyedarshani

• AnswerStatsObjectFactory @YashJipkate

• AudioTranslationManagerService @YashJipkate

• ContinueRulesService @YashJipkate

• EndExplorationRulesService @YashJipkate

• ExplorationOpportunitySummaryObjectFactory @YashJipkate

• ImageClickInputRulesService @YashJipkate

• InteractiveMapRulesService @akshathkaushal

• ParamChangeObjectFactory @michaelw54

• InteractionDetailsCacheService @akshathkaushal

• GraphDetailService @jassi-singh

• NormalizeWhitespacePunctuationAndCasePipe

• ItemSelectionInputRulesService

• MultipleChoiceInputRulesService

• core/templates/domain/exploration/InteractionObjectFactory.ts @YashKandalkar

• core/templates/domain/exploration/SolutionObjectFactory.ts @YashKandalkar

• core/templates/domain/exploration/WrittenTranslationObjectFactory.ts @YashKandalkar

• core/templates/domain/exploration/exploration-draft.model.ts @YashKandalkar

• core/templates/domain/objects/NumberWithUnitsObjectFactory.ts @YashKandalkar

• core/templates/services/extension-tag-assembler.service.ts @YashKandalkar

• core/templates/domain/feedback_thread/feedback-thread-summary.model.ts

• core/templates/domain/platform_feature/feature-status-summary.model.ts

• core/templates/domain/exploration/exploration-metadata.model.ts

• core/templates/domain/improvements/high-bounce-rate-task.model.ts

NOTE: The above list is not the complete list of services that should be covered. These are some of the services present in topological level 0 in UpgradedServices.

Tips

You may not be able to see the strict typescript errors in your IDE. To see them you can change

"noImplicitUseStrict": true,

to

"strict": true,

in tsconfig.json

Also, if you are seeing typescript errors in files other than the files mentioned in files property of tsconfig-strict.json on running python -m scripts.typescript_checks --strict_checks. That is because that file may be imported by one of files in tsconfig-strict.json. If the dependency is complex and has other dependencies itself, you can leave that file for now and work on any other service . Please mention that here if you are doing so. We can cover that file after we cover it’s dependencies.

Note: For a guide on how to access Oppia’s webpages, see this.

Issue is no longer available

The major part of this issue is now going to cover during Google Summer of Code 2022 under the Improve the frontend type system project.

Earlier we need to add the path of the file in the files property of tsconfig-strict.json, which is now no longer supported after merge of PR, Enable typescript strict mode for all the newly added files and number of errors along with errors log.

This is necessary step taken to apply typescript strictness rule to all newly added files, because we don’t want to always add files in tsconfig-strict.json forever. It also helps us to collect remaining files, which is further remove one-by-one.

Improve the frontend type system project also aim to strict typescript of 560 files, but currently we only have 423 files those are in Angular, which we can strict typescript. Rest 137 Angular files we are expected to get after migration of Angular Js files comes under Google Summer of Code 2022 Angular Js migration project, which is running parallel with Improve the frontend type system project.

Hence due to lack of files for Improve the frontend type system project, we are going to mark this issue no longer available. You can expect this issue available back around mid October 2022.

[Aayush987]

Oh do it like this private exploration: Exploration | null = null;.

Oh yes! That’s smart! Thank You that worked well!

yeah that problem was also in my file.

[JeeveshGarg]

The major part of this issue is now going to cover during Google Summer of Code 2022 under the Improve the frontend type system project.

Earlier we need to add the path of the file in the files property of tsconfig-strict.json, which is now no longer supported after merge of PR, Enable typescript strict mode for all the newly added files and number of errors along with errors log.

This is necessary step taken to apply typescript strictness rule to all newly added files, because we don’t want to always add files in tsconfig-strict.json forever. It also helps us to collect remaining files, which is further remove one-by-one.

Improve the frontend type system project also aim to strict typescript of 560 files, but currently we only have 423 files those are in Angular, which we can strict typescript. Rest 137 Angular files we are expected to get after migration of Angular Js files comes under Google Summer of Code 2022 Angular Js migration project, which is running parallel with Improve the frontend type system project.

Hence due to lack of files for Improve the frontend type system project, we are going to mark this issue no longer available. You can expect this issue available back around mid October 2022.

Thanks and very sorry for inconvenience.