Replace javascript with typescript

[aidnurs]

Hey, I'm trying to replace js with ts, but there are no terminal errors and I get a blank page.

What I made:

1. npm install typescript ts-loader --save-dev

ts-loader version - 3.5.0

2. changed name from "app.js" to "app.ts"

   • in functions.php
   • in webpack.mix.js

3. in "webpack.mix.js" added

   module: {
     rules: [
       {
         test: /\.tsx?$/,
         loader: "ts-loader",
         options: { appendTsSuffixTo: [/\.vue$/] },
         exclude: /node_modules/
       }
     ]
   },
   entry: {
     app: "./src/app.ts"
   },
   resolve: {
     extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
   }
   })

4. added tsconfig.json file to main folder

   "compilerOptions": {
   "target": "esnext",
   "module": "esnext",
   "strict": true,
   "jsx": "preserve",
   "importHelpers": true,
   "moduleResolution": "node",
   "esModuleInterop": true,
   "allowSyntheticDefaultImports": 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"]
   }

5. added vue-shim.d.ts file to main folder

   declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
   }

   app.ts and App.vue

   
   import Vue from "vue";

import App from "./App.vue";

new Vue({ el: "#app", render: h => h(App) });

Can you maybe help with this issue?

[aidnurs]

Issue is resolved. Just returned app.js in functions.php

function load_vue_scripts() {
    wp_enqueue_style('blankslate/app.css', get_template_directory_uri() . '/dist/styles/app.css', false, null);
    wp_enqueue_script('blankslate/manifest.js', get_template_directory_uri() . '/dist/scripts/manifest.js', null, null, true);
    wp_enqueue_script('blankslate/vendor.js', get_template_directory_uri() . '/dist/scripts/vendor.js', null, null, true);
    wp_enqueue_script('blankslate/app.js', get_template_directory_uri() . '/dist/scripts/app.js', null, null, true);
}