Skip to content
This repository has been archived by the owner on Aug 28, 2024. It is now read-only.

Ambient Typings #330

Closed
ghost opened this issue Feb 22, 2017 · 8 comments
Closed

Ambient Typings #330

ghost opened this issue Feb 22, 2017 · 8 comments

Comments

@ghost
Copy link

ghost commented Feb 22, 2017

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
Copy link
Contributor

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

@ghost
Copy link
Author

ghost commented Feb 22, 2017

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
Copy link
Contributor

patrick-rodgers commented Mar 3, 2017

Ref #88 as well for this investigation.

Ref this thread as well.

@patrick-rodgers
Copy link
Contributor

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
Copy link
Collaborator

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
Copy link
Contributor

This should work for you, either of these lines:

let j: $pnp.Web;

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

@patrick-rodgers
Copy link
Contributor

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

@ghost
Copy link
Author

ghost commented Mar 16, 2017

Thank you!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants