VSCode не распознает тип компонента $ refs, когда скрипт Vue импортируется как отдельный файл с компонентом vue-class-component - PullRequest
Новая
       26

VSCode не распознает тип компонента $ refs, когда скрипт Vue импортируется как отдельный файл с компонентом vue-class-component

1 голос
/ 15 марта 2019

Когда файл "* .vue" разделен на разные файлы, то есть: <script lang="ts" src="./x/script.ts"> VSCode выдает ошибку; однако скрипт serve этого не делает. Нет проблем с компиляцией. Ошибка касается свойства $refs. VSCode не распознает свойства зарегистрированного компонента: Property 'sideBarVisibilityChange' does not exist on type 'Vue'..

При объявлении $refs внутри тега скрипта в качестве компонента SFC, например: 

$refs!: {
    sideBarComponent: SideBar;
};

Затем доступ к компоненту SideBar внутри метода: 

this.$refs.sideBarComponent.sideBarVisibilityChange(newState);

Все работает нормально, пока код является SFC. Он «ломается», когда скрипт импортируется. Ошибка возникает только в VSCode, то есть, когда я запускаю npm run serve (vue-cli-service serve), я не получаю ошибок! Однако я получаю это в окне VSCode Problems: Property 'sideBarVisibilityChange' does not exist on type 'Vue'. ts (2339).

Моя настройка : VSCode, Vue + TypeScript, vue-class-component, vue-property-decorator.

Компонент импортирован. Он объявлен как ref внутри шаблона. Вот еще немного кода, если вы хотите взглянуть: https://gist.github.com/JakubKoralewski/9d11bbb9535a96356466b37745630f8f

Или целый репо, чтобы поиграть с этим, над которым я сейчас работаю: https://github.com/JakubKoralewski/dziennik_php_frontend/tree/class-components

Есть некоторые ошибки, над которыми я сейчас работаю. Они не относятся к этой проблеме.

Что очень странно, так это то, что когда я пытаюсь перейти по ссылке из файла Vue на скрипт, щелкнув путь, я получаю эту странную ошибку: 

Unable to open 'script.ts': File not found (file:///f:/f:/<path>/src/views/Authorized.vue/Authorized/script.ts).

Не получается заставить VSCode открыть путь к файлу, даже если я делаю эту глупую вещь, то есть импортирую скрипт, подобный этому <script lang="ts" src="../Authorized/script.ts"></script>, который логически абсурден, но отображает правильный путь, когда происходит ошибка. Точно, это все еще случается. Это означает, что ошибка является частью f:/f:/. Я думал, что это была причудливость VSCode, и путь к файлу на самом деле был бы правильным, но когда я пытаюсь создать файл, подобный VSCode, я получаю еще одну ошибку: 

Error: ENOENT: no such file or directory, mkdir 'f:\f:'

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

Вот ошибка, которую VSCode выдает в консоли разработчика: 

Error: Tree element not found: {
    "resource": "/f:/<path>/src/views/Authorized/script.ts",
    "owner": "typescript",
    "code": "2339",
    "severity": 8,
    "message": "Property 'sideBarVisibilityChange' does not exist on type 'Vue'.",
    "source": "ts",
    "startLineNumber": 142,
    "startColumn": 31,
    "endLineNumber": 142,
    "endColumn": 54
}
    at s.getElementLocation (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:89:591)
    at s.expandTo (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:89:187)
    at $.reveal (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:925:744)
    at W.revealMarkersForCurrentActiveEditor (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:4487:161)
    at W.autoReveal (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:4486:961)
    at W.onActiveEditorChanged (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:4484:350)
    at W._register.e (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:4483:360)
    at d.fire (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:73:436)
    at setTimeout (file:///F:/PROGRAMY/VS Code/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:69:969)
...