Monaco Editor无法提示TypeScript字面量类型问题求助

问题分析 #

通过addExtraLib添加带字面量类型的函数声明后，Monaco Editor无法触发字面量选项提示，但VS Code可正常工作，核心原因是Monaco的TypeScript服务默认配置未完全适配类型声明的识别逻辑，或缺少必要标识让服务正确解析类型定义。

解决方案 #

• 给额外库指定类型声明文件名
  调用addExtraLib时传入第二个参数（模拟.d.ts文件路径），让Monaco明确这是类型声明文件，而非普通脚本：

  monaco.languages.typescript.typescriptDefaults.addExtraLib(
    'declare class MyApi {static hello1(a: "test" | "test2"): string;}',
    'file:///my-api.d.ts' // 指定类型声明文件路径
  )
  

• 配置TypeScript编译器选项
  启用严格类型检查相关配置，确保Monaco的TypeScript服务能完整解析字面量类型：

  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    strict: true,
    moduleResolution: 'node',
    target: 'ES2020',
    allowSyntheticDefaultImports: true
  });
  

• 强制刷新类型服务（可选）
  如果添加库后提示仍不生效，可触发模型重新验证：

  editor.getModel()?.validate();
  

修改后的完整代码示例 #

const JavaScriptEditor: React.FC<JavaScriptEditorProps> = ({ value, onValueChange }) => {
  const handleEditorValueChange = (
    value: string | undefined,
    _ev: editor.IModelContentChangedEvent
  ) => {
    onValueChange?.(value ?? '')
  }
  const handleEditorDidMount = (editor: IStandaloneCodeEditor, monaco: Monaco) => {
    // 配置TypeScript编译器选项
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
      strict: true,
      moduleResolution: 'node',
      target: 'ES2020',
      allowSyntheticDefaultImports: true
    });
    
    // 添加带标识的额外类型库
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      'declare class MyApi {static hello1(a: "test" | "test2"): string;}',
      'file:///my-api.d.ts'
    );

    // 可选：强制刷新模型验证
    editor.getModel()?.validate();
  }

  return (
    <div className={s.javascriptEditorContainer}>
      <div className={s.javascriptEditor}>
        <Editor
          language={'typescript'}
          value={value}
          onChange={handleEditorValueChange}
          className={s.javascriptEditorInput}
          loading={<></>}
          onMount={handleEditorDidMount}
          options={defaultMonacoEditorOptions}
        />
      </div>
      <div className={s.javascriptContextPrompts}>
        <div className={s.javascriptContextTree}></div>
        <div className={s.javascriptContextDescription}></div>
      </div>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Summer