yandex-maps-unofficial / vue-yandex-maps

Yandex Maps 3.0 components library for VueJS.
https://yandex-maps-unofficial.github.io/vue-yandex-maps/
MIT License
74 stars 9 forks source link

Проблемы с типизацией #156

Closed mikefriday91 closed 9 months ago

mikefriday91 commented 9 months ago

Версия библиотеки

2.0.0-rc.10

Как воспроизвести

Все выполнено согласно документации.

Опишите проблему

Добрый день! Не могу выполнить коммит, т.к. ругается TS компилятор. Во всем остальном работает без проблем. Обновил версии vue (3.3.13), vue-tsc (1.8.19) до последних, но также не помогло. > vue-tsc --noEmit -p ./tsconfig.json node_modules/vue/jsx.d.ts(7,22): error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'. Named property 'key' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical. node_modules/vue/jsx.d.ts(7,22): error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'. Named property 'props' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical. node_modules/vue/jsx.d.ts(7,22): error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'. Named property 'type' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical. node_modules/vue/jsx.d.ts(14,22): error TS2430: Interface 'IntrinsicElements' incorrectly extends interface 'NativeElements'. Types of property 'a' are incompatible. Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes & ReservedProps'. Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes'. Types of property 'style' are incompatible. Type 'CSSProperties | undefined' is not assignable to type 'StyleValue'. Type 'CSSProperties' is not assignable to type 'StyleValue'. Type 'Properties<number | (string & {}), string & {}>' is missing the following properties from type 'StyleValue[]': length, pop, push, concat, and 27 more. node_modules/vue/jsx.d.ts(14,22): error TS2590: Expression produces a union type that is too complex to represent. node_modules/vue/jsx.d.ts(19,22): error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'ReservedProps' and 'Attributes'. Named property 'key' of types 'ReservedProps' and 'Attributes' are not identical. husky - pre-commit hook exited with code 2 (error)

Дополнительная информация

Читал другие issue, но vue-runtime не установлен. Видел похожую ошибку в библиотеке для Storybook, там по итогу отказались от react компонентов, но понимаю, что это относится уже к ymaps3-types

Ответы на вопросы

daniluk4000 commented 9 months ago

Добрый день! Пересоберите, пожалуйста, локфайл, в #148 помогло

А вы используете JSX, кстати?

И покажите ваш tsconfig.json, если обновление локфайла не помогло

daniluk4000 commented 9 months ago

И да, vue-runtime устанавливается автоматически вместе с ymaps3-types, как и реакт-типы

mikefriday91 commented 9 months ago

@daniluk4000 спасибо за быстрый ответ!

Забыл указать, что node_modules и лок файл удалял. JSX также не использую

tsconfig.app.json

{
  "$schema": "https://json.schemastore.org/tsconfig.json",
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "src",
    "./public/**/*",
    "./shared/locales/en/*.json",
    "./shared/locales/ru/*.json"
  ],
  "exclude": [
    "./dist"
  ],
  "compilerOptions": {
    "composite": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "isolatedModules": false,
    "module": "ES2022",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "ES2022",
      "DOM",
      "DOM.Iterable"
    ],
    "types": [
      "vuetify",
      "vite/client",
      "node",
      "dompurify",
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@yandex/ymaps3-types"
    ]
  }
}
daniluk4000 commented 9 months ago

Заметил уже после того, как написал всё, что ниже.

А поменяйте vue-tsc --noEmit -p ./tsconfig.json на vue-tsc --noEmit -p ./tsconfig.app.json

Такую команду ставит в тч сам Vue по дефолту

image


Интересно, что у вас стоит skipLibCheck, но выводится ошибка из node_modules/vue/jsx.d.ts...

isolatedModules попробуйте поставить в true еще. Но чует мое сердце, проблема не в этом. Еще не могу понять, как это работает у остальных на vue3.

Судя по ченчлогу Vue 3.4 (https://gist.github.com/yyx990803/061593abfbaf1f2e3ddeee9094a6e6bf), были какие-то проблемы с JSX. Можете еще попробовать обновиться на vue 3.4-rc.1 из интереса. В идеале вам бы найти решение этой проблемы без обновления на 3.4.

mikefriday91 commented 9 months ago

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

error TS2688: Cannot find type definition file for 'vuetify'.
  The file is in the program because:
    Entry point of type library 'vuetify' specified in compilerOptions
error TS5101: Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.

Данная ошибка решилась заменой импортов vuetify из types: на прямое указание путей

    "typeRoots": [
      "./node_modules/vuetify",
      "./node_modules/vuetify/types",
      "./node_modules/@types",
      "./node_modules/@yandex/ymaps3-types"
    ]

Но еще есть следующая:

  Use 'verbatimModuleSyntax' instead.
error TS5101: Option 'preserveValueImports' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.    
  Use 'verbatimModuleSyntax' instead.

Пробовал указать verbatimModuleSyntax, но безрезультатно.

daniluk4000 commented 9 months ago

А в какой момент вообще начались проблемы? После указания typeRoots или сразу после установки библиотеки?

Попробуйте вообще typeRoots убрать, узнаем, что будет.

И гляньте этот @vue/tsconfig/tsconfig.web.json, может там этот старый синтаксис и его тоже нужно обновить.

daniluk4000 commented 9 months ago

Вышел Vue 3.4 с исправлениями типизации JSX. Попробуйте обновиться на него.

Так или иначе, думаю, это проблема не этой библиотеки - максимум Яндекса. Эту ишью закрываю, если найдете что-то интересное - пишите.

daniluk4000 commented 9 months ago

@mikefriday91 в новой версии @yandex/ymaps3-types Яндекс убрали типы реакта. Можете обновляться, если проблема сохранялась