Here’s a comprehensive article compiling all the information about adding PnPjs to your SharePoint Framework (SPFx) project, checking TypeScript versions, and official documentation links for further study.

Comprehensive Guide to Adding PnPjs to SharePoint Framework (SPFx)

Introduction

The SharePoint Framework (SPFx) is a powerful tool for building web parts and extensions for SharePoint Online and SharePoint on-premises. PnPjs is a JavaScript library that simplifies the process of interacting with SharePoint data. This article will guide you through the steps to add PnPjs to your SPFx project, check your TypeScript version, and provide useful links to official documentation for further study.

Table of Contents

1. Setting Up Your SPFx Project
2. Installing PnPjs
3. Configuring Your Web Part to Use PnPjs
4. Verifying TypeScript Version
5. Example Code to Fetch SharePoint List Items
6. Build and Test Your SPFx Web Part
7. Conclusion
8. Summary of Commands
9. Official Documentation Links

Setting Up Your SPFx Project

If you haven’t already created your SPFx project, follow these steps:

1. Install the Yeoman generator for SharePoint (if you haven’t done this already):

   npm install -g yo @microsoft/generator-sharepoint

2. Create a new SPFx web part:

   yo @microsoft/sharepoint

Follow the prompts to set up your project. Choose options that suit your needs (e.g., framework type, web part name).

3. Navigate to your project folder:

   cd your-project-name

Installing PnPjs

1. Install PnPjs and the necessary packages:
   You need to install the core PnPjs libraries for SharePoint.

   npm install @pnp/sp @pnp/nodejs --save

If you’re using React, you might want to include the React-specific libraries as well:

   npm install @pnp/spfx @pnp/react --save

2. Add necessary imports in your web part file (for example, Article2WebPart.ts):

   import { spfi, SPFx } from "@pnp/sp";
   import "@pnp/sp/items";  // Import items to interact with SharePoint list items

Configuring Your Web Part to Use PnPjs

1. Initialize PnPjs in your onInit method. This is where you’ll set up PnPjs to work with your SPFx context.

   protected onInit(): Promise<void> {
       return super.onInit().then(_ => {
           const sp = spfi().using(SPFx(this.context));  // Initialize PnPjs with SPFx context
           // Now you can use the 'sp' variable to call PnPjs methods
       });
   }

Verifying TypeScript Version

To check the version of TypeScript installed in your project, you can do the following:

1. Open your terminal and navigate to your project directory:

   cd path/to/your/project

2. Run the following command to check the TypeScript version:

   npm list typescript

3. You can also check the package.json file in your project for the typescript entry under devDependencies.

TypeScript Version Compatibility

• SPFx v1.12 and earlier: Compatible with TypeScript 4.0.x and 4.1.x.
• SPFx v1.13 and later: Compatible with TypeScript 4.3.x and higher versions.
• SPFx v1.14 and later: Compatible with TypeScript 4.5.x and higher.

Example Code to Fetch SharePoint List Items

Here’s a full example to fetch items from a SharePoint list:

import { spfi, SPFx } from "@pnp/sp";
import "@pnp/sp/items";  // Import the items module

interface IDocumentItem {
    Title: string;
    Id: number;
}

export default class Article2WebPart {
    protected onInit(): Promise<void> {
        return super.onInit().then(_ => {
            const sp = spfi().using(SPFx(this.context));  // Initialize PnPjs with SPFx context

            // Fetch items from the SharePoint list
            sp.web.lists.getByTitle("Documents").items.select("Title", "Id").get().then((items: IDocumentItem[]) => {
                items.forEach(item => {
                    console.log(item.Title);  // Log the Title of each item
                });
            }).catch(error => {
                console.error("Error fetching items: ", error);
            });
        });
    }
}

Build and Test Your SPFx Web Part

1. Build your project:

   gulp build

2. Serve your web part:

   gulp serve

3. Open your browser and navigate to the local SharePoint workbench (usually at https://localhost:4321/temp/workbench.html) to test your web part.

Conclusion

By following these steps, you should have PnPjs properly set up in your SPFx project, along with a correct TypeScript version. You can then use PnPjs methods to interact with SharePoint data easily.

Summary of Commands

npm install -g yo @microsoft/generator-sharepoint
yo @microsoft/sharepoint
cd your-project-name
npm install @pnp/sp @pnp/nodejs --save
npm install @pnp/spfx @pnp/react --save
npm list typescript
npm install typescript@latest --save-dev
gulp build
gulp serve

Official Documentation Links

1. PnPjs GitHub Repository: PnPjs GitHub
2. Getting Started with PnPjs: Getting Started with PnPjs
3. PnPjs API Reference: PnPjs API Reference
4. PnPjs Samples: PnPjs Samples
5. SPFx Overview: SharePoint Framework Overview
6. SPFx Developer Documentation: SPFx Developer Documentation
7. SPFx API Reference: SPFx API Reference
8. SPFx Samples GitHub Repository: SPFx Samples GitHub Repository
9. Microsoft Learn: SharePoint Framework: Microsoft Learn
10. PnP Community: PnP Community
11. Microsoft 365 Developers YouTube Channel: YouTube Channel