如何在TypeScript中为Twilio全局JS库创建环境声明? [英] How to create ambient declarations for Twilio global JS library in TypeScript?

问题描述

我在我的应用程序上使用 Twilio.js 库(不是Twilio Node)，并且该库没有模块或类型.一个只能使用的Twilio全局变量.

可以避免IDE中发生错误的最简单的环境声明是这样的:

declare const Twilio: any;

但是，我想进一步介绍一下，为此，我一直在阅读TypeScript手册和其他一些资源.我特别注意了此链接.

这是我到目前为止所拥有的:

declare const Twilio: Twilio.Base;

declare namespace Twilio {

    export interface Base {
        Device: Device;
    }

    export interface Device {
        ready(handler: DeviceCallback): void;
    }

    export interface DeviceCallback {
        (device: Device): void;
    }

}

这是可行的，但这只是一个示例，还不完整.例如，现在就足够了:)

但是我的问题是三个方面:

1. 鉴于上面的简短示例，您会做其他不同的事情吗?
2. 如果我从所有接口中删除export关键字，它仍然有效.我还应该离开吗?它是做什么的?

3. 鉴于用法Twilio.Device.ready(this.handleTwilioDeviceReady.bind(this));，将鼠标悬停在IDE上时，IDE提供以下内容:

   • Twilio:const Twilio: Twilio.Base
   • Twilio.Device:(property) Twilio.Base.Device: Twilio.Device

   • Twilio.Device.ready:(method) Twilio.Device.ready(handler: Twilio.DeviceCallback): void

   • 如何摆脱在IDE中显示的Twilio.Base，而是显示:

     • Twilio:const Twilio: Twilio
     • Twilio.Device:(property) Twilio.Device: Twilio.Device

解决方案

我看过了API，我认为以下应该作为环境声明文件的一个很好的起点.

declare namespace Twilio {

    class Connection {
        // Constructor does not appear to be available to user.
        private constructor();
        // Add Connection Methods and Properties Here
    }

    // Not immediately clear if Twilio.Device is a class or not.
    interface IDevice {
        setup(token, options);
        ready(handler);
        offline(handler);
        incoming(handler);
        connect(params) : Connection;
        // Add Remainder of Twilio.Device properties here.
    }

    /**
     * Twilio.Device appears to be a singleton object that 
     * you don't instantiate yourself. You can use
     * the below to declare its presence.
     */
    let Device : IDevice;
}

更多注意事项:

declare const Twilio: Twilio.Base;

以下命名空间声明使此操作变得多余，它的作用是声明一个普通的旧JS对象的存在，该对象具有您声明的名称和成员.

声明环境类/命名空间时，

导出不会显示具有任何功能.仅在声明带有默认导出成员的模块时，或者在编写TS文件并且需要声明哪些类和接口可以公开访问时，才有必要.

Device.Ready的回调类型

IDevice具有ready方法，该方法接受传递了IDevice对象的函数参数，并且不希望返回任何内容.此类函数的类型签名为:

(device : IDevice) => void;

内联声明为:

ready((device : IDevice) => void) : void;

鉴于您将重复使用此回调类型几次，应创建一个Twilio.js library on my application (not Twilio Node) and there's no module nor typings for this library available. There's only a Twilio global variable available that one can use.

The simplest ambient declaration one can have to avoid errors in the IDE is this:

declare const Twilio: any;

But I want to go a little bit further and for that I've been reading TypeScript handbook and few other resources. I've taken especially attention to this link.

And here's what I have so far:

declare const Twilio: Twilio.Base;

declare namespace Twilio {

    export interface Base {
        Device: Device;
    }

    export interface Device {
        ready(handler: DeviceCallback): void;
    }

    export interface DeviceCallback {
        (device: Device): void;
    }

}

This is working, but it's just a sample, it's not complete. As an example, it suffices for now :)

But my question is three-fold:

1. Given the short sample above, would you do anything differently?
2. If I remove the export keyword from all interfaces, it still works. Should I still leave it? What does it do?

3. Given the usage Twilio.Device.ready(this.handleTwilioDeviceReady.bind(this));, IDEs give me the following when hovering my mouse over:

   • Twilio: const Twilio: Twilio.Base
   • Twilio.Device: (property) Twilio.Base.Device: Twilio.Device

   • Twilio.Device.ready: (method) Twilio.Device.ready(handler: Twilio.DeviceCallback): void

   • How can I get rid of Twilio.Base showing up in the IDE and instead show:

     • Twilio: const Twilio: Twilio
     • Twilio.Device: (property) Twilio.Device: Twilio.Device

解决方案

I've taken a look at the API and I think the below should be a good starting point as an ambient declaration file.

declare namespace Twilio {

    class Connection {
        // Constructor does not appear to be available to user.
        private constructor();
        // Add Connection Methods and Properties Here
    }

    // Not immediately clear if Twilio.Device is a class or not.
    interface IDevice {
        setup(token, options);
        ready(handler);
        offline(handler);
        incoming(handler);
        connect(params) : Connection;
        // Add Remainder of Twilio.Device properties here.
    }

    /**
     * Twilio.Device appears to be a singleton object that 
     * you don't instantiate yourself. You can use
     * the below to declare its presence.
     */
    let Device : IDevice;
}

A few more notes:

declare const Twilio: Twilio.Base;

This is made redundant by the following namespace declaration, which has the effect of declaring the presence of a plain old JS object with the name and members you've declared.

Export doesn't appear to have any function when declaring ambient classes/namespaces. It's only necessary if you're declaring a module with a default export member, or if you're writing a TS file and need to declare which classes and interfaces will be publicly accessible.

EDIT : Callback Type for Device.Ready

IDevice has the ready method, which accepts an function argument that's passed an IDevice object, and isn't expected to return anything. The type signature for such a function is:

(device : IDevice) => void;

An inline declaration would be:

ready((device : IDevice) => void) : void;

Given that you're going to reuse this callback type a few times, you should create a type alias and then refer to it like so:

type DeviceCallback = (device : IDevice) => void;

interface IDevice {
    ...
    ready(handler: DeviceCallback) : void;
    offline(handler : DeviceCallback) : void;
    ...
}

这篇关于如何在TypeScript中为Twilio全局JS库创建环境声明?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！