javascript - 在普通 VueJS 项目中使用 Typescript 函数

Question

TL;DR:如何将 typescript 模块导入到我的纯 js Vue 组件中并将其使用？

我有一个 Vue 2(还不是 3)项目。在这个项目中，我将一些逻辑移到了 es 模块中，以提高可测试性并提高它们的可重用性。像这样:

export const getHistory = () => {
   // ...
}

然后，在普通的 JS Vue 组件中，我将从 '../modules/listHistory' 导入 {getHistory} 该函数并将其与一些表示逻辑结合使用。

现在，我想将此函数移动到这样的 typescript 模块中:

interface ListHistory {
    id: number;
}

export function getHistory(): ListHistory[] {
  // ...
}

我(天真地)假设我可以继续导入函数并像以前一样在我的 JS 组件中使用它。但是，这不起作用并且失败并显示此错误消息:

These relative modules were not found:

* ../../modules/listHistory in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/quick-actions/quick-actions.vue?vue&type=script&lang=js&

正在关注 the vue guidelines on typescript我在我的项目中添加了一个 tsconfig.json 文件:

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

我还添加了 typescript 作为我项目的开发依赖。

在四处寻找解决方案时，我只能发现人们试图在 typescript 项目中导入纯 js 模块，这与我想做的完全不同。

我知道将 Typescript 的东西导入纯 JS 代码并不能为您提供 Typescript 的所有优点，但由于我会在某个时候将整个东西迁移到 VueJS 3 并且我确实想使用类型，所以我最好现在开始移动已经可以移动到 typescript 的东西。

Answer 1

安装 TS 并添加 tsconfig.json基于 Vue CLI/Webpack 将 .config 文件添加到 Vue 项目是不够的，因为您还需要配置 Webpack 以正确处理 TS 文件或 <script lang='ts'> Vue SFC 中的 block (使用 ts-loader )

在 Vue CLI 管理的项目中开始使用 TS 的最简单方法是使用 CLI 插件 @vue/cli-plugin-typescript

vue add typescript