search

vuejs / vuepress

πŸ“ Minimalistic Vue-powered static site generator
https://vuepress.vuejs.org
MIT License
22.57k stars 4.76k forks source link

Support TypeScript #699

Open sebiniemann opened 6 years ago

sebiniemann commented 6 years ago

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.

ulivz commented 6 years ago

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

chris-dura commented 5 years ago

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?

mathieutu commented 5 years ago

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

typescript !

chris-dura commented 5 years ago

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...

ablipan commented 5 years ago

We can just use typescript in Vuepress@0.x 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"
  }
}
Mister-Hope commented 5 years ago

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

Hope you did not foget it. @ulivz

Akimotorakiyu commented 5 years ago

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 ε’•ε’•ε’•

Mister-Hope commented 5 years ago

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

beetaa commented 4 years ago

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

Mister-Hope commented 4 years ago

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

meteorlxy commented 4 years ago

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

See vuepress-plugin-typescript

Mister-Hope commented 4 years ago

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)

meteorlxy commented 4 years ago

@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.

JE-lee commented 4 years ago

We can just use typescript in Vuepress@0.x 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 Vuepress@0.x 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"

Liubasara commented 1 year ago

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?