Let me be super clear about this: you should always use SharePoint Framework whenever possible! This blog post is about an extremely simple alternative when SPFx is simply not an option. And by extremely simple, I really mean it. It doesn’t even include webpack (or similar tools), which would give a ton of other benefits. So before you use this configuration, ensure that it covers your requirements (note: you won’t be able to use TypeScript ‘imports’!).
Before we dive into the details, let me start by sharing the high level requirements that led to this.
Clearly that would never happen, so I had to find a super simple way to use TypeScript! It had to be something simple as it could not impact progress and time-frames already agreed with the client.
List of tech requirements:
- Needs to work with a SharePoint classic content/script editor web part
- Needs to be deployed to a SharePoint document library
- Needs to retrieve data from 2 lists in SharePoint via REST API
- Needs to display some information to the user on a not very complex UI
As you can see, the list of requirements was relatively simple. So is the solution.
Start by creating a new folder for your project. Open a command line terminal on that folder and run
This will lead you through some questions that will be used to generate a new “package.json” file for your project.
Next, we will install TypeScript as a development dependency. Go back to the command line and run
npm install typescript --save-dev
After TypeScript is installed, open the “package.json” file and add two new entries as per the image below. We are going to use tsc to compile the TypeScript code
- build – this task allows building on demand
To run the tasks on the command line, execute “npm run <task-name>”
Next, create the configuration file for TypeScript (again, we are keeping things very simple here, but feel free to explore further options):
The include property has a reference to a src folder, so create one at the root. This is where your files will be placed.
install @types/jquery --save
And that’s it in the configuration side. Extremely simple as promised.
Web Part files
In the source folder, create a CSS, HTML and TypeScript folder with the name of your web part (for consistency)
Note the reference to polyfill.io as this is required in order to use promises on certain browsers…
At the bottom, we simply create an instance of our main class and execute the main method to load everything.
And finally, an extremely simple example of the HelloWorld class that only logs a message to the console
Content Editor Web Part
Now to use the web part on a page, the only thing that you need to do is add the url of the HTML file to a content editor web part and everything will load as expected.
As mentioned in the beginning, this was an extremely setup only based on TypeScript and I believe it can be very useful for extremely simple scenarios or for someone not familiar with other tools that allow for more advanced scenarios. If your requirements are slightly more complex, you will likely require a more complex build process.
If you have not tried TypeScript yet and are “stuck” with developing web parts to be embed on a page using the classic approach, then hopefully this blog post will incentive you to give it a try.
About the Author:
I am a development consultant at CPS with 9 years of SharePoint development experience. Having worked with all versions since SharePoint 2007, I have a special preference for SharePoint Online as it allows me to use the latest tools available to build very interesting solutions. My favorite part of the SharePoint development ecosystem is the amazing community, who created the best development tools SharePoint has ever had.
Rodrigues, J (2018). Using TypeScript with SharePoint Content/Script Editor Web Parts. Available at: https://joelfmrodrigues.wordpress.com/2018/08/13/using-typescript-with-sharepoint-content-script-editor-web-parts/ [Accessed 1 November 2018]