将 Typescript 添加到 Vue + Rails 应用程序 - 导入不再起作用?

Posted

技术标签:

【中文标题】将 Typescript 添加到 Vue + Rails 应用程序 - 导入不再起作用?【英文标题】:Adding Typescript to Vue + Rails app - Imports no longer work? 【发布时间】:2019-01-09 02:27:17 【问题描述】:

我正在尝试将 TypeScript 添加到现有的 VueJS + Rails 应用程序中。我克隆了这个演示(https://github.com/gbarillot/rails-vue-demo-app),然后按照https://github.com/rails/webpacker的说明进行操作

$ bundle exec rails webpacker:install:vue$ bundle exec rails webpacker:install:typescript

然后我按照here 的描述修改了config/webpack/loaders/typescript.js

一切似乎都可以编译了,但是当我进入“主页”视图并将script 更改为打字稿时:

<script lang="ts">
import Layout from '../shared/layout';

export default 
  components: 
    Layout
  

</script>

我收到以下错误:

Failed to compile.

/Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts
[tsl] ERROR in /Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts(13,20)
      TS2307: Cannot find module '../shared/layout'.

为什么我在启用 typescript 后找不到布局文件?

【问题讨论】:

@AbM - 修复了它!如果您将其发布为答案,我会将其标记为已接受。 【参考方案1】:

我记得在演示组件中遇到过类似的问题。尝试在shared/layout 中添加一个空的导出,以便打字稿可以拾取它:

<script lang="ts">
  export default 
</script>

【讨论】:

以上是关于将 Typescript 添加到 Vue + Rails 应用程序 - 导入不再起作用?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Vue 插件包含到 Vue TypeScript 的模板中?

向 Vue typescript 组件添加自定义组件级属性

在 Vue CLI 3 中运行 build:electron 后,如何将静态 config.json 文件中的值读取到 Vue 文件中的 TypeScript?

vite + vue3 添加 typescript

在 Vue 3 Typescript 中将道具传递给数据对象

使用 Vite、Vue 3 和 Typescript 将组件库发布到 npm