feat(): migrate to typescript

app/javascript/custom.d.ts

@@ -0,0 +1,9 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}
+
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

app/javascript/packs/app.vue

@@ -5,16 +5,20 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
 import appHeader from '../trellaw/app-header.vue';
 import board from '../trellaw/board.vue';
 
-export default {
-  components: {
+@Component({
+    components: {
     appHeader,
     board,
   },
-}
+})
+export default class App extends Vue {}
 </script>
 
 <style lang="scss">

app/javascript/packs/trellaw.js → app/javascript/packs/trellaw.ts

@@ -3,5 +3,5 @@ import Vue from 'vue';
 import App from './app.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const app = new Vue(App).$mount('#app');
+  const app: Vue = new Vue(<any> App).$mount('#app');
 });

app/javascript/trellaw/app-header.vue

@@ -4,25 +4,23 @@
   </header>
 </template>
 
-<script>
-import logo from '../trellaw/images/white-monkey.svg'
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import logo from '../trellaw/images/white-monkey.svg';
 
-export default {
-  data() {
-    return {
-      logo,
-    }
-  }
+export default class AppHeader extends Vue {
+  public logo: string = logo;
 }
 </script>
 
 <style lang="scss" scoped>
-  @import 'stylesheets/variables';
-  .header {
-    background-color: $header-bg;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+@import 'stylesheets/variables';
+.header {
+  background-color: $header-bg;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

app/javascript/trellaw/board.vue

@@ -8,14 +8,18 @@
   </div>
 </template>
 
-<script>
-import list from './list';
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
 
-export default {
+import list from './list.vue';
+
+@Component({
   components: {
     list,
-  }
-}
+  },
+})
+export default class Board extends Vue { }
 </script>
 
 

app/javascript/trellaw/card-target.vue

@@ -4,15 +4,15 @@
   </div>
 </template>
 
-<script>
-import add from '../trellaw/images/add.svg'
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
 
-export default {
-  data() {
-    return {
-      add,
-    }
-  }
+import add from '../trellaw/images/add.svg';
+
+@Component
+export default class CardTarget extends Vue {
+  public add: string = add;
 }
 </script>
 

app/javascript/trellaw/card.vue

@@ -4,17 +4,23 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+@Component({
   props: ['cardType'],
+})
+export default class Card extends Vue {
+  public cardType: string;
 }
 </script>
 
 <style lang="scss" scoped>
-  @import './stylesheets/variables';
+@import './stylesheets/variables';
 
-  .card {
-    background-color: $card-bg;
-    border-radius: 4px;
-  }
+.card {
+  background-color: $card-bg;
+  border-radius: 4px;
+}
 </style>

app/javascript/trellaw/list.vue

@@ -9,24 +9,26 @@
   </div>
 </template>
 
-<script>
-import card from './card';
-import cardTarget from './card-target';
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
 
-export default {
+import card from './card.vue';
+import cardTarget from './card-target.vue';
+
+@Component({
   components: {
     card,
   },
   props: {
     title: {
       default: 'Título',
-    }
+    },
   },
-  data() {
-    return {
-      dropTarget: cardTarget,
-    }
-  }
+})
+export default class List extends Vue {
+  public dropTarget: Vue.Component = cardTarget;
+  public title: string;
 }
 </script>
 

config/webpack/loaders/typescript.js

@@ -0,0 +1,8 @@
+module.exports = {
+  test: /\.ts$/,
+  exclude: /node_modules|vue\/src/,
+  loader: 'ts-loader',
+  options: {
+    appendTsSuffixTo: [/\.vue$/],
+  },
+};

config/webpack/loaders/vue.js

@@ -4,6 +4,7 @@ module.exports = {
   options: {
     extractCSS: true,
     loaders: {
+      ts: 'ts-loader!tslint-loader',
       js: 'babel-loader',
       file: 'file-loader',
       scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',

hound.yml

@@ -0,0 +1,13 @@
+---
+ruby:
+  :enabled: true
+  :config_file: ".rubocop.yml"
+eslint:
+  :enabled: true
+  :config_file: ".eslintrc.json"
+tslint:
+  :enabled: true
+  :config_file: tslint.json
+scss:
+  :enabled: true
+  :config_file: ".scss-lint.yml"

package.json

@@ -25,7 +25,12 @@
     "resolve-url-loader": "^2.0.3",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
+    "ts-loader": "^2.3.1",
+    "tslint": "^5.5.0",
+    "tslint-loader": "^3.5.3",
+    "typescript": "^2.4.2",
     "vue": "^2.4.1",
+    "vue-class-component": "^5.0.2",
     "vue-loader": "^12.2.2",
     "vue-template-compiler": "^2.4.1",
     "webpack": "^3.0.0",

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["dom", "es6"],
+    "module": "es6",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "target": "es5"
+  },
+  "exclude": ["**/*.spec.ts", "node_modules", "public"],
+  "compileOnSave": false
+}