vuepress icon indicating copy to clipboard operation
vuepress copied to clipboard

Published 20 hours ago β€’ verified publisher icon vuejs

Support TypeScript

Open sebiniemann opened this issue 7 years ago β€’ 15 comments

Feature request

What problem does this feature solve?

Following the official TypeScript support for vue.js, vue-router and vuex, it would be great to reuse components written in TypeScript.

Currently, TypeScript is not supported by VuePress.

What does the proposed API look like?

How should this be implemented in your opinion?

I am still figuring out what needs to be changed, but assume that adjustments to the package.json and /lib/webpack/createBaseConfig.js will be sufficient.

Are you willing to work on this yourself?

Sure, already working on it.

sebiniemann avatar Aug 06 '18 08:08 sebiniemann

We'll work for that after we release next major version.

ulivz avatar Aug 08 '18 10:08 ulivz

So, we really want to use VuePress. But, we also really want to use Typescript in our .vue components...

Does anyone have any ideas on a tool chain or workflow that could enable this??

All I could come up with off the top of my head is maybe writing standard TS .vue files in the normal fashion, and then, as part of a prebuild process, transpiling those (or at least the <script> part) into non-TS .vue files. Then, dropping those non-TS .vue files into the vuepress folder before running vuepress πŸ€·β€β™€οΈ

Anyone know of a package that could help with turning TS .vue files into non-TS .vue files?

chris-dura avatar Mar 01 '19 18:03 chris-dura

Anyone know of a package that could help with turning TS .vue files into non-TS .vue files?

typescript !

mathieutu avatar Mar 11 '19 08:03 mathieutu

Anyone know of a package that could help with turning TS .vue files into non-TS .vue files?

typescript !

@mathieutu Was that supposed to be helpful? I made it pretty clear that typescript compiles .ts to .js... so, maybe filling in the blanks would actually be helpful, because as far as I know, this doesn't work:

$ tsc ts/my-component.vue

error TS6054: File 'src/app.vue' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

Pretty obvious from my question I was looking for something like transvueify which I stumbled upon after your snark revived the thread...

chris-dura avatar Mar 14 '19 17:03 chris-dura

We can just use typescript in [email protected] version, both ts、tsx are supported.

I've written a small demo, see vuepress-typescript-demo.

If you get some compiling errors when using babel@^7.0.0, that's because Vuepress is using babel's beta version now, maybe some dependencies are not compatible with your babel's version, you can fix it by adding resolutions in package.json, eg:

{
  "resolutions": {
    "vuepress/**/@babel/preset-stage-2": "7.0.0",
    "vuepress/**/@babel/core": "7.4.4",
    "vuepress/**/@babel/runtime": "7.4.4",
    "vuepress/**/babel-loader": "8.0.6",
    "vuepress/**/@vue/babel-preset-app": "3.3.0"
  }
}

ablipan avatar May 15 '19 06:05 ablipan

We'll work for that after we release next major version.

Hope you did not foget it. @ulivz

Mister-Hope avatar Sep 18 '19 13:09 Mister-Hope

We'll work for that after we release next major version.

Hope you did not foget it. @ulivz

@ulivz @Mister-Hope After a year ... gu gu gu ε’•ε’•ε’•

Akimotorakiyu avatar Oct 10 '19 14:10 Akimotorakiyu

We'll work for that after we release next major version.

Hope you did not foget it. @ulivz

@ulivz @Mister-Hope After a year ... gu gu gu ε’•ε’•ε’•

GU

Mister-Hope avatar Oct 10 '19 14:10 Mister-Hope

We'll work for that after we release next major version.

Hope you did not foget it. @ulivz

gu gu gu really need this feature. Hope you did not forget it. @ulivz

beetaa avatar Nov 12 '19 06:11 beetaa

Really want this feature because I have a lot of components written in ts which wants to miragate to vue

Mister-Hope avatar Nov 12 '19 15:11 Mister-Hope

Hey guys, we have created a plugin to partially support TypeScript in VuePress:

  • TS in Markdown
  • TS in Vue SFC
  • enhanceApp.ts

See vuepress-plugin-typescript

meteorlxy avatar Nov 29 '19 10:11 meteorlxy

Hey guys, we have created a plugin to partially support TypeScript in VuePress:

  • TS in Markdown
  • TS in Vue SFC
  • enhanceApp.ts

See vuepress-plugin-typescript

@meteorlxy I noticed an issue here, when supporting in this way, the compile speed will slow down greatly, beacause before enable it, vue files are handled by cache-loader >> vue-loader, but after we enabled, will be ts-loader >> cache-loader >> vue-loader ,so is the markdown files.

can we let the cache-loader catch the result generated by ts-lodaer?

Also, if muti instance is enabled by the plugins used by one theme, it seems that one file will be handle muti times?(I am not sure of it, but I met memory leak when building a doc with hundreds of files and more then thiry thousand words. I ran out of memory of 2GB)

Mister-Hope avatar Feb 20 '20 15:02 Mister-Hope

@Mister-Hope

can we let the cache-loader catch the result generated by ts-lodaer?

Nice catch, forgot to add cache-loader before ts-loader. It will be supported in 0.2.0

Also, if muti instance is enabled by the plugins used by one theme, it seems that one file will be handle muti times?(I am not sure of it, but I met memory leak when building a doc with hundreds of files and more then thiry thousand words. I ran out of memory of 2GB)

Sorry I cannot get your point, you can open an issue on the plugin repo for that.

meteorlxy avatar Feb 20 '20 16:02 meteorlxy

We can just use typescript in [email protected] version, both ts、tsx are supported.

I've written a small demo, see vuepress-typescript-demo.

If you get some compiling errors when using babel@^7.0.0, that's because Vuepress is using babel's beta version now, maybe some dependencies are not compatible with your babel's version, you can fix it by adding resolutions in package.json, eg:

{
  "resolutions": {
    "vuepress/**/@babel/preset-stage-2": "7.0.0",
    "vuepress/**/@babel/core": "7.4.4",
    "vuepress/**/@babel/runtime": "7.4.4",
    "vuepress/**/babel-loader": "8.0.6",
    "vuepress/**/@vue/babel-preset-app": "3.3.0"
  }
}

We can just use typescript in [email protected] version, both ts、tsx are supported.

I've written a small demo, see vuepress-typescript-demo.

If you get some compiling errors when using babel@^7.0.0, that's because Vuepress is using babel's beta version now, maybe some dependencies are not compatible with your babel's version, you can fix it by adding resolutions in package.json, eg:

{
  "resolutions": {
    "vuepress/**/@babel/preset-stage-2": "7.0.0",
    "vuepress/**/@babel/core": "7.4.4",
    "vuepress/**/@babel/runtime": "7.4.4",
    "vuepress/**/babel-loader": "8.0.6",
    "vuepress/**/@vue/babel-preset-app": "3.3.0"
  }
}

ok， it work for me。 my dependencies: "ts-loader": "^6.2.2", "typescript": "^3.8.3", "vue-template-compiler": "^2.6.11", "vuepress": "^1.4.0", "vuepress-plugin-live": "^1.5.2"

JE-lee avatar Apr 09 '20 07:04 JE-lee

Hey guys, we have created a plugin to partially support TypeScript in VuePress:

  • TS in Markdown
  • TS in Vue SFC
  • enhanceApp.ts

See vuepress-plugin-typescript

@meteorlxy I noticed an issue here, when supporting in this way, the compile speed will slow down greatly, beacause before enable it, vue files are handled by cache-loader >> vue-loader, but after we enabled, will be ts-loader >> cache-loader >> vue-loader ,so is the markdown files.

can we let the cache-loader catch the result generated by ts-lodaer?

Also, if muti instance is enabled by the plugins used by one theme, it seems that one file will be handle muti times?(I am not sure of it, but I met memory leak when building a doc with hundreds of files and more then thiry thousand words. I ran out of memory of 2GB)

same problem. any progress?

Liubasara avatar Aug 21 '23 03:08 Liubasara