diff --git a/app/javascript/custom.d.ts b/app/javascript/custom.d.ts
new file mode 100644
index 0000000..d7a410e
--- /dev/null
+++ b/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;
+}
diff --git a/app/javascript/packs/app.vue b/app/javascript/packs/app.vue
index 747e8dd..79fd77b 100644
--- a/app/javascript/packs/app.vue
+++ b/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">
diff --git a/app/javascript/packs/trellaw.js b/app/javascript/packs/trellaw.ts
similarity index 73%
rename from app/javascript/packs/trellaw.js
rename to app/javascript/packs/trellaw.ts
index 30a3715..6e2ea8c 100644
--- a/app/javascript/packs/trellaw.js
+++ b/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');
 });
diff --git a/app/javascript/trellaw/app-header.vue b/app/javascript/trellaw/app-header.vue
index 10db973..4254e58 100644
--- a/app/javascript/trellaw/app-header.vue
+++ b/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>
diff --git a/app/javascript/trellaw/board.vue b/app/javascript/trellaw/board.vue
index 2219da6..cc38a79 100644
--- a/app/javascript/trellaw/board.vue
+++ b/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>
 
 
diff --git a/app/javascript/trellaw/card-target.vue b/app/javascript/trellaw/card-target.vue
index 448c15f..acae96a 100644
--- a/app/javascript/trellaw/card-target.vue
+++ b/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>
 
diff --git a/app/javascript/trellaw/card.vue b/app/javascript/trellaw/card.vue
index 24ea20f..c8f84a7 100644
--- a/app/javascript/trellaw/card.vue
+++ b/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>
diff --git a/app/javascript/trellaw/list.vue b/app/javascript/trellaw/list.vue
index acb5312..b00c192 100644
--- a/app/javascript/trellaw/list.vue
+++ b/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>
 
diff --git a/config/webpack/loaders/typescript.js b/config/webpack/loaders/typescript.js
new file mode 100644
index 0000000..63d63e6
--- /dev/null
+++ b/config/webpack/loaders/typescript.js
@@ -0,0 +1,8 @@
+module.exports = {
+  test: /\.ts$/,
+  exclude: /node_modules|vue\/src/,
+  loader: 'ts-loader',
+  options: {
+    appendTsSuffixTo: [/\.vue$/],
+  },
+};
diff --git a/config/webpack/loaders/vue.js b/config/webpack/loaders/vue.js
index 87420e5..015450c 100644
--- a/config/webpack/loaders/vue.js
+++ b/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',
diff --git a/hound.yml b/hound.yml
new file mode 100644
index 0000000..87776dc
--- /dev/null
+++ b/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"
diff --git a/package.json b/package.json
index 0ab46bd..37d8faf 100644
--- a/package.json
+++ b/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",
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..88430e1
--- /dev/null
+++ b/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
+}
diff --git a/tslint.json b/tslint.json
new file mode 100644
index 0000000..aae83af
--- /dev/null
+++ b/tslint.json
@@ -0,0 +1,147 @@
+{
+  "rules": {
+    "align": [
+      true,
+      "parameters",
+      "arguments",
+      "statements"
+    ],
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-name": [
+      true,
+      "never-prefix"
+    ],
+    "jsdoc-format": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      120
+    ],
+    "member-access": true,
+    "member-ordering": [
+      true,
+      {
+        "order": "statics-first"
+      }
+    ],
+    "new-parens": true,
+    "no-any": false,
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-conditional-assignment": true,
+    "no-consecutive-blank-lines": false,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "log",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-constructor-vars": false,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-internal-module": true,
+    "no-invalid-this": true,
+    "no-namespace": true,
+    "no-reference": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": true,
+    "no-switch-case-fall-through": false,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": false,
+    "no-var-keyword": true,
+    "no-var-requires": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-catch",
+      "check-else",
+      "check-finally",
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "one-variable-per-declaration": [
+      true,
+      "ignore-for-loop"
+    ],
+    "quotemark": [
+      true,
+      "single",
+      "avoid-escape"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "switch-default": false,
+    "trailing-comma": [
+      true,
+      {
+        "singleline": "never",
+        "multiline": "always"
+      }
+    ],
+    "triple-equals": [
+      true
+    ],
+    "typedef": [
+      true,
+      "member-variable-declaration",
+      "variable-declaration",
+      "property-declaration",
+      "parameter"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      },
+      {
+        "call-signature": "onespace",
+        "index-signature": "onespace",
+        "parameter": "onespace",
+        "property-declaration": "onespace",
+        "variable-declaration": "onespace"
+      }
+    ],
+    "use-isnan": true,
+    "variable-name": [
+      true,
+      "ban-keywords",
+      "check-format",
+      "allow-pascal-case"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-module",
+      "check-operator",
+      "check-separator",
+      "check-type",
+      "check-typecast"
+    ]
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 4287051..b7ff506 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -87,6 +87,12 @@ ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
+ansi-styles@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.1.0.tgz#09c202d5c917ec23188caa5c9cb9179cd9547750"
+  dependencies:
+    color-convert "^1.0.0"
+
 any-promise@^0.1.0, any-promise@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
@@ -955,6 +961,14 @@ chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
 chokidar@^1.4.3, chokidar@^1.6.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1035,7 +1049,7 @@ coffee-script@^1.12.6:
   version "1.12.6"
   resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.6.tgz#285a3f7115689065064d6bf9ef4572db66695cbf"
 
-color-convert@^1.3.0:
+color-convert@^1.0.0, color-convert@^1.3.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
   dependencies:
@@ -1067,7 +1081,7 @@ colormin@^1.0.5:
     css-color-names "0.0.4"
     has "^1.0.1"
 
-colors@~1.1.2:
+colors@^1.1.2, colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
 
@@ -1455,6 +1469,10 @@ detect-node@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 
+diff@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"
+
 diffie-hellman@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
@@ -1587,7 +1605,7 @@ escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
-escape-string-regexp@^1.0.2:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -1950,7 +1968,7 @@ glob@^5.0.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
@@ -2023,6 +2041,10 @@ has-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
 
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -3908,7 +3930,7 @@ resolve-url@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.3.3:
+resolve@^1.3.2, resolve@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
   dependencies:
@@ -3935,7 +3957,7 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.5.1, rimraf@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
   dependencies:
@@ -4000,7 +4022,7 @@ select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@~5.3.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.3.0, semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
@@ -4316,6 +4338,12 @@ supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
+supports-color@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.0.tgz#ad986dc7eb2315d009b4d77c8169c2231a684037"
+  dependencies:
+    has-flag "^2.0.0"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -4389,6 +4417,50 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+ts-loader@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-2.3.1.tgz#6edc603393c2775c40ad84e3420007f1c097eab0"
+  dependencies:
+    chalk "^2.0.1"
+    enhanced-resolve "^3.0.0"
+    loader-utils "^1.0.2"
+    semver "^5.0.1"
+
+tslib@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
+
+tslint-loader@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/tslint-loader/-/tslint-loader-3.5.3.tgz#343f74122d94f356b689457d3f59f64a69ab606f"
+  dependencies:
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+    object-assign "^4.1.1"
+    rimraf "^2.4.4"
+    semver "^5.3.0"
+
+tslint@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.5.0.tgz#10e8dab3e3061fa61e9442e8cee3982acf20a6aa"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    colors "^1.1.2"
+    commander "^2.9.0"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.7.1"
+    tsutils "^2.5.1"
+
+tsutils@^2.5.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.7.1.tgz#411a0e9466525a2b2869260a55620d7292155e24"
+  dependencies:
+    tslib "^1.7.1"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -4414,6 +4486,10 @@ typed-function@0.10.5:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/typed-function/-/typed-function-0.10.5.tgz#2e0f18abd065219fab694a446a65c6d1981832c0"
 
+typescript@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
+
 uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
@@ -4531,6 +4607,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-class-component@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-5.0.2.tgz#3dcdc005c58c4e88d8ec2d46e01c74f4d90135c8"
+
 vue-hot-reload-api@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"