<commit_before># Typescript Setup

This article may soon deprecated, because Vue.js is going to have the offcial TypeScript support. The main goal here is to only use TypeScript for Vue.js project, no JavaScript is supported.

## 1. Basic TypeScript Support

First of all, create a Vue.js project:

```console
$ vue init webpack
```

I haven't added supports for eslint, unit test or e2e test.

Then, add TypeScript support:

```console
$ yarn add -D typescript ts-loader
```

Add a `tsconfig.json` file to the root path of the project, the content is based on Vue.js official documentation:

```json
{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  }
}
```

Modify the `build/vue-loader.conf.js` file:

```diff
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: sourceMapEnabled,
     extract: isProduction
   }),
+  esModule: true,
```

Modify the `build/webpack.base.conf.js` file:

```diff
   entry: {
-    app: './src/main.js'
+    app: './src/main.ts'
   },
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
     publicPath: process.env.NODE_ENV === 'production'
       ? config.build.assetsPublicPath
       : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.ts', '.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
     }
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        include: [resolve('src'), resolve('test')],
+        exclude: /node_modules/,
+        options: {
+          appendTsSuffixTo: [/\.vue$/]
+        }
       },
```

Change the extension of `src/main.js` and `src/router/index.js` from "js" to "ts". And add `lang="ts"` attribute to all the `<script></script>` tags in component definitions.

**TODO: check if it is OK to remove the babel-loader, since we are not using it anymore.**

## 2. Tslint Configuration

It is said that the developer team of Vue.js prefers eslint with TypeScript plugin as the linter solution. However I didn't manage to achieve that. In the future, there will be TypeScript support in `vue-cli`. However, now we have to stick on `tslint`.<commit_msg>Update typescript-setup.md<commit_after># Typescript Setup

This article may soon deprecated, because Vue.js is going to have the offcial TypeScript support. The main goal here is to only use TypeScript for Vue.js project, no JavaScript is supported.

## 1. Basic TypeScript Support

First of all, create a Vue.js project:

```console
$ vue init webpack
```

I haven't added supports for eslint, unit test or e2e test.

Then, add TypeScript support:

```console
$ yarn add -D typescript ts-loader
```

Add a `tsconfig.json` file to the root path of the project, the content is based on Vue.js official documentation:

```json
{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  }
}
```

Modify the `build/vue-loader.conf.js` file:

```diff
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: sourceMapEnabled,
     extract: isProduction
   }),
+  esModule: true,
```

Modify the `build/webpack.base.conf.js` file:

```diff
   entry: {
-    app: './src/main.js'
+    app: './src/main.ts'
   },
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
     publicPath: process.env.NODE_ENV === 'production'
       ? config.build.assetsPublicPath
       : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.ts', '.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
     }
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        include: [resolve('src'), resolve('test')],
+        exclude: /node_modules/,
+        options: {
+          appendTsSuffixTo: [/\.vue$/]
+        }
       },
```

Change the extension of `src/main.js` and `src/router/index.js` from "js" to "ts". And add `lang="ts"` attribute to all the `<script></script>` tags in component definitions.

It seems that we are not using babel-loader anymore, so we could remove it using following command:

```console
$ yarn remove babel-loader
```

**TODO: check if it is OK to remove the babel-loader, since we are not using it anymore.**

## 2. Tslint Configuration

It is said that the developer team of Vue.js prefers eslint with TypeScript plugin as the linter solution. However I didn't manage to achieve that. In the future, there will be TypeScript support in `vue-cli`. However, now we have to stick on `tslint`.
{'fraction_non_alphanumeric': 0.149727597219613, 'fraction_numerical': 0.0030058237835806877, 'mean_word_length': 2.7947255880256594, 'pattern_counts': {'":': 12, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '363183', 'n_tokens_mistral': 1734, 'n_tokens_neox': 1678, 'n_words': 547}