將本地類型用於npm軟件包，而不將其發布到@types

Question

我想使用這個npm包（ https://www.npmjs.com/package/react-web-notification ），所以我在node_modules / @ types / react-web-notification文件夾中創建了一個index.d.ts文件：

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

一切正常。 但顯然我不想將其保留在那里，因為它被忽略了。 我不想將其發布到@types github存儲庫，因為克隆該存儲庫需要花費很多時間。

所以我嘗試在我的react app src文件夾中本地使用它：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

然后在我的應用中：

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}
                    />

但是現在我得到一個錯誤：無法構造“通知”：請使用“ new”運算符，該DOM對象構造函數不能作為函數調用。

為什么它在@types文件夾中而不是現在不起作用？

Answer 1

因此，這是為未類型化的模塊提供類型的方法。 添加具有以下內容的文件，並將其包含在項目文件中：

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;
}

注意模塊聲明。

旁注-您可以將聲明貢獻到https://github.com/DefinitelyTyped/DefinitelyTyped ，一旦發布，您就可以以“常規”方式使用它們