Migrating to stricter TypeScript

[abiyasa]

Problems

Currently, we are compiling UI Core React without strict mode

ebayui-core-react/tsconfig.json

Line 17 in abd3bb3

"strict": false,

This means we will not get compilation error on many things when building ui-core-react. However, this might cause problems when the project that consumes ui-core-react use strict mode.

Solution

We need to enable strict mode on our TypeScript. However, this would cause 250+ compilation errors (v5.6.2) if we just set strict: true on tsconfig.

Therefore we need to incrementally enable strict mode and fix them gradually.

Options for Incremental Migration to TypeScript Strict Mode

Generally, one need to:

1. (optional) maybe upgrade to TypeScript 4.6 or even 5? Currently, we're stil using v3.9 which is from 2020.
2. Enable strict mode strict: true on tsconfig, which actually enabling at least 5 strict mode family options
3. Add all strict mode family options and disable them all.
4. Enable one of the strict mode family rule/option.
5. Fix all errors related to the enabled rule.
6. Create PR, merged, and release
7. Repeat step 4.

See details on this article: https://www.bitovi.com/blog/how-to-incrementally-migrate-an-angular-project-to-typescript-strict-mode

Other techniques:

• Use yarn betterer, see https://alanharper.com.au/posts/2021-02-15-migrating-typescript-strict
• Use separated tsconfig with one stricter mode enabled and gradually fix the code: https://code.visualstudio.com/blogs/2019/05/23/strict-null#_coming-up-with-an-incremental-plan

Plan by Tim:

Step 1

• strictBindCallApply
• useUnknownInCatchVariables
• noImplicitThis
• alwaysStrict

Step 2

• strictFunctionTypes 21 errors

Step 3

• strictNullChecks 150+ errors
• strictPropertyInitialization requires strictNullChecks

Step 4

• noImplicitAny 300+ errors

[darkwebdev]

Development blocked by the weird bug where icon is rendered two times, but not in dev environment. hard to reproduce and debug...