Skip to content
This repository was archived by the owner on Nov 9, 2024. It is now read-only.

Conversation

@atomiks
Copy link
Owner

@atomiks atomiks commented Oct 12, 2019

Fixes #134

This ignores [key: string]: any from Props interface, allowing autocomplete and type validation to actually work in this package. (It works fine in tippy.js core [autocomplete & types validation works] but not when extended here, idk why I'm not good with TS)


Then we need to add back in the index signature for each of the extended interfaces so plugin props don't error (without needing to make your own type).

To make your own type for plugin props like followCursor which don't exist on Props, you need to make your own function type, like this, I think:

import Tippy, {TippyProps} from '@tippy.js/react';
import {followCursor, FollowCursorProps} from 'tippy.js';

const TippyExtended: React.FC<TippyProps & FollowCursorProps> = ({
 plugins,
 ...props
}) => <Tippy plugins={[followCursor, ...(plugins || [])]} {...props} />;

BUT since we're adding [key: string]: any to each of the extended interfaces, you don't need it just like in tippy.js - you just won't get autocompletion & type validation. So it's backwards-compatible with 3.0.0 and 3.0.1.


TL;DR

  • Extending an interface with [key: string]: any breaks autocomplete & type validation for all the known/declared types, so we need to only extend the KnownProps version of it
  • We need to add back [key: string]: any to the extended interfaces to prevent unknown props (e.g. for plugins) from erroring. The user can create strict types for plugin props if they wish to. If they pass an unknown prop, there's a runtime DEV warning telling them that, instread of compile time TS warning (for JS users).
  • This needs to be done for all TippyProps, TippySingletonProps, and UseSingletonProps interfaces.

@atomiks atomiks merged commit 7eb1c8e into master Oct 12, 2019
@atomiks atomiks deleted the fix-ts-support branch October 12, 2019 01:06
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Typescript support

2 participants