TypeScript Issue - usually optional script options are required

[giladv]

usually only the client-id is required. but it seems all of the options are required in this package

TS2740: Type '{ 'client-id': string; intent: string; }' is missing the following properties from type
 'Required<InferProps<{ "buyer-country": Requireable<string>; "client-id": Validator<string>; 
commit: Requireable<string | boolean>; components: Requireable<string>; ... 12 more ...; 
vault: Requireable<...>; }>>': "buyer-country", commit, components, currency, and 11 more.
ℹ ｢wdm｣: Failed to compile.

how to reproduce:

1. basic typescript setup

<PayPalScriptProvider options={{ 'client-id': 'some id', intent: 'authorize' }}></PayPalScriptProvider>

[gregjopa]

Hi @giladv we have an open issue for adding types for this library: #30. Once those types are added, it should make it easy to use react-paypal-js with typescript.

What typescript setup are you using? I tried to reproduce using a new create-react-app project using the typescript template. I get the following compile error about missing types:

TypeScript error in /Users/gjopa/projects/my-typescript-app/src/App.tsx(5,53):
Could not find a declaration file for module '@paypal/react-paypal-js'. '/Users/gjopa/projects/my-typescript-app/node_modules/@paypal/react-paypal-js/dist/react-paypal.node.js' implicitly has an 'any' type.
  Try `npm install @types/paypal__react-paypal-js` if it exists or add a new declaration (.d.ts) file containing `declare module '@paypal/react-paypal-js';`  TS7016

    3 | import './App.css';
    4 | import './index.d.ts';
  > 5 | import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
      |                                                     ^
    6 |
    7 | function App() {
    8 |   return (

[giladv]

hi @gregjopa, here is my tsconfig file

{
	"compilerOptions": {
		"target": "es5",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"noImplicitAny": false,
		"skipLibCheck": true,
		"esModuleInterop": true,
		"experimentalDecorators": true,
		"allowSyntheticDefaultImports": true,
		"strict": false,
		"forceConsistentCasingInFileNames": true,
		"module": "esnext",
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"isolatedModules": false,
		"jsx": "react",
		"strictPropertyInitialization": false /*will prevent TS2564 errors from popping for chill sdk*/
	},
	"include": ["src", "typings"]
}

either way, i believe the issue is that typescript fallbacks to proptypes if possible. so the issue is this line because you used propTypes.exact.

[gregjopa]

@giladv thanks for sharing your TypeScript config. I'm still not able to reproduce the error unfortunately.

i believe the issue is that typescript fallbacks to proptypes if possible. so the issue is this line because you used propTypes.exact.

I see what you mean. It sounds like propTypes.exact() doesn't convert nicely to TypeScript for this use case. We chose exact() over shape() because we need to make this options object a required prop that must have the client-id key. All other keys are optional but we want to error when a non-allowed key is used. If seems like if we use shape() then we lose the ability to error when an invalid key is used in the object. Here's the snippet from the prop-types docs that explains the two:

  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  
  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),   

What do you think? Any suggestions on how to fix this prop-types issue?

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!