Setting up TypeScript in a existing Vue.JS project

JavaScript
1

There is a component that is written in TypeScript that I have to incorporate into my existing Vue.JS project. However, I did not enable the TS feature into the Vue.JS when it was created earlier this year. I have installed TS functionality through this line:

npm install --save-dev typescript

And this is my ts config file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

But upon running it in dev mode, I get this error:

Module parse failed: Unexpected token (27:65)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.

How can I fix this?

2

The error indicates that the TypeScript code is not being correctly transpiled, meaning that the loader is not correctly configured to handle TypeScript in Vue components.

Now let’s integrate TypeScript into your Vue project, like so

install Necessary Packages - You have already installed TypeScript. You also need to install ts-loader and @vue/cli-plugin-typescript

npm install --save-dev ts-loader @vue/cli-plugin-typescript

Vue Configuration - make sure that your vue.config.js has TypeScript configuration

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.tsx', '.vue', '.js', '.json'],
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: { appendTsSuffixTo: [/\.vue$/] },
          exclude: /node_modules/,
        },
      ],
    },
  },
};

the above configuration ensures that .ts and .tsx files are processed by the ts-loader , and the appendTsSuffixTo option ensures that TypeScript in .vue files is correctly handled.

Update Main Entry - also make sure your entry file (typically main.js ) is renamed to main.ts and update any necessary imports or code to be TypeScript-compatible.

Add Vue TypeScript Plugin - in your tsconfig.json, under compilerOptions, add;

"jsx": "preserve",
"experimentalDecorators": true,
"jsxFactory": "h"

Update Vue Files - when using TypeScript in Vue files, make sure to update the <script> tag to indicate you’re using TypeScript:

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  // your component code here...
});
</script>

Check Dependencies - also sometimes, certain dependencies or their types might cause conflicts. Ensure that all your dependencies are up-to-date. Also, install the necessary TypeScript definitions for your dependencies using @types/[dependency-name] .
You provided an error that gives a line number (27:65) . Check that specific line in your code. The issue might be related to a specific part of your TypeScript code that is not being correctly parsed.

Only if you’re using Vue CLI, You can also invoke the TypeScript plugin via Vue CLI:

vue add typescript

Install the necessary packages and update your configuration files.
That’s all, try it out to see how it roles.
Good luck

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.