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

Conversation

@DogPawHat
Copy link

Behavior of preloadScript.js

// at line 47
render() {
// destructure out the props used by the HOC
const { opentokClientUrl, loadingDelegate, ...restProps } = this.props;
  if (this.state.scriptLoaded) {
    return <InnerComponent {...restProps} />;
  }

  return loadingDelegate;
}

// at Line 59
PreloadScript.propTypes = {
  opentokClientUrl: PropTypes.string,
  loadingDelegate: PropTypes.node,
};

Expected Typescript Behavior

The HOC take in a InnerComponent and outputs a new Components with it's own propTypes but also passes on any props not used by itself to the InnerComponent. Props outside of PreloadScriptProps / PreloadScript.propTypes should therefore comply with the InnerCompoents prop type validation as well as preloadScripts Prop types.

Actual Typescript Behavior

Passing in props besides PreloadScriptProps will trigger a type checking error, contrary to the behavior allowed in vanilla JS. You therefore can't pass down props to InnerComponent in TS despite the JS code doing that

Remedy

Update the typing declarations for preloadScript to use generics to allow props to be passed down to InnerComponent

The `preloadScript` HOC passes down props other than described in `PreloadScriptProps` down to child components. Adds generics to reflect this behavior.
@mheap mheap changed the base branch from master to main March 22, 2021 09:50
@nspilman
Copy link

Hi OpenTok team - I'm working on a TypeScript migration on a react codebase and am running into this very issue. Thank you for considering this fix!

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.

2 participants