Как можно активировать провайдер элементов автозаполнения Monaco Editor при доступе к свойству строкового литерала?

Вопрос или проблема

var libSource = `
type State = {
    'address-audited_val': string;
    address: string;
};
const s: State = {
    'address-audited_val': '...',
    address: '...'
};
`
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, "ts:filename/test.ts");
monaco.editor.createModel(libSource, "typescript", monaco.Uri.parse("ts:filename/test.ts"));
monaco.editor.create(document.getElementById("container"), {
    value: '',
    language: "javascript",
});

Ответ или решение

Как вызвать поставщик элементов завершения для строковых литералов в Monaco Editor

Monaco Editor — это мощный редактор кода, созданный командой Microsoft, который используется во многих современных веб-приложениях. В то время как он предлагает широкий набор функций, иногда пользователи сталкиваются с тем, что некоторые особенности не работают так, как ожидалось. Одним из таких моментов является обработка строковых литералов в контексте автозавершения.

Проблема

В вашем случае, когда вы вводите s. в Monaco Editor, вы ожидаете увидеть автозавершение с предложением не только для address, но и для строкового литерала address-audited_val, входящего в тип State. Однако поведение редактора показывает только одно завершение.

Ожидаемое поведение

По аналогии с Visual Studio Code, вы ожидаете, что редактор также предложит все свойства, включая строковые литералы. Это важно для улучшения пользовательского опыта, особенно когда работа ведется с объектами сложной структуры, как в вашем случае.

Решение

Для того чтобы Monaco Editor мог правильно распознавать и предлагать строковые литералы в качестве элементов завершения, необходимо убедиться в том, что типичная система типизации TypeScript корректно интегрирована с редактором. Давайте шаг за шагом рассмотрим, как это можно сделать.

1. Обновите модель типов: Убедитесь, что вы правильно определяете типы и добавляете их как "дополнительные библиотеки". Вы уже делаете это, добавляя libSource в редактор, но важно проверить формат и структуру кода.

2. Используйте правильную настройку конфигурации: Возможно, вам понадобится специфицировать расширенные настройки автозавершения. Для этого возьмите на заметку свойство propose у ваших объектов, если такие существуют.

3. Создайте и настройте поставщик завершений. В Monaco Editor можно создать пользовательский поставщик завершений. Вам нужно будет определить собственный объект, который будет осуществлять логику предоставления данных. Вот пример того, как можно это сделать для вашей ситуации:

monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems: () => {
        return {
            suggestions: [
                {
                    label: 'address-audited_val',
                    kind: monaco.languages.CompletionItemKind.Property,
                    insertText: "'address-audited_val'",
                    documentation: "The audited value of the address"
                },
                {
                    label: 'address',
                    kind: monaco.languages.CompletionItemKind.Property,
                    insertText: 'address',
                    documentation: "The address"
                }
            ]
        };
    }
});

Этот фрагмент кода добавляет необходимые элементы завершения, включая строковый литерал address-audited_val.

4. Обновите логику TypeScript: Если вы хотите, чтобы строковые литералы обрабатывались автоматически, возможно, нужно будет рассмотреть альтернативные подходы, такие как динамическое определение свойств внутренних объектов.

Заключение

Решение вашей проблемы требует интеграции правильных настроек и, возможно, создания пользовательского поставщика завершений. Применив приведенные выше шаги, вы сможете расширить функциональность вашего Monaco Editor, обеспечив корректное предложение строковых литералов наряду с обычными свойствами объектов. Это значительно улучшит производительность ваших разрабатываемых приложений и сделает процесс написания кода более удобным.

Если у вас остались вопросы или требуется дальнейшая помощь, не стесняйтесь обращаться за поддержкой!