Блог

Главная - Вопросы по программированию - Codemirror в подсказках Angular для SQL работает, но выдает ошибку ввода в Typescript

Codemirror в подсказках Angular для SQL работает, но выдает ошибку ввода в Typescript

#sql #angular #typescript #typescript-typings #codemirror

#sql #angular #typescript #typescript-typings #codemirror

Вопрос:

Прикрепление Stackblitz: https://stackblitz.com/edit/angular-ivy-vxm6gg?file=src/app/app.component.ts

Я пытаюсь реализовать CodeMirror в Angular 10 для подсказок SQL, как здесь: https://codemirror.net/mode/sql /. Функциональность корректно работает на веб-странице, и я также вижу правильные параметры в журнале консоли. Но я также вижу эту ошибку not assignable to type 'ShowHintOptions' , потому что я неправильно устанавливаю hintOptions параметр. Я не нашел никаких альтернативных примеров, и мои попытки следовать правильному набору текста не увенчались успехом. Пожалуйста, помогите.

Установка npm install codemirror @types/codemirror

Код

 // imports
import * as codemirror from 'codemirror';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';

// Element Ref for this HTML <textarea #ref></textarea>
@ViewChild('ref', { static: true }) ref: ElementRef; 
editor: CodeMirror.EditorFromTextArea;

ngOnInit(): void {
  this.editor = codemirror.fromTextArea(this.ref.nativeElement, {
    mode: 'text/x-mysql',
    showHint: true,
    extraKeys: { 'Ctrl-Space': 'autocomplete' },
    hintOptions: {
      tables: {
        'users': ['name', 'score', 'birthDate'],
        'countries': ['name', 'population', 'size']
      }
    }
  });
  console.log(this.editor.getOption('hintOptions'));
}

Ошибка

  error TS2322: Type '{ tables: { users: string[]; countries: string[]; }; }' is not assignable to type 'ShowHintOptions'.
      Object literal may only specify known properties, and 'tables' does not exist in type 'ShowHintOptions'.
    
    42           tables: {
                 ~~~~~~~~~
    43             'users': ['name', 'score', 'birthDate'],
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    44             'countries': ['name', 'population', 'size']
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    45           }
       ~~~~~~~~~~~
    
      node_modules/@types/codemirror/addon/hint/show-hint.d.ts:81:9
        81         hintOptions?: ShowHintOptions;
                   ~~~~~~~~~~~
        The expected type comes from property 'hintOptions' which is declared here on type 'EditorConfiguration'

Комментарии:

1. определение в библиотеке показывает, какие поля могут быть passed.github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types /… . либо вы передаете что-то неизвестное библиотеке, либо ее типизация неверна

2. @Andrey Я прочитал это, но застрял в попытке выполнить правильную реализацию без ошибок.

Ответ №1:

Есть обходной путь для устранения ошибки.

Добавьте переменную любого типа для хранения значений.

 const options: any = {
  tables: {
    users: ["name", "score", "birthDate"],
    countries: ["name", "population", "size"]
  }
};

Приведите переменную как ShowHintOptions

hintOptions: options as codemirror.ShowHintOptions,

Новый код

 ngOnInit(): void {
 const options: any = {
  tables: {
    users: ["name", "score", "birthDate"],
    countries: ["name", "population", "size"]
  }
};
this.editor = codemirror.fromTextArea(this.ref.nativeElement, {
  mode: "text/x-mysql",
  hintOptions: options as codemirror.ShowHintOptions,
  extraKeys: { "Ctrl-Space": "autocomplete" }
});
console.log(this.editor.getOption('hintOptions'));
}