[contribution] Typescript definition

Below is some unpolished work for the typescript definition of this library.

I am not sure how to contribute to the typescript @types npm registry, or how to write it specifically for publishing. Currently, the following code works for my use:

filename: vue-file-import.d.ts

Last updated: September 24, 2020

import Vue from "vue";

declare module "*.vue" {
	import Vue from "vue";
	export default Vue;
}

declare module 'vue/types/vue' {
	// Global properties can be declared
	// on the `VueConstructor` interface

	import VuejsDialog from 'vuejs-dialog';

	interface DialogOptions {
		html?: boolean,
		loader?: boolean,
		reverse?: boolean,
		okText?: string,
		cancelText?: string,
		animation?: ('zoom'|'bounce'|'fade'),
		type?: ('basic'|'soft'|'hard'),
		verification?: string,
		verificationHelp?: string,
		clicksCount?: number,
		backdropClose?: true,
		customClass?: string
	}

         interface DialogResult {
		close?: ()=>void,
		loading?: ()=>void,
		node?: DOMElement,
		data?: any
	}

	interface Vue {
		$dialog: {
			alert(message: string, options?: DialogOptions): DialogResult
			confirm(message: string, options?: DialogOptions): DialogResult
		},

	}
}

Dumping a set of resources here for providing typescript definitions:

https://www.detroitlabs.com/blog/2018/02/28/adding-custom-type-definitions-to-a-third-party-library/

[Godofbrowser]

Thank you @darrensapalo. I will look at this soon. Really appreciate the time and effort.

[darrensapalo]

Im not sure if Promise<Record<string, unknown>> is the best return type here? Let me know if not and i’ll update the post.

After corresponding with @ghard1961 briefly about his issue above, it appears that Promise<Record<string, unknown>> is not the appropriate return type there. His screenshot revealed to me that its an object that has close, loading, and data variables in it. Reading through the readme, the return type of the promise is a dialog result object which has the following property/functions:

// Whenever a user clicks on proceed,
// the promise returned by the dialog call will be
// resolved with a dialog object with the following shape:

{
    close: function | sometimes | A method that can be used to close the dialog if it's in a loading state
    loading: function | sometimes | A method that can be used to stop the dialog loader
    node: DOMElement | sometimes | A DOM element which the directive was bound to, when triggered via a directive
    data: any | always | Data sent with the positive action. Useful in prompts or custom components where you have multiple proceed buttons
}

So Instead of using Promise<Record<string, unknown>>, I think it would be appropriate to add a DialogResult interface on the vue.d.ts file, as defined by the specs in the readme:

    interface DialogResult {
		close?: ()=>void,
		loading?: ()=>void,
		node?: DOMElement,
		data?: any
	}

Please see first post for updated example.