refactor(components): enhance component accessor type safety with generics

[9romise]

Re: #

Changelog

• Convert component accessor methods to use generic types for precise type inference
• Improve developer experience with auto-completion and type checking

Before:

const clz = node.getComponent('clz') as CLZ | null

After:

const clz = node.getComponent<CLZ>('clz')

---

Continuous Integration

This pull request:

• needs automatic test cases check.

  Manual trigger with @cocos-robot run test cases afterward.

• does not change any runtime related code or build configuration

  If any reviewer thinks the CI checks are needed, please uncheck this option, then close and reopen the issue.

---

Compatibility Check

This pull request:

• changes public API, and have ensured backward compatibility with deprecated features.
• affects platform compatibility, e.g. system version, browser version, platform sdk version, platform toolchain, language version, hardware compatibility etc.
• affects file structure of the build package or build configuration which requires user project upgrade.
• introduces breaking changes, please list all changes, affected features and the scope of violation.

[dumganhar]

@cocos-robot run test cases

[github-actions]

@9romise, Please check the result of run test cases:

• Test Platform: PR-Test
• Editor Version: v3.8.6
• Task Result: FAIL
• Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/43e8dbf1-970f-4a7e-b368-9e0c8242459e/-1
• GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/13197881175

Task Details

Platform	build	boot	runned	crashScene	FailScene
web-mobile	PASS	PASS	FAIL
ios	PASS	PASS	FAIL		reflection-probe
mac	PASS	PASS	FAIL		reflection-probe

[github-actions]

@9romise, Please check the result of run test cases:

• Test Platform: PR-Test
• Editor Version: v3.8.6
• Task Result: PASS
• Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/3adb49d6-2aa4-46bc-8b39-028ce26b1c22/-1
• GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/13197881175

Task Details

[minggo]

@cocos-robot run test cases

[github-actions]

@9romise, Please check the result of run test cases:

• Test Platform: PR-Test
• Editor Version: v3.8.6
• Task Result: FAIL
• Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/d4ca0932-274c-4874-baa1-c8da7cfa3a03/-1
• GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/13299237983

Task Details

Platform	build	boot	runned	crashScene	FailScene
web-mobile	PASS	PASS	FAIL		SkewTest
ios	PASS	PASS	FAIL		reflection-probe
mac	PASS	PASS	FAIL		reflection-probe

[github-actions]

@9romise, Please check the result of run test cases:

• Test Platform: PR-Test
• Editor Version: v3.8.6
• Task Result: FAIL
• Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/457a3dca-b1be-406d-9587-9792a1f54f5d/-1
• GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/13299237983

Task Details

Platform	build	boot	runned	crashScene	FailScene
windows	PASS	PASS	PASS
android	PASS	PASS	PASS
wechatgame	PASS	PASS	FAIL		SkewTest

[dumganhar]

Hi, @9romise , @minggo

This code will break the compatibilty in engine, for example, In spine/skeleton.ts.

debugDraw = debugDrawNode.addComponent('cc.Graphics') as Graphics;

ESLint report: This assertion is unnecessary since it does not change the type of the expression.

If I save the file, eslint configuration will automatically remove as Graphics, so the code will be

debugDraw = debugDrawNode.addComponent('cc.Graphics');

But it causes another TS compiler error:

Type 'Component' is missing the following properties from type 'Graphics': lineWidth, lineJoin, lineCap, strokeColor, and 101 more.

Yes, we could modify the code to

debugDraw = debugDrawNode.addComponent<Graphics>('cc.Graphics');

to resolve the issue in engine. But if our users also write the same kinds of code, they will complain about the bad compatibilty.

And I think the two kinds of addComponent declaration doesn't have much differences.

debugDraw = debugDrawNode.addComponent('cc.Graphics'); // Old way and new way both return `Component | null` type
debugDraw = debugDrawNode.addComponent<Graphics>('cc.Graphics'); // New way in this PR, Return Graphics type
debugDraw = debugDrawNode.addComponent('cc.Graphics') as Graphics; // Old way, Return Graphics type

I suggest to revert this PR for better compatibility. What do you think?

[minggo]

@dumganhar can we keep both of the two usage?

[dumganhar]

@minggo It seems we could add the new overrode addComponent for the compatibilty, let me investigate more.

[dumganhar]

Sent a PR for this:

#18345

@minggo, @9romise , please review it.