Typescript typings

[organic-scholar]

Describe the bug
Typescript is unable to recognize typings in present in the package.

To Reproduce
in app.ts
import TomSelect from 'tom-select

Expected behavior
It should be able to resolve type completions.

[oyejorge]

Could you provide some more context?

[oyejorge]

Haven't heard anything back so I'm gonna close this. If it does still need to be fixed, we can open the issue back up when we have more information.

[chapterjason]

@oyejorge We face the same issue. We want only use the typings, but we actually can only use the src which creates some errors if our requirement on browsers is different and not esnext and even then we're getting errors.

In the package.json the types property should be ./dist/types/tom-select.d.ts (I think that will be the output? It is not checked in.)

Same for https://github.com/orchidjs/sifter.js

I tried a bit here is a patch:

diff --git a/.config/tsconfig.types.json b/.config/tsconfig.types.json
new file mode 100644
index 00000000..7f05c65c
--- /dev/null
+++ b/.config/tsconfig.types.json
@@ -0,0 +1,17 @@
+{
+	"include": ["../src/**/*"],
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"strict": true,
+		"target": "esnext",
+		"module": "esnext",
+		"noUnusedLocals": true,
+
+		"declaration": true,
+		"declarationDir": "../dist/types",
+		"emitDeclarationOnly": true,
+		"isolatedModules": true,
+		"moduleResolution": "node"
+	},
+}
diff --git a/Gruntfile.js b/Gruntfile.js
index 7f904d4d..01c7e9a5 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -23,6 +23,7 @@ module.exports = function(grunt) {
 		'clean:library',
 
 		'shell:buildjs',
+		'shell:buildtypes',
 
 		'copy:scss',
 		'copy:scss_plugins',
@@ -299,6 +300,9 @@ module.exports = function(grunt) {
 			buildjs: {
 				command: 'npx rollup -c .config/rollup.config.js',
 			},
+			buildtypes: {
+				command: 'npx tsc --build .config/tsconfig.types.json',
+			},
 		},
 
 		watch: {
diff --git a/package.json b/package.json
index 4dad6aa2..1584c5ee 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   "main": "dist/js/tom-select.complete.js",
   "browser": "dist/js/tom-select.complete.js",
   "module": "dist/esm/tom-select.complete.js",
-  "types": "src/tom-select.complete.ts",
+  "types": "dist/types/tom-select.complete.d.ts",
   "description": "Tom Select is a versatile and dynamic <select> UI control. Forked from Selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, etc.",
   "homepage": "https://tom-select.js.org",
   "version": "1.7.6",
@@ -87,6 +87,7 @@
   },
   "scripts": {
     "build": "grunt build",
+    "build:types": "tsc --build ./.config/tsconfig.types.json",
     "test": "karma start",
     "test:one": "karma start --test_one",
     "test:typescript": "tsc -p .config --noemit",

[oyejorge]

This is very similar to a setup a tried earlier. However, I ran into a problem where it didn't emit the types already defined in /src/types.

However, I may have just found the missing piece.

[oyejorge]

Ok, should be fixed with 1.7.7

[marceloverdijk]

I'm trying to use the TypeScript typings as well, but I'm a bit stuck.

I have some external js theme that automatically creates TomSelect instances so that is fine.

But in some project related ts file I want to access this TomSelect instance like:

const $countryTomSelect = $('#country-filter')[0]!!.tomselect

and then attach e.g.:

$countryTomSelect.on('change', () => applyFilters())

this works, but it does not recognise the tomSelect... resulting in:
Property 'tomselect' does not exist on type 'HTMLElement'.

Is there something I could to use TomSelect typings this way?

====

I for example also use Bootstrap-Table and there I have typings.
e.g.:

import type { BootstrapTableOptions } from 'bootstrap-table'

const tableOptions: BootstrapTableOptions = { .. }
$('#table').bootstrapTable(tableOptions)

here it recognises the bootstrapTable method and typings work