I want to use this npm package ( https://www.npmjs.com/package/react-web-notification ) so I created a index.d.ts file in node_modules/@types/react-web-notification folder:
import * as React from 'react';
export interface propTypes {
ignore?: bool,
disableActiveWindow?: bool,
askAgain?: bool,
notSupported?: func,
onPermissionGranted?: func,
onPermissionDenied?: func,
onShow?: func,
onClick?: func,
onClose?: func,
onError?: func,
timeout?: number,
title?: string.isRequired,
options?: object,
swRegistration?: object,
};
declare class Notification extends React.Component<propTypes, any> {}
export default Notification
and it worked ok. But obviously I don't want to keep it there because it is ignored. I don't want to publish it to @types github repo because it takes ages to clone that repo.
So I tried to use it locally in my react app src folder: NotificationInterface.tsx:
import * as React from 'react';
interface propTypes {
ignore?: boolean,
disableActiveWindow?: boolean,
askAgain?: boolean,
notSupported?: Function,
onPermissionGranted?: Function,
onPermissionDenied?: Function,
onShow?: Function,
onClick?: Function,
onClose?: Function,
onError?: Function,
timeout?: number,
title?: string,
options?: object,
swRegistration?: object,
}
declare class Notification extends React.Component<propTypes, any> {}
export default Notification
and then in my app:
import Notification from "../NotificationInterface";
...
return (
<main>
<Notification
ignore={this.state.ignore && this.state.title !== ''}
onPermissionGranted={this.handlePermissionGranted}
onPermissionDenied={this.handlePermissionDenied}
onShow={this.handleNotificationOnShow}
onClick={this.handleNotificationOnClick}
onClose={this.handleNotificationOnClose}
onError={this.handleNotificationOnError}
timeout={60000}
title={this.state.title}
options={this.state.options}
/>
But now I got an error: Failed to construct 'Notification': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
Why would it work when it is in @types folder and not now?
So here's how you can provide a typings to untyped module. Add a file with below content and include it in project files:
declare module 'react-web-notification' {
import * as React from 'react';
interface Props {
ignore?: boolean,
disableActiveWindow?: boolean,
askAgain?: boolean,
notSupported?: Function,
onPermissionGranted?: Function,
onPermissionDenied?: Function,
onShow?: Function,
onClick?: Function,
onClose?: Function,
onError?: Function,
timeout?: number,
title: string,
options?: object,
swRegistration?: object,
}
class Notification extends React.Component<Props> {}
export = Notification;
}
Pay attention to module declaration.
Side note - you can contribute the declarations to https://github.com/DefinitelyTyped/DefinitelyTyped and once published you'll be able to consume them in "regular" way
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.