Typescript

[kgish]

Are there any plans to make kaboom typescript enabled using the official @types definitions?

Seems that I still cannot get my IDE to detect the proper code completion for kaboom, whereas it works fine for all other libraries.

[kgish]

I see that nothing in types.ts is exported, could that be the problem?

For example, it is not possible to use the KaboomCtx interface like this:

import kaboom from 'kaboom';

export const k: KaboomCtx = kaboom({...});

export default k;

[slmjkdbtl]

script/build.js will generate dist/kaboom.d.ts that exports also global functions. What editor are you using? npm install kaboom@next should gives autocomplete and types on vscode, haven't tried other editors tho

[kgish]

I use IntelliJ, let me look deeper ...

[kgish]

This is the Typescript error I am getting:

TS2614: Module '"kaboom"' has no exported member 'KaboomCtx'. Did you mean to use 'import KaboomCtx from "kaboom"' instead?

[kgish]

If I add the line:

import KaboomCtx from "kaboom";

I get the following error for export const k: KaboomCtx = kaboom()

TS2749: 'KaboomCtx' refers to a value, but is being used as a type here. Did you mean 'typeof KaboomCtx'?

[slmjkdbtl]

Very weird. I'll download IntelliJ later myself to see what's going on (if other npm packages works there kaboom should too)

[kgish]

Here's my setup:

package.json

{
  "name": "kaboom-demo",
  "version": "0.0.1",
  "description": "Kaboom.js demo",
  "repository": {
    "type": "git",
    "url": "https://github.com/kgish/kaboom-demo.git"
  },
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build dist",
    "lint": "eslint . --ext .ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kiffin Gish <kiffin.gish@planet.nl> (https://github.com/kgish)",
  "license": "MIT",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.0-beta.2",
    "@typescript-eslint/eslint-plugin": "^4.28.1",
    "@typescript-eslint/parser": "^4.28.1",
    "eslint": "^7.29.0",
    "eslint-plugin-no-loops": "^0.3.0",
    "parcel": "^2.0.0-beta.2",
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-clean-easy": "^1.0.2",
    "parcel-plugin-static-files-copy": "^2.6.0",
    "typescript": "^4.3.4"
  },
  "dependencies": {
    "kaboom": "^2000.0.0-beta.22"
  },
  "alias": {
    "kaboom": "./node_modules/kaboom/dist/kaboom.mjs"
  },
  "parcelCleanPaths": [
    "dist"
  ],
  "staticFiles": {
    "staticPath": "public",
    "watcherGlob": "**"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./src",
    "paths": {
      "~*": [
        "./*"
      ]
    },
  },
  "files": [
    "src/types/global.d.ts"
  ],
  "include": [
    "src/**/*"
  ]
}

.eslintrc

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "no-loops"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
   "rules": {
     "semi": [2, "always"]
  }
}

See: https://github.com/kgish/kaboom-demo