[Feature] Improve type safety by reducing 'any' type usage in CDP message handlers
维护者通常 1 天内回复
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- typescript
调研方向
先阅读 src/cdp-proxy/CDPMessageHandlers/ 下的 handlers 和 ICDPMessageHandler 接口,然后检查是否已有可用的 CDP 协议类型。逐步为列出的消息形状定义类型,在需要时添加 guards,并更新 handlers,以替换已识别的 any 用法,同时保留其已处理的消息和行为。
由索引模型根据 Issue 内容生成。
描述
Summary
The CDP (Chrome DevTools Protocol) message handler files use any type extensively, reducing type safety and making the code harder to maintain and debug.
Current Situation
High usage of any type in CDP handlers:
src/cdp-proxy/CDPMessageHandlers/hermesCDPMessageHandler.ts:
- processDebuggerCDPMessage(event: any)
- processApplicationCDPMessage(event: any)
- handleCallFunctionOnEvent(event: any): any
- handleFunctionTypeResult(event: any): any
- handlePausedEvent(event: any): any
- handleBreakpointSetting(event: any): any
src/cdp-proxy/CDPMessageHandlers/iOSDirectCDPMessageHandler.ts:
- processDebuggerCDPMessage(event: any)
- processApplicationCDPMessage(event: any)
- processDeprecatedConsoleMessage(event: any)
- params: any = {}
src/cdp-proxy/CDPMessageHandlers/rnCDPMessageHandler.ts:
- processDebuggerCDPMessage(event: any)
- processApplicationCDPMessage(event: any)
- handleAppBundleFirstPauseEvent(event: IProtocolCommand): any
- params: any = event.params
Interface definition:
interface ICDPMessageHandler {
processDebuggerCDPMessage: (event: any) => ProcessedCDPMessage;
processApplicationCDPMessage: (event: any) => ProcessedCDPMessage;
}
Problems with Current Approach
- No compile-time type checking: Can't catch CDP message structure errors at build time
- Poor IntelliSense: No autocomplete for CDP message properties
- Runtime errors: Easy to access non-existent properties without warning
- Maintainability: Harder to understand expected message structure
- Refactoring risk: Changes can break code without TypeScript catching it
Proposed Changes
Phase 1: Define CDP Message Types
Create type definitions for CDP protocol messages:
// cdp-proxy/types/CDPMessages.ts
interface CDPEvent {
method: string;
params?: Record<string, unknown>;
}
interface CDPCallFunctionOnEvent extends CDPEvent {
method: 'Runtime.callFunctionOn';
params: {
functionDeclaration: string;
objectId?: string;
arguments?: any[];
returnByValue?: boolean;
};
}
interface CDPPausedEvent extends CDPEvent {
method: 'Debugger.paused';
params: {
callFrames: CallFrame[];
reason: string;
data?: Record<string, unknown>;
};
}
interface CallFrame {
callFrameId: string;
functionName: string;
location: Location;
scopeChain: Scope[];
}
// ... more type definitions
Phase 2: Update Handler Interfaces
Replace any with proper types:
interface ICDPMessageHandler {
processDebuggerCDPMessage: (event: CDPEvent) => ProcessedCDPMessage;
processApplicationCDPMessage: (event: CDPEvent) => ProcessedCDPMessage;
}
Phase 3: Add Type Guards
Implement type guards for runtime type checking:
function isCDPCallFunctionOnEvent(event: CDPEvent): event is CDPCallFunctionOnEvent {
return event.method === 'Runtime.callFunctionOn';
}
function isCDPPausedEvent(event: CDPEvent): event is CDPPausedEvent {
return event.method === 'Debugger.paused';
}
Phase 4: Update Handler Implementations
Use type guards in handlers:
public processDebuggerCDPMessage(event: CDPEvent): ProcessedCDPMessage {
if (isCDPCallFunctionOnEvent(event)) {
return this.handleCallFunctionOnEvent(event);
}
if (isCDPPausedEvent(event)) {
return this.handlePausedEvent(event);
}
// ...
}
private handleCallFunctionOnEvent(event: CDPCallFunctionOnEvent): ProcessedCDPMessage {
// event.params is now properly typed
const { functionDeclaration, objectId } = event.params;
// ...
}
Benefits
- Type safety: Catch CDP message structure errors at compile time
- Better IntelliSense: Autocomplete for CDP message properties
- Self-documenting: Types serve as documentation for CDP protocol usage
- Refactoring safety: TypeScript catches breaking changes
- Debugging: Easier to identify message structure issues
- Maintenance: Clearer code intent and expected structures
Implementation Strategy
- Start with commonly used CDP message types
- Add type definitions incrementally (one handler at a time)
- Use union types for messages with variants
- Leverage TypeScript's discriminated unions for type narrowing
- Consider using existing CDP protocol type definitions if available
Potential Challenges
- CDP protocol has many message types
- Some messages have dynamic/flexible structures
- Need to balance type safety with flexibility
- Requires understanding CDP protocol specification
Alternative Approaches
- Use
@types/chrome-devtools-protocol: Leverage existing type definitions - Generate types from protocol JSON: Use CDP protocol specification
- Gradual typing: Start with loose types, refine incrementally
- Unknown over any: Use
unknowninstead ofanyfor better safety
References
- CDP Message Handlers:
src/cdp-proxy/CDPMessageHandlers/ - Chrome DevTools Protocol: https://chromedevtools.github.io/devtools-protocol/
- Potential types package:
@types/chrome-devtools-protocol - TypeScript discriminated unions: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions
- 主要语言
- TypeScript
- 星标
- 2.7k
- 派生
- 298
- 平均合并
- 1 天 1 小时
- 30 天内合并 PR
- 25
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
microsoft/vscode-react-native 的其他 Issue
-
enhancement
难度 2/5 1-3 小时 新手友好度 78/100
microsoft/vscode-react-native#3008 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
microsoft/vscode-react-native#3006 ·
维护者通常 1 天内回复
-
[Feature] Avoid duplicate error notifications可能已有人在做 @erenbati 于 10 天前认领。 未关闭enhancement
难度 2/5 1-3 小时 新手友好度 75/100
microsoft/vscode-react-native#2963 ·
维护者通常 1 天内回复
-
[Feature] Stop Expo Go installation when Quick Pick is canceled可能已有人在做 @erenbati 于 25 天前认领。 未关闭enhancement
难度 2/5 1-3 小时 新手友好度 88/100
microsoft/vscode-react-native#2959 ·
维护者通常 1 天内回复
-
enhancement follow-up
难度 2/5 1-3 小时 新手友好度 88/100
microsoft/vscode-react-native#2951 ·
维护者通常 1 天内回复
查看 microsoft/vscode-react-native 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 84/100
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 67/100
mobile-next/mobile-mcp#526 ·
维护者通常 1 天内回复
-
e2e-failure ready-to-code
难度 1/5 1 小时以内 新手友好度 73/100
redhat-developer/rhdh-plugin-export-overlays#4470 · 1 条评论 ·
维护者通常 1 天内回复