Typescript Support

[zxc23]

I am keen on introducing typescript to my electron-vue project, but I fear setting it up may be spooky. Do you (or anyone else) have any tips on getting started there?

If there is enough interest, perhaps some dedicated space in the docs/template would be good in the future.

Thanks again for this wonderful project.

[SimulatedGREG]

@zxc23

Was actually going to consider this rather soon. Probably won't directly include within the boilerplate itself, but definitely would add documentation about how to set this up.

[SimulatedGREG]

Been experimenting with this the past couple of days. It seems that vue-class-component, along with vue-property-decorator is a good way to go. This isn't super urgent at the moment, so I'll be deferring this for now. If you are personally insterested in tickering with this, I basically followed the setup from here.

[sbaidon]

I followed the same setup you mention, I managed to get almost everything working, but for some reason the <router-view>tag is not being recognized, did you come across this issue?

These are the changes to the renderer webpack file: webpack.renderer.config.js

This is the tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "isolatedModules": false,
    "experimentalDecorators": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true
  },
  "compileOnSave": false
}

This is the error message:

[SimulatedGREG]

@sbaidon

The webpack config looks correct at first glance. Do you have a repo I could take a look at?

[sbaidon]

@SimulatedGREG Here it is https://github.com/sbaidon/typescript-electron-vue

[SimulatedGREG]

@sbaidon

I can't seem to figure out what is so different from what I previously did. Here's a link to what I got working... This setup also works with vetur with Visual Studio Code. I'm also not sure if the dependency versions are specific, so if this doesn't work with npm install, make sure to try installing with yarn.

https://github.com/SimulatedGREG/electron-vue-ts-experiment

[sbaidon]

Well, I will try to figure out what's going on...

Thanks a lot for sharing the repo!

[sbaidon]

Found what was the problem,vue-class-component must be listed as dev-dependency.

I am guessing it has something to do with the renderer's configuration listing all depedencies under the externals property

[dinfer]

Hi, I try the electron-vue-ts-experiment, but, in a .vue file, .ts file connot be imported. It seems that, the .ts file is not processed by webpack, because i cannot find the .ts file content in any files of the dist folder

I just add a new file in src/renderer/components/test.ts

export const str = 'hi'

and import the str in file src/renderer/components/LandingPage.vue

import { str } from './test'

it reports

┏ Renderer Process -----------

  Hash: 77e3d9660f93082096a6
  Version: webpack 2.6.1
  Time: 279ms
                                 Asset      Size  Chunks             Chunk Names
                         imgs/logo.png   61.9 kB          [emitted]
                           renderer.js   1.08 MB       0             renderer
  0.88465a623443d20e48e9.hot-update.js   19.2 kB       0             renderer
  88465a623443d20e48e9.hot-update.json  43 bytes

  ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/renderer/components/LandingPage.vue
  Module not found: Error: Can't resolve './test' in 'D:\_project\console\electron-vue-ts-experiment\src\renderer\components'
   @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/renderer/components/LandingPage.vue 4:0-29
   @ ./src/renderer/components/LandingPage.vue
   @ ./src/renderer/router/index.js
   @ ./src/renderer/main.ts
   @ multi ./.electron-vue/dev-client ./src/renderer/main.ts
  Child html-webpack-plugin for "index.html":
           Asset     Size  Chunks  Chunk Names
      index.html  1.45 MB       0

┗ ----------------------------

how can I resolve this problem?

[develar]

https://github.com/electron-userland/electrify uses this boilerplate and TypeScript support added for both main and renderer.

Module not found: Error: Can't resolve './test' in 'D:_project\console\electron-vue-ts-experiment\src\renderer\components'

You need to add shim https://github.com/electron-userland/electrify/blob/master/src/renderer/vue-shims.d.ts

[dinfer]

Thank you very much 👍 @develar

[develar]

https://github.com/electron-userland/electron-webpack released as refactored version of this boilerplate with TypeScript support. I will open discussion about integration/merging soon. (this boilerplate is so awesome, that can be used not only for vue projects, but for any electron application :)).

[develar]

Done in #310

[eberkund]

Posting this here because it might be relevant: https://vuejsfeed.com/blog/vuets-a-vue-js-and-typescript-ready-boilerplate

[SimulatedGREG]

My friend @akiralaine actually made vuets based off my electron-vue-to-experiment. Cool to see people noticing it, haha!

[eugeneCN]

Terminal how to print the log???

[eberkund]

I found another Vue + TS repo, this one directly from MS:

https://github.com/Microsoft/TypeScript-Vue-Starter

[SimulatedGREG]

Just a quick update to everybody interested in using TypeScript. electron-vue will be migrating to use electron-webpack internally, which has first-class support for TypeScript. There are still a few things left on my agenda until that migration is made, but it will finally be coming soon!

[kinoli]

Has this been implemented yet? Would love to utilize TypeScript in my project.

[SimulatedGREG]

Okay everyone, the current feat/electron-webpack offers experimental TypeScript support. You can try it now with...

vue init simulatedgreg/electron-vue#feat/electron-webpack my-project

During scaffolding, make sure to hit (Y)es to setup TypeScript. All provided component files have examples of the traditional and class styles. If you haven't seen Class component types, make sure to check out vue-class-component for more info.

Known Issues:

• ESLint doesn't understand all of the TypeScript syntax Currently throwing errors with the as keyword on Vue Component files You will get an error after installing dependencies, but this doesn't break functionality. You can ignore the warning and continue with developing your application.

If you find any issues while testing, please report back here.

Make sure to see #310 for more information about this branch.

[jtidwe11]

@SimulatedGREG Using this, I had to add Electron to the ESLint global list to make it compile. Otherwise, it throws 'Electron' is not defined. For the issue you pointed out above, mine also wouldn't compile unless I removed the references and as keyword to the VueComponents. I'm happy with letting it spit out errors as long as it still works, so if there's some configuration that I can just add or somehow 'whitelist' this feature, I'd be interested in hearing about it.

[jtidwe11]

Noticed on initial runs that electron-webpack spits out an empty box on the startElectron process in the dev-runner.js if data is whitespace. Obviously doesn't hurt anything, just seemed odd when I was monitoring the output.

[Zyles]

I am also very interested in migrating to Typescript.

Maybe this repo can serve as inspiration: https://github.com/bdero/electron-vue-typescript-starter

[antoniogiroz]

Hi! I'm interested in use Typescript in my electron-vue project too. What is the state of this? I've read this discussion but any given option above it doesn't work. Thanks!

[SimulatedGREG]

Update: I've been super busy with life and work, but the current plan for the moment is to reevaluate if electron-webpack will be used or if vue-cli@3 would be a better fit.

[antoniogiroz]

Ohh Great!

[linshuhe]

can typescript support in electron-vue now? I'm quit interested in it too

[matheusgrieger]

Hey @SimulatedGREG, any news on that update? Tried to reconfigure by hand but failed with a lot of errors... I'm not very good with the Webpack config, and I've been testing vue-cli@3 a lot in another project, it is looking and working really great!

Thanks for your work!

[zippoxer]

Can anyone explain the trade-offs between vue-cli@3 and electron-webpack ?

I've been super busy with life and work

@SimulatedGREG I wish you the best of luck. electron-vue is a life-saver for me. I tried without it first, and wasted so many hours to no avail. Thanks for your efforts!

[oopsplus]

Can typescript support in electron-vue now? Super Waiting for It...

[oopsplus]

@SimulatedGREG ， as vuejs and electron both officially support typescript now, do you have a plan to make this project support ts as well? The electron-vue-ts-experiment repo haven't been updated for more than one year.

Hope to hear some voice from you on it. Thanks very much.

[XanderLuciano]

@oopsplus SimulatedGREG is dedicating his time to other projects currently and I've been mainly maintaining this repo currently.

It seems that between this template and a Vue CLI 3 plugin, the plugin approach was taken, so not much additional work has been done for TS support. That said I am a big fan of type script and would also like to see support added. I'll take a look at see what would be required to add support, but PR's are appreciated if anyone has anything to add.

[motin]

Going back to the top post in this issue thread:

I am keen on introducing typescript to my electron-vue project, but I fear setting it up may be spooky. Do you (or anyone else) have any tips on getting started there?

As mentioned several times in this thread, Vue Cli 3 is replacing boilerplates and templates. It also has excellent official typescript support and an unofficial electron plugin: https://nklayman.github.io/vue-cli-plugin-electron-builder/

Personally I went from using this template to the above mentioned combo and recommend it to anyone interested in a replacement of electron-vue.

[XanderLuciano]

I would also encourage the usage of Vue CLI 3 (it's quite nice and it's plugin architecture is more sustainable for long term projects over updating a boilerplate).

That said, vue-cli-plugin-electron-builder is not quite at the point where I personally feel comfortable moving over to it just yet. Until then I plan on helping to maintain this repo and address issues as they come up so that this project isn't abandoned before the next tool is fully ready for production usage.

[santutu]

https://github.com/SimulatedGREG/electron-vue-ts-experiment

.electron-vue/webpack.renderer.config.js

resolve: { alias: { '@': path.join(__dirname, '../src/renderer'), 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['.js', '.vue', '.ts', '.json', '.css', '.node'] },

Add .ts in extentions. It's work well, when import another .ts file

[the-artifabrian]

Any news on this? Can anyone give me some pointers on how to migrate electron-vue to vue cli? Thanks :D