型を付ける音「ｶﾀｶﾀ...」

resources/assets/js/@types/cal-heatmap.d.ts

@@ -0,0 +1,4 @@
+// なんか @types/cal-heatmap 入れても動かなかったんですけど!!
+declare module 'cal-heatmap' {
+    export = CalHeatMap;
+}

resources/assets/js/@types/jquery-bootstrap.d.ts

@@ -0,0 +1,4 @@
+// @types/bootstrap に足りないもの
+interface JQuery<TElement = HTMLElement> {
+    modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose", relatedTarget?: TElement): this;
+}

resources/assets/js/@types/jquery-tissue.d.ts

@@ -0,0 +1,12 @@
+// tissue.ts で定義されているjQuery Pluginの型定義
+declare namespace JQueryTissue {
+    interface LinkCardOptions {
+        endpoint: string;
+    }
+}
+
+interface JQuery<TElement = HTMLElement> {
+    linkCard: (options?: JQueryTissue.LinkCardOptions) => this;
+    pageSelector: () => this;
+    deleteCheckinModal: () => this;
+}

resources/assets/js/app.ts

@@ -1,4 +1,5 @@
-import Cookies from 'js-cookie';
+import * as Cookies from 'js-cookie';
+import jqXHR = JQuery.jqXHR;
 
 require('./bootstrap');
 
@@ -40,7 +41,7 @@ $(() => {
         const isLiked = $this.data('liked');
 
         if (isLiked) {
-            const callback = (data) => {
+            const callback = (data: any) => {
                 $this.data('liked', false);
                 $this.find('.oi-heart').removeClass('text-danger');
 
@@ -54,7 +55,7 @@ $(() => {
                 type: 'json'
             })
                 .then(callback)
-                .catch(function (xhr) {
+                .catch(function (xhr: jqXHR) {
                     if (xhr.status === 404) {
                         callback(JSON.parse(xhr.responseText));
                         return;
@@ -64,7 +65,7 @@ $(() => {
                     alert('いいねを解除できませんでした。');
                 });
         } else {
-            const callback = (data) => {
+            const callback = (data: any) => {
                 $this.data('liked', true);
                 $this.find('.oi-heart').addClass('text-danger');
 
@@ -81,7 +82,7 @@ $(() => {
                 }
             })
                 .then(callback)
-                .catch(function (xhr) {
+                .catch(function (xhr: jqXHR) {
                     if (xhr.status === 409) {
                         callback(JSON.parse(xhr.responseText));
                         return;

resources/assets/js/bootstrap.ts

@@ -2,16 +2,16 @@
 import './tissue';
 
 // Setup global request header
-const token = document.head.querySelector('meta[name="csrf-token"]');
+const token = document.head.querySelector<HTMLMetaElement>('meta[name="csrf-token"]');
 if (!token) {
     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+} else {
+    $.ajaxSetup({
+        headers: {
+            'X-CSRF-TOKEN': token.content
+        }
+    });
 }
 
-$.ajaxSetup({
-    headers: {
-        'X-CSRF-TOKEN': token.content
-    }
-});
-
 // Bootstrap
 import 'bootstrap';

resources/assets/js/home.ts

@@ -1,10 +1,10 @@
-import Chart from 'chart.js';
+import * as Chart from 'chart.js';
 
-const graph = document.getElementById('global-count-graph');
-const labels = JSON.parse(document.getElementById('global-count-labels').textContent);
-const data = JSON.parse(document.getElementById('global-count-data').textContent);
+const graph = document.getElementById('global-count-graph') as HTMLCanvasElement;
+const labels = JSON.parse(document.getElementById('global-count-labels')!.textContent as string);
+const data = JSON.parse(document.getElementById('global-count-data')!.textContent as string);
 
-new Chart(graph.getContext('2d'), {
+new Chart(graph.getContext('2d')!, {
     type: 'bar',
     data: {
         labels,

resources/assets/js/tissue.ts

@@ -1,12 +1,12 @@
 (function ($) {
 
     $.fn.linkCard = function (options) {
-        var settings = $.extend({
+        const settings = $.extend({
             endpoint: '/api/checkin/card'
         }, options);
 
         return this.each(function () {
-            var $this = $(this);
+            const $this = $(this);
             $.ajax({
                 url: settings.endpoint,
                 method: 'get',
@@ -15,11 +15,11 @@
                     url: $this.find('a').attr('href')
                 }
             }).then(function (data) {
-                var $metaColumn = $this.find('.col-12:last-of-type');
-                var $imageColumn = $this.find('.col-12:first-of-type');
-                var $title = $this.find('.card-title');
-                var $desc = $this.find('.card-text');
-                var $image = $imageColumn.find('img');
+                const $metaColumn = $this.find('.col-12:last-of-type');
+                const $imageColumn = $this.find('.col-12:first-of-type');
+                const $title = $this.find('.card-title');
+                const $desc = $this.find('.card-text');
+                const $image = $imageColumn.find('img');
 
                 if (data.title === '') {
                     $title.hide();
@@ -56,17 +56,17 @@
     $.fn.deleteCheckinModal = function () {
         return this.each(function () {
             $(this).on('show.bs.modal', function (event) {
-                var target = $(event.relatedTarget);
-                var modal = $(this);
+                const target = $(event.relatedTarget!);
+                const modal = $(this);
                 modal.find('.modal-body .date-label').text(target.data('date'));
                 modal.data('id', target.data('id'));
             }).find('.btn-danger').on('click', function (event) {
-                var modal = $('#deleteCheckinModal');
-                var form = modal.find('form');
-                form.attr('action', form.attr('action').replace('@', modal.data('id')));
+                const modal = $('#deleteCheckinModal');
+                const form = modal.find('form');
+                form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
                 form.submit();
             })
         });
     };
 
-})(jQuery);
+})(jQuery);

resources/assets/js/user/profile.ts

@@ -1,4 +1,5 @@
-import CalHeatMap from 'cal-heatmap';
+import * as CalHeatMap from 'cal-heatmap';
+import {subMonths} from 'date-fns';
 
 if (document.getElementById('cal-heatmap')) {
     new CalHeatMap().init({
@@ -7,9 +8,9 @@ if (document.getElementById('cal-heatmap')) {
         subDomain: 'day',
         domainLabelFormat: '%Y/%m',
         weekStartOnMonday: false,
-        start: new Date().setMonth(new Date().getMonth() - 9),
+        start: subMonths(new Date(), 9),
         range: 10,
-        data: JSON.parse(document.getElementById('count-by-day').textContent),
+        data: JSON.parse(document.getElementById('count-by-day')!.textContent as string),
         legend: [1, 2, 3, 4]
     });
 }

resources/assets/js/user/stats.ts

@@ -1,12 +1,12 @@
-import CalHeatMap from 'cal-heatmap';
-import Chart from 'chart.js';
+import * as CalHeatMap from 'cal-heatmap';
+import * as Chart from 'chart.js';
 import {addMonths, format} from 'date-fns';
 
-const graphData = JSON.parse(document.getElementById('graph-data').textContent);
+const graphData = JSON.parse(document.getElementById('graph-data')!.textContent as string);
 
-function createLineGraph(id, labels, data) {
-    const context = document.getElementById(id).getContext('2d');
-    return new Chart(context, {
+function createLineGraph(id: string, labels: string[], data: any) {
+    const context = (document.getElementById(id) as HTMLCanvasElement).getContext('2d');
+    return new Chart(context!, {
         type: 'line',
         data: {
             labels: labels,
@@ -41,9 +41,9 @@ function createLineGraph(id, labels, data) {
     });
 }
 
-function createBarGraph(id, labels, data) {
-    const context = document.getElementById(id).getContext('2d');
-    new Chart(context, {
+function createBarGraph(id: string, labels: string[], data: any) {
+    const context = (document.getElementById(id) as HTMLCanvasElement).getContext('2d');
+    new Chart(context!, {
         type: 'bar',
         data: {
             labels: labels,
@@ -73,10 +73,7 @@ function createBarGraph(id, labels, data) {
     });
 }
 
-/**
- * @param {Date} from
- */
-function createMonthlyGraphData(from) {
+function createMonthlyGraphData(from: Date) {
     const keys = [];
     const values = [];
 
@@ -90,9 +87,13 @@ function createMonthlyGraphData(from) {
     return {keys, values};
 }
 
-function getCurrentYear() {
-    const year = location.pathname.split('/').pop();
-    return /^(20[0-9]{2})$/.test(year) ? year : null;
+function getCurrentYear(): number {
+    const year = location.pathname.split('/').pop() || '';
+    if (/^(20[0-9]{2})$/.test(year)) {
+        return parseInt(year, 10);
+    } else {
+        throw 'Invalid year';
+    }
 }
 
 if (document.getElementById('cal-heatmap')) {