Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

[Feature] Improve type safety by reducing 'any' type usage in CDP message handlers

已关闭
#2,948 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@ConnorQi01 已经在做这个了。

开始于 2026年10月13日。

  • #3000 来自 @ConnorQi01 —— 未关闭

评估

难度
5/5
预计耗时
一周以上
新手友好度
35/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
活跃
技术栈
typescript

调研方向

先阅读 src/cdp-proxy/CDPMessageHandlers/ 下的 handlers 和 ICDPMessageHandler 接口,然后检查是否已有可用的 CDP 协议类型。逐步为列出的消息形状定义类型,在需要时添加 guards,并更新 handlers,以替换已识别的 any 用法,同时保留其已处理的消息和行为。

由索引模型根据 Issue 内容生成。

描述

enhancement follow-up

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

  1. No compile-time type checking: Can't catch CDP message structure errors at build time
  2. Poor IntelliSense: No autocomplete for CDP message properties
  3. Runtime errors: Easy to access non-existent properties without warning
  4. Maintainability: Harder to understand expected message structure
  5. 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

  1. Start with commonly used CDP message types
  2. Add type definitions incrementally (one handler at a time)
  3. Use union types for messages with variants
  4. Leverage TypeScript's discriminated unions for type narrowing
  5. 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

  1. Use @types/chrome-devtools-protocol: Leverage existing type definitions
  2. Generate types from protocol JSON: Use CDP protocol specification
  3. Gradual typing: Start with loose types, refine incrementally
  4. Unknown over any: Use unknown instead of any for better safety

References

主要语言
TypeScript
星标
2.7k
派生
298
平均合并
1 天 1 小时
30 天内合并 PR
25

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

microsoft/vscode-react-native 的其他 Issue

查看 microsoft/vscode-react-native 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。