TL;DR: How can I import and use a typescript module into my plain js Vue-Components?
I have a Vue 2 (not yet 3) project. In this specific project, I have made the decision to refactor some of the code logic into ES modules for improved testability and reusability. Here is an example:
export const getHistory = () => {
// ...
}
In one of my plain JS Vue-Components, I would typically
import {getHistory} from '../modules/listHistory'Now, my goal is to transition this function to a Typescript module like this:
interface ListHistory {
id: number;
}
export function getHistory(): ListHistory[] {
// ...
}
Initially, I thought that importing the new TS module and using it in the same way as before in my JS components would work seamlessly. However, I encountered an error message saying:
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&
Consequently, as per Vue guidelines on TypeScript, I proceeded to include a tsconfig.json file in my project:
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
I also made sure to add typescript as a dev dependency in my project.
Throughout my search for a solution, I found that most people were focused on importing plain JS modules into TypeScript projects, which didn't align with my specific requirements.
Although I am aware that importing Typescript elements into plain JS code does not fully leverage the benefits of Typescript, since I plan on eventually migrating the entire project to VueJS 3 and utilizing types, it would be beneficial for me to start gradually by converting components that can already be moved into Typescript.