TypeScriptの音ォ〜!

package.json

@@ -11,6 +11,7 @@
     "stylelint": "stylelint resources/assets/sass/**/*"
   },
   "devDependencies": {
+    "@types/jquery": "^3.3.29",
     "bootstrap": "^4.3.1",
     "cal-heatmap": "^3.3.10",
     "chart.js": "^2.7.1",
@@ -28,6 +29,8 @@
     "sass-loader": "^7.1.0",
     "stylelint": "^9.10.1",
     "stylelint-config-recess-order": "^2.0.1",
+    "ts-loader": "^6.0.1",
+    "typescript": "^3.4.5",
     "vue": "^2.6.10",
     "vue-template-compiler": "^2.6.6"
   },

resources/assets/js/checkin.ts

@@ -10,7 +10,7 @@ function updateTags() {
     );
 }
 
-function insertTag(value) {
+function insertTag(value: string) {
     $('<li class="list-inline-item badge badge-primary" style="cursor: pointer;"><span class="oi oi-tag"></span> <span></span> | x</li>')
         .data('value', value)
         .children(':last-child')
@@ -19,22 +19,23 @@ function insertTag(value) {
         .appendTo('#tags');
 }
 
-var initTags = $('input[name=tags]').val();
+const initTags = $('input[name=tags]').val() as string;
 if (initTags.trim() !== '') {
     initTags.split(' ').forEach(function (value) {
         insertTag(value);
     });
 }
 
-$('#tagInput').on('keydown', function (ev) {
-    var $this = $(this);
-    if ($this.val().trim() !== '') {
+$('#tagInput').on('keydown', function (ev: JQuery.KeyDownEvent) {
+    const $this = $(this);
+    let value = $this.val() as string;
+    if (value.trim() !== '') {
         switch (ev.key) {
             case 'Tab':
             case 'Enter':
             case ' ':
-                if (ev.originalEvent.isComposing !== true) {
-                    insertTag($this.val().trim());
+                if ((ev.originalEvent as any).isComposing !== true) {
+                    insertTag(value.trim());
                     $this.val('');
                     updateTags();
                 }

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "target": "es5",
+    "module": "es2015",
+    "strict": true
+  },
+  "include": [
+    "resources/assets/js/**/*"
+  ]
+}

webpack.mix.js

@@ -16,7 +16,7 @@ mix.js('resources/assets/js/app.js', 'public/js')
     .js('resources/assets/js/home.js', 'public/js')
     .js('resources/assets/js/user/stats.js', 'public/js/user')
     .js('resources/assets/js/setting/privacy.js', 'public/js/setting')
-    .js('resources/assets/js/checkin.js', 'public/js')
+    .ts('resources/assets/js/checkin.ts', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css')
     .autoload({
         'jquery': ['$', 'jQuery', 'window.jQuery']