Support TypeScript

[sebiniemann]

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]

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

[chris-dura]

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]

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

typescript !

[chris-dura]

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]

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]

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

Hope you did not foget it. @ulivz

[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 咕咕咕

[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 咕咕咕

GU

[beetaa]

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]

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

[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

[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 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]

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

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]

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?