[Code Health][Community Project] Enable TypeScript strict check

[huchenlei]

Background

Our community project is seeking contributors to help improve our codebase. When we initially migrated to TypeScript, we set the strict option to false to minimize immediate changes. However, we've since discovered that strict type checking is crucial for preventing many bugs, as evidenced by recent pull requests (e.g., #1221, #1199).

To facilitate a gradual transition to strict mode, we've implemented the ts-strict-ignore plugin in PR #1235. This allows us to enable strict type checking one file at a time.

How to Contribute

Step 1: Select a File with // @ts-strict-ignore Header

You can find all files requiring attention using this GitHub code search query.

Alternatively, run npx tsc --strict to see all TypeScript strict mode errors. Consider starting with files that have fewer errors. Example output:

Found 1680 errors in 79 files.
Errors  Files
     4  src/components/common/__tests__/EditableText.spec.ts:16
     1  src/components/common/__tests__/TreeExplorerTreeNode.spec.ts:60
     2  src/components/sidebar/tabs/queue/__tests__/ResultGallery.ts:57
    29  src/extensions/core/clipspace.ts:10
    31  src/extensions/core/colorPalette.ts:86
    ...

Step 2: Remove // @ts-strict-ignore and Run Type Check

1. Remove the // @ts-strict-ignore comment from your chosen file.
2. Run npm run typecheck to identify strict mode errors.

Example output:

D:\ComfyUI_frontend [ts_strict ↓1 ↑3 +0 ~1 -0 !]> npm run typecheck
> [email protected] typecheck
> tsc --noEmit && tsc-strict
🎯 Found 57 strict files
src/stores/dialogStore.ts(43,9): error TS2322: Type 'string | undefined' is not assignable to type 'string'.
💥 Found 1 error

Step 3: Fix Errors and Submit a Pull Request

Address the identified type errors in your chosen file. Once resolved, submit a pull request with your changes.

For reference, see this example PR: #1236

We appreciate your contribution to improving our project's type safety!