使用 TypeScript 编写函数根据文件扩展名，生成 Monaco 编辑器对应语言，并支持基本语言

下面是一个示例代码：

import * as monaco from 'monaco-editor';

type Language = 'typescript' | 'javascript' | 'html' | 'css';

function getLanguage(extension: string): Language {
  switch (extension) {
    case '.ts':
      return 'typescript';
    case '.js':
      return 'javascript';
    case '.html':
      return 'html';
    case '.css':
      return 'css';
    default:
      return 'typescript';
  }
}

function registerBasicLanguages() {
  monaco.languages.typescript.typescriptDefaults.addExtraLib(
    `
    declare const console: {
      log(message?: any, ...optionalParams: any[]): void;
    };
    `,
    'console.d.ts'
  );

  monaco.languages.typescript.typescriptDefaults.addExtraLib(
    `
    declare const setTimeout: (
      handler: (...args: any[]) => void,
      timeout?: number,
      ...args: any[]
    ) => number;
    `,
    'setTimeout.d.ts'
  );
}

function getLanguageConfiguration(language: Language): monaco.languages.LanguageConfiguration {
  switch (language) {
    case 'typescript':
    case 'javascript':
      return {
        comments: {
          lineComment: '//',
          blockComment: ['/*', '*/'],
        },
        brackets: [['{', '}'], ['[', ']'], ['(', ')']],
        autoClosingPairs: [
          { open: '{', close: '}' },
          { open: '[', close: ']' },
          { open: '(', close: ')' },
          { open: '"', close: '"', notIn: ['string'] },
          { open: "'", close: "'", notIn: ['string', 'comment'] },
        ],
        surroundingPairs: [
          { open: '{', close: '}' },
          { open: '[', close: ']' },
          { open: '(', close: ')' },
          { open: '"', close: '"' },
          { open: "'", close: "'", },
        ],
      };
    case 'html':
      return {
        comments: {
          blockComment: ['<!--', '-->'],
        },
        brackets: [['<', '>']],
        autoClosingPairs: [{ open: '<', close: '>' }, { open: '"', close: '"' }, { open: "'", close: "'" }],
        surroundingPairs: [{ open: '<', close: '>' }, { open: '"', close: '"' }, { open: "'", close: "'" }],
      };
    case 'css':
      return {
        comments: {
          blockComment: ['/*', '*/'],
        },
        brackets: [['{', '}']],
        autoClosingPairs: [{ open: '{', close: '}' }, { open: '"', close: '"' }, { open: "'", close: "'" }],
        surroundingPairs: [{ open: '{', close: '}' }, { open: '"', close: '"' }, { open: "'", close: "'" }],
      };
    default:
      return {};
  }
}

function registerLanguage(language: Language) {
  const configuration = getLanguageConfiguration(language);
  monaco.languages.register({ id: language });
  monaco.languages.setLanguageConfiguration(language, configuration);
}

function setupEditor() {
  monaco.editor.defineTheme('my-theme', {
    base: 'vs-dark',
    inherit: true,
    rules: [{ token: 'comment', foreground: 'ffa500' }],
    colors: {},
  });

  const extension = '.ts';
  const language = getLanguage(extension);
  registerLanguage(language);

  const code = `console.log('Hello, world!');`;

  const editor = monaco.editor.create(document.getElementById('container'), {
    value: code,
    language,
    theme: 'my-theme',
  });
}

registerBasicLanguages();
setupEditor();

这个函数根据文件扩展名获取对应的语言，并支持 TypeScript、JavaScript、HTML 和 CSS 四种基本语言。它还提供了一个 registerBasicLanguages 函数，用于注册一些基本类型的声明文件，以方便在编辑器中使用。最后，它使用 Monaco 编辑器创建一个编辑器实例，并将其渲染到页面上的一个容器元素中。