Merge pull request #755 from DanielNoord/typescript

Prepared partial move to TypeScript

.eslintrc.js

@@ -15,12 +15,24 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 12,
   },
+  plugins: ['@typescript-eslint'],
+  overrides: [
+    {
+      files: ['src/**/*.{ts,tsx}'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      rules: {
+        'import/extensions': 'off', // To allow importing .ts without errors
+        'import/no-unresolved': 'off', // To allow importing .ts without errors
+      },
+    },
+  ],
   ignorePatterns: ['*CookieMonster*.js', 'dist/*', 'node_modules/*'],
   rules: {
-    'import/no-mutable-exports': 'off',
+    'import/no-mutable-exports': 'off', // We need to this throughout Cookie Monster
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
-    'func-names': 'off',
-    'prefer-destructuring': ['error', { object: true, array: false }],
+    'func-names': 'off', // To allow unnamed arrow functions
+    'prefer-destructuring': ['error', { object: true, array: false }], // Importing arrays and then destructuring them seems to fail
     'max-len': [
       1,
       {

package.json

@@ -44,13 +44,17 @@
     },
     "homepage": "https://github.com/Aktanusa/CookieMonster#readme",
     "devDependencies": {
-        "eslint": "^7.19.0",
+        "@typescript-eslint/eslint-plugin": "^4.21.0",
+        "@typescript-eslint/parser": "^4.21.0",
+        "eslint": "^7.23.0",
         "eslint-config-airbnb-base": "^14.2.1",
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-prettier": "^3.3.1",
         "npm-run-all": "^4.1.5",
         "prettier": "2.2.1",
+        "ts-loader": "^8.1.0",
+        "typescript": "^4.2.3",
         "webpack": "^5.24.4",
         "webpack-cli": "^4.5.0"
     },

src/Data/SettingClasses.js

@@ -1,53 +0,0 @@
-/* eslint-disable max-classes-per-file */
-/** This describes all forms of settings used by Cookie Monster */
-
-/** The basic setting class */
-export class Setting {
-  constructor(type, group) {
-    this.type = type;
-    this.group = group;
-  }
-}
-
-/** The standard toggle setting class */
-export class SettingStandard extends Setting {
-  constructor(type, group, label, desc, toggle, func = null) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    this.toggle = toggle;
-    if (func) {
-      this.func = func;
-    }
-  }
-}
-/** The colour picker setting class */
-export class SettingColours extends Setting {
-  constructor(type, group, desc) {
-    super(type, group);
-    this.desc = desc;
-  }
-}
-
-/** The volume level setting class */
-export class SettingVolume extends Setting {
-  constructor(type, group, label, desc) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    for (let i = 0; i < 101; i++) {
-      this.label[i] = `${i}%`;
-    }
-  }
-}
-
-/** The number input setting class */
-export class SettingInputNumber extends Setting {
-  constructor(type, group, label, desc, min, max) {
-    super(type, group);
-    this.label = label;
-    this.desc = desc;
-    this.min = min;
-    this.max = max;
-  }
-}

src/Data/SettingClasses/BaseSetting.ts

@@ -0,0 +1,11 @@
+/** The basic setting class */
+export default class Setting {
+  type: string;
+
+  group: string;
+
+  constructor(type: string, group: string) {
+    this.type = type;
+    this.group = group;
+  }
+}

src/Data/SettingClasses/SettingColours.ts

@@ -0,0 +1,11 @@
+import Setting from './BaseSetting';
+
+/** The colour picker setting class */
+export default class SettingColours extends Setting {
+  desc: string;
+
+  constructor(type: string, group: string, desc: string) {
+    super(type, group);
+    this.desc = desc;
+  }
+}

src/Data/SettingClasses/SettingInputNumber.ts

@@ -0,0 +1,27 @@
+import Setting from './BaseSetting';
+
+/** The number input setting class */
+export default class SettingInputNumber extends Setting {
+  label: string[];
+
+  desc: string;
+
+  min: number;
+
+  max: number;
+
+  constructor(
+    type: string,
+    group: string,
+    label: string[],
+    desc: string,
+    min: number,
+    max: number,
+  ) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    this.min = min;
+    this.max = max;
+  }
+}

src/Data/SettingClasses/SettingStandard.ts

@@ -0,0 +1,29 @@
+import Setting from './BaseSetting';
+
+/** The standard toggle setting class */
+export default class SettingStandard extends Setting {
+  label: string[];
+
+  desc: string;
+
+  toggle: boolean;
+
+  func: () => void;
+
+  constructor(
+    type: string,
+    group: string,
+    label: string[],
+    desc: string,
+    toggle: boolean,
+    func?: () => void,
+  ) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    this.toggle = toggle;
+    if (func !== undefined) {
+      this.func = func;
+    }
+  }
+}

src/Data/SettingClasses/SettingVolume.ts

@@ -0,0 +1,17 @@
+import Setting from './BaseSetting';
+
+/** The volume level setting class */
+export default class SettingVolume extends Setting {
+  label: string[];
+
+  desc: string;
+
+  constructor(type: string, group: string, label: string[], desc: string) {
+    super(type, group);
+    this.label = label;
+    this.desc = desc;
+    for (let i = 0; i < 101; i++) {
+      this.label[i] = `${i}%`;
+    }
+  }
+}

src/Data/SettingsData.js

@@ -14,12 +14,10 @@ import UpdateUpgrades from '../Disp/BuildingsUpgrades/Upgrades';
 import RefreshScale from '../Disp/HelperFunctions/RefreshScale';
 import { UpdateFavicon } from '../Disp/TabTitle/FavIcon';
 import { SimDoSims } from '../Sim/VariablesAndData';
-import {
-  SettingStandard,
-  SettingColours,
-  SettingVolume,
-  SettingInputNumber,
-} from './SettingClasses';
+import SettingColours from './SettingClasses/SettingColours.ts';
+import SettingInputNumber from './SettingClasses/SettingInputNumber.ts';
+import SettingStandard from './SettingClasses/SettingStandard.ts';
+import SettingVolume from './SettingClasses/SettingVolume.ts';
 
 /** This includes all options of CookieMonster and their relevant data */
 const Config = {
@@ -529,7 +527,7 @@ const Config = {
     'Statistics',
     ['Missing Achievements OFF', 'Missing Normal Achievements ON'],
     'Shows missing normal achievements in statistics menu.',
-    false,
+    true,
   ),
   UpStats: new SettingStandard(
     'bool',

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "module": "ES2020",
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "target": "ES6",
+    "strictNullChecks": true,
+  }
+}

webpack.config.js

@@ -7,11 +7,18 @@ module.exports = function (env) {
     optimization: {
       minimize: !!env.production,
     },
-    entry: {
-      CookieMonster: {
-        import: './src/CookieMonster.js',
-        filename: './CookieMonster.js',
-      },
+    entry: './src/CookieMonster.js',
+    resolve: {
+      extensions: ['.ts', '.js'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
     },
     output: {
       filename: 'CookieMonster.js',