Ambient Typings

[ghost]

Category

[ ] Enhancement

[ ] Bug

[x] Question

Hi,

Is there a way to get ambient/global typings? If pnp used without a module system, the typings under https://github.com/SharePoint/PnP-JS-Core/blob/master/dist/pnp.d.ts

I'd like to untegrate pnp globally in a page and compile simple ts-parts without an module system. These parts expect the window variable $pnp (https://github.com/SharePoint/PnP-JS-Core/blob/master/dist/pnp.js#L17) but to compile these parts I need the ambient typing to not have to do something like the following in my own typings.d.ts:

// what i have to define now:
declare var $pnp:any:

// what i want to be able to define:
declare var $pnp: PnpStatic // or something like that.

I tried to generate new typings out of the source of PnP-JS-Core ex. with dts-gen (https://github.com/Microsoft/dts-gen) like the following with no success:

npm install -g dts-gen
npm install -g sp-pnp-js
dts-gen -m sp-pnp-js

Result: Couldn't load module "sp-pnp-js". Please install it globally (npm install -g sp-pnp-js) and try again.

Some suggestions?

Thanks!

[patrick-rodgers]

How are you doing your development? VS Code, visual studio? How are you packaging your libraries?

[ghost]

Just gulp with gulp-typescript and the following tsconfig:

{
    "compilerOptions": {
        "module": "none",
        "target": "es5",
        "pretty": true,
        "allowSyntheticDefaultImports": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noEmitOnError": true,
        "noImplicitAny": true,
        "sourceMap": true,
        "strictNullChecks": true
    },
    "exclude": [
        "node_modules/**/*"
    ],
    "compileOnSave": false,
    "buildOnSave": false,
    "types": [
        "angular",
        "jquery",
        "lodash"
    ]
}

In the files we use namespaces and links like this /// <reference path="library.model.ts"/>.

[patrick-rodgers]

Ref #88 as well for this investigation.

Ref this thread as well.

[patrick-rodgers]

Ok, think I have a potential solution here. In your project create a new file called "pnp-global-shim.d.ts" and add the below content and save. You'll need the pnp.d.ts to be in the same folder.

/// <reference path="pnp.d.ts" />
export * from "pnp";
export as namespace $pnp;

Then in your project this now appears to work:

/// <reference path="pnp-global-shim.d.ts" />

$pnp.Logger.subscribe(new $pnp.ConsoleListener());
$pnp.Logger.activeLogLevel = $pnp.LogLevel.Info;

$pnp.sp.web.get().then(w => {
    $pnp.Logger.write(JSON.stringify(w));
});

I get the intellisense and I have left the module definition to none. @koltyakov this should work for you as well. Please try that out and if it works we can add that to the build/output process so it will be included in the dist folder moving forward.

[koltyakov]

After a quick try, I can confirm that intellisense for $pnp start working (in VSC) with this approach.
But is it possible to use types and interfaces too? E.g., define a Web typed variable.

[patrick-rodgers]

This should work for you, either of these lines:

let j: $pnp.Web;

let k = new $pnp.Web("My Url");

[patrick-rodgers]

I have also created a wiki page with these details and will include the shim file in future releases.

[ghost]

Thank you!