Currently, I am in the process of converting a Vue project from JavaScript to TypeScript without utilizing the class-style syntax.
These are the steps I took:
- I ran:
vue add typescript I went through all my
.vuefiles and:- Indicated that TypeScript is the language being used:
<script lang="ts"> - Changed
export default {toexport default Vue extend({ - Generated a
types.d.tsfile with custom types and imported it into thetypesoption oftsconfig.json. - Added type specifications in the code wherever possible.
- Indicated that TypeScript is the language being used:
However, upon running the application, an error occurred:
Module parse failed: Unexpected token (23:16)
File was processed with these loaders:
* ../../../../.nvm/versions/node/v12.18.0/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js
* ../../../../.nvm/versions/node/v12.18.0/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| data() {
| return {
> todos: [] as Todo[]
| };
| },
It appears that the loaders being utilized by the project do not recognize the TypeScript syntax. Any suggestions on how to troubleshoot this issue?