Typescript with Vue js

Question

Hi I have a question didn't find answer/solution till now... I am looking to include typescript in a Vue project but not directly into component level. What I plan to do is, create some .ts files and compile them to .js files so then I can reference/import these .js files extracted from .ts and make use of them inside components... for example...

<template>
...
</template>    
<script>
  import file from './file.js';
...
</script>
<style>
...
</style>

then use the code from file.js inside the methods defined inside script tags in the component. What I wanted to know... is this possible (if yes how?) and is this a good approach? I plan to use this approach for most of my components so they have a separated imported script.

As Harshal said, you'll probably end up writing everything in TypeScript. To get started I definitely recommend using Vue GUI (cli v3) to bootstrap things. It's quite a hassle to implement TypeScript manually. — Olaf
– Olaf, Commented Jun 28, 2018 at 15:00

Harshal Patil · Accepted Answer · 2018-06-28 12:52:20Z

Yes. It is possible. If you are planning to write some components in TypeScript directly, your .vue file would look like:

<template>
     <!-- Some HTML -->
</template>

<script lang="ts">
    import file from './file.js';
</script>

It is perfectly fine to have some part of your code in TypeScript and some part in JavaScript. If you are using Webpack or other, ensure that ts-loader and babel-loader are properly configured.

For TypeScript, you will want to set flags like allowJs, implicit any, disable strict mode to reduce friction when importing JS files into TypeScript and vice-a-versa.

As far as being the good approach, I advice to not do the workflow you are suggesting. Your mixed TypeScript and JS workflow would be:

Use module bundler like Webpack (Rollup has problems with Vue + TypeScript)
Compile all at once, i.e. don't wait for TypeScript compilation and then use compiled code in .vue files.
Three loaders are must: ts-loader, babel-loader, vue-loader. Without that it is not possible.
When using TypeScript, you won't have to specify filename extensions like .js or .ts inside import statements.
Also, write your entry file i.e. main.ts or index.ts in TypeScript. It will save you a lot of pain.

Once you start writing and see the power of TypeScript, you will eventually start writing everything in TypeScript.

Collectives™ on Stack Overflow

Typescript with Vue js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related