[英]TypeScript: Using a plain JavaScript lib in web project, with custom typings
[英]Using Typescript functions in plain VueJS project
TL;DR:如何将 typescript 模块导入和使用到我的普通 js Vue 组件中?
我有一个 Vue 2(还没有 3)项目。 在这个项目中,我将一些逻辑移到了 es 模块中,以提高可测试性并使其更具可重用性。 像这样的东西:
export const getHistory = () => {
// ...
}
在一个普通的 JS Vue-Component 中,我会import {getHistory} from '../modules/listHistory'
该函数并将它与一些表示逻辑结合使用。
现在,我想将此函数移动到这样的打字稿模块:
interface ListHistory {
id: number;
}
export function getHistory(): ListHistory[] {
// ...
}
我(天真地)假设我可以继续导入该函数并以与以前在我的 JS-Components 中相同的方式使用它。 但是,这不起作用并且失败并显示以下错误消息:
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&
按照关于 typescript 的 vue 指南,我在我的项目中添加了一个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 并且我确实想使用类型,所以我现在最好从移动那些东西开始已经可以移动到打字稿。
安装 TS 并将tsconfig.json
配置文件添加到基于 Vue CLI/Webpack 的 Vue 项目是不够的,因为您还需要配置 Webpack 以正确处理 TS 文件或 Vue SFC 中<script lang='ts'>
块(使用ts -装载机)
在 Vue CLI 管理的项目中开始使用 TS 的最简单方法是使用 CLI 插件@vue/cli-plugin-typescript
vue add typescript
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.