svelte-fsm icon indicating copy to clipboard operation
svelte-fsm copied to clipboard

Cannot Call debounce on this keyword in TypeScript

Open amorfati254 opened this issue 1 year ago • 1 comments


const progress = tweened(0, { easing: cubicOut });
	const state = fsm('loaded', {
		loaded: {
			load: 'preloading'
		},
		preloading: {
			_enter() {
				progress.set(0, { duration: 0 });
				this.advance.debounce(250);
			},
			advance: 'loading',
			complete: 'loaded'
		},
		loading: {
			_enter() {
				progress.set(80, { duration: 5000 });
			},
			_exit() {
				progress.set(100, { duration: 1000 });
			},
			complete: 'loaded'
		}
	});

this.advance.debounce shows TS error debounce does not exist on type string

amorfati254 avatar Mar 13 '23 09:03 amorfati254

I can confirm the same thing. Debounce in the context recommended by documentation is throwing a type error, because this.* is always returning a string.

Its probably related to https://github.com/kenkunz/svelte-fsm/issues/6

Also, I looked at the source code and conclude that debounce is late binding?

By making a Typescript type assertion, I was able to satisfy the ts check.

interface SetWithDebounce {
    debounce: (delay: number) => void;
} 

.....

 updatingHost: {
            _enter() {
                SourceOfChange.set('ui');
                (this.set as unknown as SetWithDebounce).debounce(1)
            },
            set: 'ready'
        }
        
    

cristianvogel avatar Feb 13 '24 14:02 cristianvogel