Working with JavaScript libraries

As an example, how we make a third-party JavaScript library work with SharePoint Framework and TypeScript, we use a simple but useful library called Markup.js by Adman Mark. This is a simple templating library which converts JavaScript objects into HTML. You can find the library on GitHub: https://github.com/adammark/Markup.js/. This library does not come with typing but we can create our own.

We can use npm to install the package as part of our web parts. Type the following command to Command Prompt when you are in the root folder of the project:

npm install markup-js --save 

We need to add a type definition file to make Intellisense and type-checking work in our web part project. Luckily, this is very simple because Markup.js only has one function. Add a new file called markup-js.d.ts in the typings folder of the web part project with the following contents:

declare module "Mark" { 
 function up(context: any, template: string): string 
}