此typescript代码中如何避免变成never类型(never不能进行使用属性了)?

作者站长头像
站长
· 阅读数 17
import React from 'react';
import logo from './logo.svg';
import './App.css';

import MonacoEditor from 'react-monaco-editor';
import { useRef, useState,useEffect }  from 'react';

function App() {

  const editorRef = useRef(null);
  const monacoRef = useRef(null);
  const decorationsRef = useRef([]);

  const handleEditorDidMount = (editor: any, monaco: any) => {
    editorRef.current = editor;
    monacoRef.current = monaco;

    // Add an event listener for cursor position changes
    editor.onDidChangeCursorSelection(() => {
      const selection = editor.getSelection();
      // if (selection.isEmpty()) {
      //   // Remove decorations if selection is empty
      //   editor.deltaDecorations(decorationsRef.current, []);
      //   return;
      // }
      
      const lineNumber = selection.positionLineNumber;
      const lineContent = editor.getModel().getLineContent(lineNumber);

      if (lineContent !== "") {
        // Add decoration if the line starts with 'var'
        const newDecorations = editor.deltaDecorations(decorationsRef.current, [
          {
            range: new monaco.Range(lineNumber, 1, lineNumber, 1),
            options: {
              isWholeLine: true,
              afterContentClassName: 'myAfterContentDecoration'
            }
          }
        ]);
        decorationsRef.current = newDecorations;
      } else {
        // Remove decorations if the line does not start with 'var'
        editor.deltaDecorations(decorationsRef.current, []);
      }
    });
  };
  useEffect(() => {
    // Define custom styles for the decorations
    const style = document.createElement('style');
    style.innerHTML = `
      .myAfterContentDecoration::after {
        content: ' // 备注';
        color: green;
        font-weight: bold;
      }
    `;
    document.head.appendChild(style);
  }, []);

  const clickButton = () => {
    if(monacoRef.current) {  // null
      console.log(monacoRef.current)  // never
    }
    
  }


  return (
    <div style={{'margin':'100px auto', 'width': '800px'}}>
    <MonacoEditor
        value={"112233"}
        editorDidMount={handleEditorDidMount}
      />

      <button onClick={clickButton}>点击</button>
    </div>
  );
}

export default App;

在代码:clickButton 里面, if(monacoRef.current) 这里是null,但是在console.log(monacoRef.current)里面是never此typescript代码中如何避免变成never类型(never不能进行使用属性了)?

此typescript代码中如何避免变成never类型(never不能进行使用属性了)?

因为是never, 就不能点进行使用属性了。请问这个问题应该如何处理呢?

回复
1个回答
avatar
test
2024-08-11

const monacoRef = useRef<XXX>(null); 在 XXX 的位置补上泛型。

import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
const monacoRef = useRef<typeof monaco | null>(null);

https://github.com/react-monaco-editor/react-monaco-editor/blob/master/src/editor.tsx#L25

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容